XcodeでUIPageControlを追加する方法【初心者向け】

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という名称にしました。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

処理の実装

最後に処理を実装していきます。

まず、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アプリ開発オンラインブートキャンプを開催しています。