Collection Viewを使ってページめくりをやってみた【Swift低空飛行ガイド】

dev電子書籍やフォトアルバムみたいにスワイプしてページをめくるような機能ってどうやるんだろう?とふと思い立って、コレクションビューを使って簡単に作ってみました。今回はその方法のご紹介です。

プロジェクトの作成

まずはプロジェクトを新規作成します。名前は「PageScrollSample」としておきましょう。テンプレートは「Single View Application」を選択してください。Core Dataのチェックも不要です。手順の詳細は以下をご参照ください。

「基礎手順:プロジェクトの新規作成

 

 

オブジェクトの配置や設定

コレクションビューの配置と設定

post-3472_01最初に土台となるコレクションビューを配置します。ストーリーボード上のView Controllerに右下のオブジェクトライブラリからCollection Viewをドラッグして位置とサイズを以下の数値に合わせておいてください。警告が1つ出てきますが、後で対応しますので気にしないで良いです。

  • X=0
  • Y=0
  • Width=600
  • Height=600

 

post-3472_02今作成したコレクションビューのサイズは上記のサイズで固定になっているので、機種によってサイズが変わっても画面の大きさに追随できるように制約をつけておきます。Collection Viewを選択した状態で、ストーリーボードの右下の方にあるPinボタンをクリックします。上下左右の隙間を0に設定したらAdd 4 Constraintsボタンを押して確定しましょう。

 

 

 

 

post-3472_02_2次はコレクションビューの初期設定をしておきましょう。Collection Viewを選択した状態で、Attributes inspectorをクリックし以下の項目を変更します。本のように横にページをめくりたいのでスクロールの方向は水平に、1ページごとにスクロールがきっちり止まるようにしたいので、こんな感じにしています。

  • Scroll Direction:Horizontal
  • Paging Enabled:チェックする
  • Bounces:チェックを外す

 

 

post-3472_03次もスクロールの挙動に関する設定です。Colloction Viewを選択した状態でSize inspectorをクリックし、Min Spacingの2項目を共に0にします。これはセルとセルの隙間をなくすための設定です。

 

 

 

 

 

 

post-3472_04ここでデリゲートの設定をしておきます。図のようにColloction Viewの所から黄色いアイコンのView Controllerまでcontrolキーを押しながらドラッグすると、Outletsという小さな黒いウィンドウが表示されます。dataSource、delegateともに必要なので、2回同じ操作を行って両方をチェック(文字の前に小さな丸がつきます)してください。この作業を忘れるとこれから作成するコレクションビュー関連のファンクションが呼び出されませんので忘れずに。

 

 

セルの配置と設定

ようやくコレクションビューの設定が終わりましたので、次はその中に表示されるセルの配置と設定に移ります。

セルを操作するためには専用のクラスを用意する必要がありますので、メニューのFiles – New – Fileを選択してSwiftファイルを追加します。ファイル名は「CustomCell」にしてください。

作成できたら中に下のコードをコピペして貼っておいてください。コードの中にimgという名前でイメージビューが書かれていますが、セルの中には画像が1個ありますよって宣言しています。

 

post-3472_05次はコレクションビューのセルに内容をセットするときなどに使われる識別子を設定します。コレクションビューをプログラムで制御するときに必要になります。

ストーリーボード上のCollection View Cellを選択した状態でAttributes inspectorにあるIdentiferの項目に「cell」と入力しましょう。これで警告も消えてくれます。

 

 

post-3472_07ここまでできたら、先ほど作成したカスタムセルのクラスと結びつけます。cell(Collection View Cellから名前が変わっています)を選択した状態でIdentity inspectorをクリックし、Class名に「CustomCell」を指定します。

 

 

 

 

 

post-3472_08面倒な設定が多いですがあと少しです。次はセルの中にイメージビューを配置して位置とサイズを以下のように指定します。

  • X=0
  • Y=0
  • Width=50
  • Height=50

 

post-3472_07_2今度はカスタムセルクラス内のイメージビューとストーリーボード上の画像を結びつけます。cellを選択した状態でConnection inspectorをクリックし、Outlets一覧のimg右側にある丸印をImage Viewにドラッグします。これでプログラムの中から画像の切り替えができるようになります。

 

 

 

post-3472_09これで最後の設定です。セルの大きさは画面の大きさによって変わるため、中の画像も自動でサイズが変わるように制約をつけておきます。cell内のimg(Image Viewから名前が変わっています)を選択した状態で、ストーリーボードの右下の方にあるPinボタンをクリックします。上下左右の隙間を0に設定したら完了です。Add 4 Constraintsボタンを押して確定しましょう。

 

 

 

サンプル画像の準備

コーディングに入る前に、適当な写真や画像を用意しましょう。ない場合は以下の画像をお使いください。pic1.png、pic1.png、pic1.pngという名称でXcodeのプロジェクト内にコピーしておいてください。

pic1pic2pic3

 

 

 

 

 

 

 

 

少しだけコーディング

あとはちょっとだけコーディングの作業になります。とはいえViewController.swiftにペタペタ貼るだけで大丈夫です。

まずはコレクションビューの動作に必要な設定から作ります。以下は使用するコレクションビューが何個あるのかを指定しています。画面の上部と下部で異なるスクロールメニューを設置するときなどに重要になりますが、今回は1つだけなので1を返すよう記述します。

 

その次はセルの数を指定します。今回はページが3枚だけなので3を返すよう記述します。コレクションビューが複数ある場合はそれぞれに異なる番号を割り当てられるので、その番号で判定してそれぞれのセルの数を指定できます。

 

今度は少し長いし作りが雑ですが、たいしたことないです。各セルが表示される際にこのファンクションが呼び出されるので、indexPath.rowに格納されているセルの番号によって表示する画像を振り分けています。2行目にパラメータで”cell”って書いていますが、これはストーリーボードで設定した識別子です。

 

今度は画面に表示されるセルの大きさを動的に変更します。画面のサイズを取得して各ページの幅と高さを画面いっぱいに広げています。

 

最後はオマケみたいなものです。画面の上部に表示される時間やバッテリー残量が邪魔なので非表示にしています。

 

 

完成です!

post-3472_runこれで実行すると、3枚の画像を左右スワイプで切り替えられるアプリの完成です。

サンプルはこちらにあります。

 

 

 

 

 

 

おわりに

思ったよりページめくりの実装は簡単でした。もちろん、もっとスタイリッシュな動きをするライブラリなどもありますが、使い方によってはいろんな見せ方ができそうですね。画像だけじゃなく文字の情報も付ければ意外とオシャレなアプリが作れるかもしれません。

あとはお気に入りの画像を設定して、大好きな人に世界に一つだけのフォトアルバムアプリをプレゼントしてみるなんて、いかがですか?