【Swift】Page View Controllerの使い方。ページをめくって画面遷移をする。(Swift 2.1、XCode 7.2)

2020年6月16日

Page View Controllerとは

本記事ではSwiftで使える部品のUIPageViewController(以下、ページビューコントローラー)について説明する。

Page View Controller

 

ページビューコントローラーとは、めくる、または、ドラッグで画面を遷移させるコントローラーである。

セグエでも似たようなことができるが。ページビューコントローラーを使うと、セグエの定義やスワイプ検知を実装せずに簡単にビューコントローラーの切り替えを実装できるので便利だ。

アプリのマニュアルなど、外部データが不要な画面を連続して表示する場合などに活用できそうだ。

 

ページビューコントローラーを使ってみる

それでは、ページビューコントローラーを使って画面遷移させる動きを実装してみよう。

以降の手順を開始する前のXcodeプロジェクトをGitHubに置いたので、試してみる人はご利用されたし。
⇒「テスト用プロジェクト

事前準備ではストーリーボードに3つのビューコントローラーを配置し、それぞれに画像を表示させておいた。

ストーリーボードに3つのView Controllerを配置した

 

下図赤枠のビューコントローラーを選択、黄緑枠のアイデンティティインスペクタボタンを押して設定画面を表示する。Restration IDにチェック、Stroyboard IDに「Morning」を入力する。これはソースコードからこのビューコントローラーにアクセスするための識別子である。

同じように、紫枠のビューコントローラーのStoryboard IDを「Evening」、黄枠のビューコントローラーのStoryboard IDを「Night」に設定する。

ストーリーボードIDを設定する

 

ページビューコントロラーをストーリーボードに配置する(下図赤矢印)。紫枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Is Initial View Controllerにチェックを入れる。これでアプリ起動時にページビューコントローラーが起動されるようになった。

Page View Controllerをストーリーボードに配置する

 

冒頭で説明したように、ページビューコントローラーを使った画面遷移はセグエが不要なのでストーリーボードの設定はこれで終わり。

次にページビューコントローラーのカスタムクラスの作成に取り掛かる。

メニューから「File」⇒「New」⇒「File…」を選択する。

新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。

Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestPageViewController」、Subclass ofに「UIPageViewController」を入力し、Nextボタンを押す。

クラス名を入力する

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。

カスタムクラスの保存先を指定する

 

ストーリーボードに戻り、下図赤枠のページビューコントローラーを選択する。黄緑枠のアイデンティティインスペクタボタンを押して設定画面を表示し、Classに「TestPageViewController」を設定する。これでページビューコントローラーにカスタムクラスが使われるようになった。

Page View Controllerにカスタムクラスを設定する

 

TestPageViewController.swiftを以下のコードに変更する。

「右ドラッグ時の呼び出しメソッド」または「左ドラッグ時の呼び出しメソッド」が呼び出されたら、引数で渡ってきた現在のビューコントローラーをもとに次に表示するビューコントローラーを導き出して返している。

 

以下は実際のプレイ動画。ドラッグの動きにページめくりが追随するところがいい感じだ。

Page Controlを表示する。

ページビューコントローラーを使えば、Page Control(以下、ページコントロール)という、現在のページ位置を把握するための部品を簡単に配置できる。⇒「ページコントロールとは

ただし、表示するには画面戦時のアニメーションを「Page Curl(ぺーじめくり)」ではなく「Scroll」にする必要がある。

実装してみよう。ストーリーボードを開き、下図赤枠のページビューコントローラーを選択する。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Transition Styleに「Scroll」を設定する。

Page View ControllerのTransition Styleを「Scroll」に変更する

 

TestPageViewController.swiftに以下の2つのメソッドを追加する。

「全ページ数を返すメソッド」では、画面遷移させるビューコントローラーの総数を返す。「ページコントロールの最初の位置を返すメソッド」では、例えば0を返すとページコントロールの選択丸印が一番左端から始まる。

 

以下は実際のプレイ動画。

 

ページコントロールの色を変更する

デフォルトのページコントロールは背景が黒で、ボタンは白になっている。デザインを変更したいときはAppDelegate.swiftで行う。⇒「(参考)stackoverflowの記事

具体的にはAppDelegate.swiftを以下のコードのように変更する。

以下は実際のプレイ動画