はじめに
最近Swiftの学習をはじめました。学習の一環としてちょっとしたものを開発しています。
開発にあたり、CollectionViewを初めて使用したのでこちらについて学んだことをまとめていきます。
開発環境
- macOS Catalina version10.15.7
- Xcode version12.2
- Swift5
そもそもCollectionViewとは？
CollectionViewとは、下記画像のように多くのアイテムをパネルのように一覧として表示させたい時に使われるものです。
※参考画像
実際に使ってみよう
まずはCollectionViewを設置する
設置した後は、セルのIdentifierの設定をする。
今回は、cellとする。
UILabelの設置
セル上にLabelを設置します。設置した後にLabelのTagを設定する。Tagを設定することで各セルのUI部品にアクセスできるようになります。
UICollectionViewDelegateとUICollectionViewDataSourceを追加する
CollectionViewを使用するにあたり、UICollectionViewDelegateとUICollectionViewDataSourceを追加する。
また追加した際に、実装する必要のあるメソッドを追加します。（Fixを押すと補完してくれます）
//セクションの中のセルの数を返す
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//今回はとりあえず12とする。（配列に表示させたいデータを入れている場合は配列のデータ数を返せば良い。）
return 12
}
//セルに表示する内容を記載する
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
//storyboard上のセルを生成 storyboardのIdentifierで付けたものをここで設定する
let cell:UICollectionViewCell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)
//セル上のTag(1)とつけたUILabelを生成
let label = cell.contentView.viewWithTag(1) as! UILabel
//今回は簡易的にセルの番号をラベルのテキストに反映させる
label.text = String(indexPath.row + 1)
return cell
}
ViewControllerとCollectionViewを紐付けする
storyboardのviewControllerの階層が表示されている部分で、CollectionViewを右クリックしながらViewControllerにdataSourceとdelegateを紐付けする。
※これを忘れるとセルは表示されないので注意！
ここまでで下記画像のように最低限セルが表示されます。
（セルの背景色を変更することでわかりやすく確認できます。また、ラベルの位置を調整しないとセル上にうまく表示されません）
ビルドする際に、自分は以下のエラーにひっかかり少し苦戦しました。
Could not cast value of type 'UIView' to 'UILabel'
原因を調べてみたところ、どうやらTagをつける箇所を間違えていました。上記の通りLabelにTagを設定できていれば大丈夫ですが、間違えてContentView部分にTagを設定してしまったためこちらのエラーが出たのかなと思います。
Tagを設定する際は、しっかりと確認してから設定しましょう。
セルのサイズを変更したい！
今のままではセルのサイズが小さいのでサイズを変更したい！
そんなときは、UICollectionViewDelegateFlowLayoutを使用することでセルを調整（セルのサイズ調整、セル間の距離調整）できます。
セルのサイズを指定する処理はこちらのメソッドを使用する。
//セルのサイズを指定する処理
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
// 横方向のスペース調整
let horizontalSpace:CGFloat = 5
//セルのサイズを指定。画面上にセルを3つ表示させたいのであれば、デバイスの横幅を3分割した横幅 - セル間のスペース*2（セル間のスペースが二つあるため）
let cellSize:CGFloat = self.view.bounds.width/3 - horizontalSpace*2
// 正方形で返すためにwidth,heightを同じにする
return CGSize(width: cellSize, height: cellSize)
}
一行にセルを2つ表示させたい場合は、下記のように変えるとできます。
（行間の数が1つになる点注意）
et cellSize:CGFloat = self.view.bounds.width/2 - horizontalSpace
セルをタップした際に、画面遷移させたい！
そんな時は、didSelectItemAtメソッドを使用することで実装できます。
（遷移先のViewControllerにセグエをつなげている前提）
//セル選択時の処理
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
//指定の遷移先に遷移する（最低限の処理）
performSegue(withIdentifier: "指定のIdentifier", sender: nil)
}
まとめ
今回はCollectionViewを初めて使用したので、簡単にまとめてみました。
正直まだしっかりと理解はできていないので、引き続き学習を進めていきます！
Swiftの勉強をするようになり、普段使っているアプリはどうやって作られているか意識するようになりとても勉強になります。いつか、開発したアプリをAppStoreに公開して他の人に使ってもらえるよう引き続き手を動かしていろいろ作ってみます。
以上。