【Swift】Colloction View Controllerの使い方。格子状に並んだセルをタップして画面遷移する。(Swift 2.1、XCode 7.2)

2020年6月16日

Collection View Controllerとは

本記事ではSwiftで使える部品のCollection View Controller(以下、コレクションビューコントローラー)について説明する。

Collection View Controller

 

コレクションビューコントローラーとは、UICollectionView(以下、コレクションビュー)を管理するコントローラーである。

部品の配置はTable View Controllerに似ていて、ビューコントローラーは直下にViewが配置されているのに対し、コレクションビューコントローラーは直下にCollection View(以下、コレクションビュー)が配置されているのが特徴である。

そのため、コレクションビューコントローラーを使うと画面いっぱいにコレクションビューが表示される。

コレクションビューコントローラーとビューコントローラーの部品の配置の違い

 

コレクションビューを画面全体にしたくない場合は、コレクションビューコントローラーを使わずにコレクションビューの部品を使うのが望ましい。

Collection View と Collection View Cell

 

コレクションビューコントローラーを使ってみる

コレクションビューコントローラーを使ってコレクションビューを表示してみよう。

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

事前準備ではView Controller(以下、ビューコントローラー)にNavigation BarとImage View(以下、イメージビュー)を配置し、タイトルと画像を表示するコードを記述しておいた(※事前準備の段階では実行時エラーになる)。

これにコレクションビューコントローラーを追加し、コレクションビューのアイテムをタップすると画面遷移してタイトルと画像が表示されるものを実装する。

View ControllerにNavigation BarとImage Viewを追加

 

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

コレクションビューコントローラーをストーリーボードに配置する

 

下図赤枠のセルを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Identifierに「TestCell」を入力する。これはソースコードからこのセルにアクセスするための識別子の設定である。

Collection View Controllerのセルの識別子を設定する

 

セルにImage View(以下、イメージビュー)を配置する(下図赤矢印)。続いて、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Modeに「Aspect Fit」、Tagに「1」を設定する。

紫枠のPinボタンを押して吹き出しの設定画面を表示する。黄枠のConstraint to Marginsのチェックを外し、上下左右の4つの制約に「0」を入力する。これでイメージビューがセルの大きさに合わせて表示されるようになった。

Collection View ControllerのセルにImage Viewを配置する。

 

次にコレクションビューコントローラーのカスタムクラスを作る手順に入る。

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

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

 

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

Cocoa Touch Classを選択する

 

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

クラス名を入力

 

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

保存先を指定する

 

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

Ctrlキーを押しながら赤枠のコレクションビューコントローラーをドラッグ&ドロップでビューコントローラーまで運んで吹き出しのメニューを表示し、メニューから「Modal」を選択する。これは2つのコントローラーをセグエで接続する設定である。

Collection View ControlleとView Controllerをセグエで接続する

 

下図赤枠のSegueを選択、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を表示し、Identifierに「TestSegue」を設定する。これはソースコードからセグエにアクセスするための設定である。

Segueの識別子を設定する

 

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

セルが選択されたらセグエを実行し、「画面遷移前の呼び出しメソッド」の中で、セルの画像を遷移先ビューコントローラーのインスタンス変数に設定している。

Table View Controllerの場合と同様に、UICollectionViewControllerにはDataSourceとDelegateがすでに適用されているので、サブクラスで適用する必要が無い。そのため、デリゲートメソッドはオーバーライドして実装することになる。

 

ViewControlloer.swiftは変更無し。

 

以下は実際のプレイ動画