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デバイスのホーム画面にも利用されているので、一度は見たことがあるでしょう。

PageControl

UIPageControl自体の使い方はシンプルですが、単体では実行することができません。そのため、通常はUIScrollViewと組み合わせて使います。

 

 

InterfaceBuilderでの配置

画面に追加していきましょう。

UIPageControlをInterfaceBuilder(インターフェースビルダー)で、画面下部に配置します。
XcodeScreenSnapz001

 

次にUIScrollViewを画面上部に配置します。

XcodeScreenSnapz002

 

UIScrollViewが小さいのでUIPageControlに重ならないように拡大します。

XcodeScreenSnapz003

 

インスペクタのPage Controlで、Pagesに表示したいページ数を入力します。

XcodeScreenSnapz004

ただし、この時UIPageControlのサイズは自動的に変わらないため、必要な分だけ拡大するようにしてください。

 

コードから操作可能にするために、UIScrollViewをヘッダファイルに右ドラッグアンドドロップして、IBOutletを作成します。例ではscrollViewという名称にしました。

XcodeScreenSnapz006

 

同様にUIPageControlをヘッダファイルに右ドラッグ&ドロップして、IBActionを作成します。

作成するIBActionの対象EventはValue Changedです。

UIPageControlはUIScrollViewのスワイプだけではなくて、表示される小さな「○」をタップすることでもページ遷移できます。そのため、Value ChangedのEventを認識できるようにしておきます。

XcodeScreenSnapz007

 

同様の手順でUIPageControlのIBOutletも作成します。

例ではpageControlという名称にしました。

XcodeScreenSnapz008

 

 

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

独学に限界を感じたら…テックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 独学に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料で予約する