Collection Viewの基礎を学んでみた【Swift低空飛行ガイド】

2015年9月3日

dev

スポンサーリンク

はじめに

Swiftで何かのコンテンツをリスト表示するときにテーブルビューを使うことが多いと思いますが、もっとオシャレなデザインにしたいとか、タイル貼りのような2列、3列の配置にしたい場合はコレクションビューを使う手もあります。

しかし、テーブルビューに比べて少し敷居が高く、動くようになるまでが意外と難しかったので、基本的な使い方をメモしておこうと思います。

本記事の作成にあたり、以下のサイトを参考にさせて頂きました。

SwiftでUICollectionViewをとりあえず表示させてみる(開発メモさん)

ではやってみましょう

プロジェクトの新規作成

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

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

 

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

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

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

 

セルをカスタマイズする

セルの名前を付ける

post-1157_02まずは表示されている警告を無くすためセルの識別子を設定します。これはセル毎に内容をセットするときなどに使われる名前で、コレクションビューやテーブルビューを使うときに必要になります。

セルを選択した状態で、Attributes inspectorにあるIdentiferの項目に「cell」と入力しましょう。これで警告も消えてくれます。

 

 

 

サイズの調整

post-1157_03次にセルのサイズを変更します。セルの角にある小さな四角をマウスでドラッグしてサイズを以下の数値に広げます。今回はセルの幅と高さを固定にします。

Width=150
Height=200

 

 

 

セルに画像とラベルを配置

post-1157_04今度はセルの上に、イメージビューとラベルを配置します。サイズは適当でいいので、うまくセルの中に収まるように調整してください。色などもお好みで着けた方が見やすくなります。

 

 

 

 

カスタマイズセルのクラスを準備する

post-1157_05ここがテーブルビューと違って簡単に扱えない大きな違いになります。今作ったセルに対して、専用のクラスを作成してあげる必要があります。デフォルトのコレクションビューにはテーブルビューと異なりイメージやラベルのオブジェクトの宣言がないためです。

メニューのFiles-New-Fileを選択して、Swiftファイルを追加します。ファイル名は「CustomCell」にして、グループで上から2つ目を指定しましょう。1番上の青いフォルダマークの場所に保存するとプロジェクトファイルと同じ階層に、上から2番目を選ぶともう一段下の階層、ViewController.swiftがある場所にファイルが作られます。

 

ファイルができたら、ここでようやくちょっとコーディングです。以下のソースを今作ったCustomCell.swiftの中にコピーしましょう。セルの中にイメージビューとラベルがあるよ!という宣言と初期化するために必要な命令が書いてあります。

 

オブジェクトとクラスの関連付け

post-1157_06今度は、今作ったクラスとストーリーボード上のオブジェクトを関連付けします。ストーリーボード上のセルを選択して、Identity inspectorにあるClassの項目でCustomCellを選んでください。これでセルとクラスの関連付けができました。

 

 

 

post-1157_07続いてConnection inspectorに表示されるoutlets一覧で、imgsampleの右側にある小さな丸をドラッグしてストーリーボード上のイメージビューまで引っ張ってください。同じようにラベルにもlblsampleを引っ張って行ってください。これでストーリーボード上のイメージビューとラベルをプラグラムで制御できるようになりました。

 

 

最後にコレクションビューの設定

コードの追加

smileあともう少しです。ここでようやくメインのViewController.swiftにコードを追加します。コードの中でsmile.pngというファイルを指定していますが、これは他の画像ファイルでも大丈夫です。ちょうどいい画像がなければこちらをどうぞ。用意した画像を左側のプロジェクトファイル一覧の中に放り込んでください。

 

画像ファイルを用意したら、 ViewController.swiftに以下のコードをコピーしましょう。場所はdidReceiveMemoryWarningファンクションの下あたりにペタッと貼ってください。

最初のファンクションでは、セルの中に画像とラベルを表示しています。2番目はセクション(ビューのグループみたいなもの)がいくつあるのかを指定しています。今回は1つだけなので1になります。最後のファンクションは表示するセルの個数を指定しています。

 

デリゲートの設定

post-1157_08次はストーリーボードに戻ってデリゲートを設定します。これを忘れるとコレクションビューが表示されるときに、上記で作成したファンクションが呼ばれないので注意してください。

図のように、コレクションビューの所からcontrolキーを押して黄色いアイコンのView Controllerまでドラッグすると、Outletsという小さな黒い枠が表示されます。dataSource、delegateともに必要なので、2回同じ操作を行って両方にチェック(文字の前に小さな丸がつきます)してください。

 

制約の設定

post-1157_09最後にコレクションビューがiPhoneの画面にピッタリくっつくように、制約を設定します。Collection Viewを選択した状態で、ストーリーボードの右下の方にあるPinボタンをクリックします。上下左右の隙間を0に設定したら完了です。Add 4 Constraintsボタンを押して確定しましょう。

 

 

 

実行してみましょう!

post-1157_10実行すると、画像とラベルが20個分、2列になって表示されると思います(画像はセルに色を設定しています)。これはセルの幅とセル間の間隔(コレクションビューセルのSize inspectorで設定できます)を計算して、はみ出ずに表示できる分だけ表示するよう自動的に調整してくれているからです。気になった方はセルの幅を思いっきり細くしてみてください。すると3列に表示されたりとその効果が確認できます。

今回のサンプルはこちらに置いてあります

 

 

 

おわりに

使い方はテーブルビューとそれほど変わらないのですが、カスタムセルを用意しなければならなかったり、画面の幅を意識しなければならなかったりと気を使う部分が多い感じがしました。でも慣れると簡単に面白いデザインのインターフェイスが作れるようになるので覚えておいて損はないと思います。

今度は画面サイズに追従してサイズを調整する方法や、ストーリーボードだけでどこまで細かい設定ができるのか試してみようと思います。

 

続編書きました。こちらになります(こっちもそのうちアップデートします)。

ページめくり風な動作に挑戦した記事は以下にあります。

Collection Viewを使ってページめくりをやってみた

 

スポンサーリンク