【Swift】Page View Controllerの設定。画面遷移のアニメーションを変更する。(Swift 2.1、XCode 7.2)

2020年6月16日

Page View Controllerの設定

本記事ではUIPageViewController(以下、ページビューコントローラー)のアトリビュートインスペクタの設定について説明する。

Page View Controllerのアトリビュートインスペクタ

 

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

事前準備では、ストーリーボードに4つのビューコントローラーを配置し、ページビューコントローラーを使って画面遷移できるようにしておいた。

 

Navigation

画面遷移するときのページの移動方向を「Horizontal(水平方向)」と「Vertical(垂直方向)」から選択する。

以下は「Vertical(垂直方向)」に設定したときのプレイ動画。画面を縦方向にドラッグしてページを移動する。

 

Transition Style

画面遷移するときのアニメーションの種類を「Page Curl(ページめくり)」と「Scroll(スクロール)」から選択する。

以下は「Scroll(スクロール)」に設定したときのプレイ動画。Scroll Viewを使ったような動きをビューコントローラーをまたいで行えるのが嬉しい。

 

Page Spacing

ページとページの余白をポイントで指定する。この設定はTransition Styleが「Scroll」のときのみ有効になる。

以下は「160」に設定したときのプレイ動画。

Spine Location

1つのビューコントローラーを本の1ページとしたときの本の背の位置を「None」、「Min」、「Mid」、「Max」から選択する。この設定はTransition Styleが「Page Curl」のときのみ有効になる。

Navigationが「Horizontal」のとき、Minは画面左端、Maxは画面右端に本の背があるようにページめくりのアニメーションが行われる。一方、Navigationが「Vertical」のときは、Minは画面上端、Maxは画面下端が本の背になる。

Spine Lineの例

 

以下はNavigationが「Horizontal」で、Spine Locationを「Max」に設定したときのプレイ動画。

 

「Mid」は画面中央が本の背になる。下図のようにNavigationが「Horizontal」のときは水平方向の中央位置が本の背になる。一方、Navigationが「Vertical」のときは垂直方向の中央位置が本の背になる。

Spine Locationを「Mid」に設定した場合

 

なお、「Mid」に設定したときは、Double Sidedにチェックを入れてページを両面にする必要がある。そうしなければ以下のエラーが発生する。

A mid spine location is only valid with double-sided page

 

1画面に2つのビューコントローラーが表示されるので、以下コードの【変更箇所】のようにsetViewControllersメソッドの引数に2つのビューコントローラーを与えるように変更する必要がある。

 

また、ページを1回ドラッグすると「右ドラッグ時の呼び出しメソッド」または「左ドラッグ時の呼び出しメソッド」が2回連続で呼ばれるので、次の画面で表示するビューコントローラーを1つずつ返す。

これに関しては今回実装では変更無しだが、もしビューコントローラーの総数が奇数だった場合は以下のエラーが発生する。

reason: 'The number of provided view controllers (1) doesn’t match the number required (2) for the requested spine location (UIPageViewControllerSpineLocationMid)’

 

以下はNavigationが「Horizontal」で、Spine Locationを「Mid」に設定したときのプレイ動画。画面の見易さを考慮してiPadの横画面でテストした。iPhoneの場合は縦長に縮小されて表示される。