【Swift】PageBased ApplicationにPage Controlを表示する

導入

　Xcodeにはいくつかの雛形が用意されておりその中にPage-based Applicationがあります。Page-based ApplicationはiOSのホーム画面のように横スクロールでいくつかのページを表示する場合や、Bookアプリのようにめくってページ移動をする場合に使われています。その時に役立つのがPage Controlと呼ばれる「・・・」みたいなドットです。

　雛形のアイコンにはあたかもPage-based Applicationの代名詞とでもいうかのようにPage Controlのイメージが書いてあるのですが、実際の雛形の中にこれは含まれません。そこで今回はこいつを作ります。

下準備

　作られたばかりのPage-based Applicationは（いかにもデザインセンスの無い色の）めくりカレンダーのようなものになっています。今回はPage Controlの追加なのでこれを横スクロールのiOSのメイン画面のようにします。

　RootViewController.swift、20行目のtransitionStyleを.pageCrulから.scrollに変更します。これだけで横スクロールになります。ちなみにその横のnavigationOriantationを.horizontalから.verticalに変更すると上下スクロールになります。

 PageControl追加

　ようやくPage Controlを追加します。現在はRootViewControllerの上にDataViewControllerをaddSubview()している状態なので、またその上にPage Controlを表示します。すなわちRootViewController.swiftでDataViewControllerをaddSubview()した後に新たにPage ControlをaddSubview()します。

　全部載せるほどのものでも無いので変更部分のみ書いてあります。もちろん、pageControlはクラス変数として作っておいてください。

　pageControlを追加するのはRootViewController.swiftの大体30行目、DataViewControllerを追加した後にしてください。Page ControlのデフォルトのpageIndicatorTinColorとcurrentPageIndicatorTinColorは透明になっているので、適当な色を指定してください。今回はlightGrayとdarkGrayを使用しています。func pageViewController()はページをめくる際に呼び出されます。その中で使っているindexOfViewController()はModelControllerクラスの中で定義しています。これに目前(pending)のViewControllerを入れています。同じ関数でページめくりのアニメーションが終わった際に呼び出されるもの(2つめ)の中ではindexの取得がうまくいきません。ページめくりのフェイントに対応するためPageControlの更新はアニメーションが終了した時点で行います。pageControl.currentPageはデフォルトが0で(今回は明示的に0を代入しています)これに現在のindexを代入することで、darkGrayなドットが移動します。

タップでページ移動

　あまり使用している人はいないと思いますが、実はPageControlのドットの右側や左側をタップするとページが進んだり戻ったりします。あまり使われない機能をいちいち書くのが面倒なので、かけたら書きます。そのうち・・・