Collection Viewのセルサイズを画面サイズに合わせて変更する方法【Swift低空飛行ガイド】
はじめに
Swiftでコレクションビューを使う方法の基礎を最近覚えましたが、まだモノにできていない感じがしたので、引き続き勉強してみました。今回は画面のサイズに合わせて自動的にセルのサイズも変更して、常に3列表示できるようにしたいと思います。前回の分と合わせて、ようやくそれなりに使えるようになるのではないでしょうか。
こちらで作成したサンプルの続きになります。まだお読みになっていないからはこちらを先にご覧ください。
Collection Viewの基礎を学んでみた【Swift低空飛行ガイド】
学べること
- コレクションビューのセルサイズを画面のサイズに合わせて変更する方法
ではやってみましょう
サンプルのダウンロード
まずは全開作ったサンプルをダウンロードしましょう。これをベースに手を加えていきます。
サンプルはこちらに置いてあります
セルのサイズを調整
まずはセルのサイズを調整します。Cell sizeのWidth、Height共に200を指定してください。実行時には画面のサイズに合わせて変化しますので、編集時に使い易い大きさにしているだけです。
Min spacingのほうは、For Cells、For Lines共に3を指定してください。今回3列にするのでセルとセルの間には2つの隙間を作ります。その隙間の幅を指定しています。
セル内のオブジェクトを調整
次にセルの中のイメージビューとラベルを調整します。
イメージビューの調整
イメージビューはセルのサイズと同様、X=0、Y=0、Width=200、Height=200に設定します。実行すると画面サイズに合わせて変更されるので、ストーリーボード上で編集時に便利なように広げています。
ちなみに右の図ではイメージビューがラベルの上にありますが、これが逆だとイメージの裏側にラベルが隠れてしまいますので、ドラッグして位置を変更しておいてください。
サイズを変更したら、今度は可変するセルのサイズに追従できるように制約を付けます。Xcodeの画面右下にあるPinボタンをクリックして、Constrain to marginsのチェックを外したら、上下左右の数値を全て0にして隣接する赤い線をクリックして濃い色にします。これでAdd 4 constrainsボタンをクリックすればオッケーです。
ラベルの調整
ラベルもセルのサイズ変更に合わせて変化できるように調整しておきましょう。こちらはセルの下にピッタリ付けるよう配置して、左右も目一杯幅を広げます。
ついでにラベルの文字色も見やすいように変更しておきます。
配置が済んだら、イメージと同じくセルのサイズ変化に追従できるように制約を付けておきます。Pinボタンを押したら、Constrain to marginsのチェックを外して左右と下の数値を全て0にして隣接する赤い線をクリックして濃い色にします（上側の設定は不要です）。その代わり、Heightの項目をチェックして高さを固定します。あとはAdd 4 constrainsボタンをクリックすれば完了です。
ちょっとだけコーディング
最後にコーディングです。下記のコードをViewController.swiftにペタッと貼りましょう。
セルサイズの自動変更はオートレイアウトではできないらしく、コーディングの力が必要になります。ここでは3列表示させるために画面サイズの幅を3で割っています。その後ろのマイナス2は隙間を作るため、それぞれのセルから2づつ引いて計6を差っ引いています。3列にできる隙間は2つなので、3づつを割り当てます。先ほどMin spacingという項目で3を設定しましたが、この数値のことです。高さも幅と同じにしています。
作ってから気づきましたが、画面サイズがアプリ実行中に変わることはないのでdidloadあたりで計算させておいた方が良さそうですね。
|
1 2 3 4 5 |
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let width: CGFloat = view.frame.width / 3 - 2 let height: CGFloat = width return CGSize(width: width, height: height) } |
このコード、以下のサイトを参考にさせていただきました。
iPhoneアプリでありがちな設定画面を作る方法（とりあえずphpとかさん）
あとは実行！
これで実行すると画像が3列になって表示されます。間にちょっと隙間があるのも設定通りですよ。隙間をなくしたいときは、ちゃんと画面サイズの幅にピッタリ合うように計算してあげる必要があります。この辺りが面倒なところ。
今回のサンプルはこちらにあります。
おわりに
狙い通りに表示させるには画面のサイズに合わせた計算やオートレイアウトを意識する必要があり、なんとなく敷居が高いですが、やってみると意外とすんなり理解できると思いますよ。慣れれば表示させる内容の重要度に合わせてセルのサイズを変更したり、もっともっと自由度の高いレイアウトが可能になります。テーブルレイアウトだけでは物足りなくなったら、ぜひチャレンジしてみてください。