XcodeでUIPageControlを追加する方法【初心者向け】
XcodeのUIパーツ【UIPageControl】を追加する方法を初心者向けに解説した記事です。UIPageControlは、複数のページがある場合に、ユーザーに総ページ数と現在表示中のページを知らせるために使われます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。
今回は、XcodeでUIPageControl（ページコントロール）を追加する方法を初心者向けに解説します。
なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。
UIPageControlとは
UIPageControlは、複数のページがある場合に、ユーザーに総ページ数と現在表示中のページを知らせるために使われます。
iOSデバイスのホーム画面にも利用されているので、一度は見たことがあるでしょう。
UIPageControl自体の使い方はシンプルですが、単体では実行することができません。そのため、通常はUIScrollViewと組み合わせて使います。
InterfaceBuilderでの配置
画面に追加していきましょう。
UIPageControlをInterfaceBuilder（インターフェースビルダー）で、画面下部に配置します。
次にUIScrollViewを画面上部に配置します。
UIScrollViewが小さいのでUIPageControlに重ならないように拡大します。
インスペクタのPage Controlで、Pagesに表示したいページ数を入力します。
ただし、この時UIPageControlのサイズは自動的に変わらないため、必要な分だけ拡大するようにしてください。
コードから操作可能にするために、UIScrollViewをヘッダファイルに右ドラッグアンドドロップして、IBOutletを作成します。例ではscrollViewという名称にしました。
同様にUIPageControlをヘッダファイルに右ドラッグ&ドロップして、IBActionを作成します。
作成するIBActionの対象EventはValue Changedです。
UIPageControlはUIScrollViewのスワイプだけではなくて、表示される小さな「○」をタップすることでもページ遷移できます。そのため、Value ChangedのEventを認識できるようにしておきます。
同様の手順でUIPageControlのIBOutletも作成します。
例ではpageControlという名称にしました。
処理の実装
最後に処理を実装していきます。
まず、UIScrollViewのイベント（スワイプ）を拾う必要がありますので、ヘッダーファイルにて
@interface rootViewContorller : UIViewController
とプロトコルを定義します。
次に実装ファイルにページ数を定義します。#import〜の前に
#define pageCount 3
と記述し、今回は3ページにします。
まず実装ファイルのviewDidLoadで初期化をおこないます。
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// スクロールビューのページ遷移を許可する。
_scrollView.pagingEnabled = YES;
// スクロールビューの横幅を現在の三倍にする
_scrollView.contentSize = CGSizeMake(_scrollView.frame.size.width * pageCount, _scrollView.frame.size.height);
// スクロールビューのスクロールバーを非表示にする
_scrollView.showsHorizontalScrollIndicator = NO;
_scrollView.showsVerticalScrollIndicator = NO;
// スクロールビューのdelegate先を自分にする
_scrollView.delegate = self;
// ページコントロールのページ数を3ページにする
_pageControl.numberOfPages = pageCount;
// 現在のページを0に初期化する。
_pageControl.currentPage = 0;
}
次にタップや初期化で_pageControlの値が変更された時の処理を記述します。
– (IBAction)onValueChange:(id)sender
{
// スクロールビューのframeを取得
CGRect frame = _scrollView.frame;
// _scrollViewのフレームを現在のpageControlの値に合わせる
frame.origin.x = frame.size.width * _pageControl.currentPage;
frame.origin.y = 0;
// スクロールビューを現在の可視領域にスクロールさせる
[_scrollView scrollRectToVisible:frame animated:YES];
}
最後にフリックでスクロールされた時に_pageControlのcurrentPageを変更させる処理を書きます。
これはUIScrollViewのdelegateメソッドを利用します。
– (void)scrollViewDidScroll:(UIScrollView *)sender
{
CGFloat pageWidth = _scrollView.frame.size.width;
_pageControl.currentPage = floor((_scrollView.contentOffset.x – pageWidth / 2) / pageWidth ) + 1;
}
以上で、UIPageControlの処理は完了です。
ぜひ自分でも実装してみてください。
他のUIパーツも使いたい場合は、XcodeでUINavigationBarを追加する方法も合わせてご覧ください。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。
