HowTo_CollectionView

こんにちはEveryDaySoft代表の永田です。こちらのリポジトリにあるCollectionViewについて、解説いたします。

https://github.com/daisukenagata/SampleCollectionView

ネット上に汎用的に拡張できるSampleがあまりないと感じ作成しました。CollectionViewはオセロや将棋盤をイメージしていただければと思います。マス目上にデザインを構築できる機能です。

SampleCollectionViewはCollectionViewを管理しているクラスです。このクラスでの役割で、CollectionViewのデザインを決定します。XibというファイルでCollectionViewの表示領域を決定します。

https://github.com/daisukenagata/SampleCollectionView/blob/3ab7fa38ceb3f87085f3efe89e0e41bbfe894ffc/SampleCollectionView/SampleCollectionView.swift#L16

layout.itemSize = CGSize(width: UIScreen.main.bounds.width / 4,
               height: UIScreen.main.bounds.width / 4)

この4という数字は横幅に対して4等分している数字を縦横サイズとして設定しています。画面ではこのようになります。5等分にするとLabelの数が横に4つになります。

デフォルトではCellの数によって余白を自動計算するため、ピッタリの値を設定すると、自動で調整します。FileOwnerという箇所で設定するとIBOutletで接続したコードの状態が値があ理、他のクラスでも使用できます。loadNibという関数で使用しているコードがFileOwnerでは必要です。initと書かれている部分は2箇所ありますが、overrideと書かれた部分はデフォルトの初期化、最初に生成する部分です。requiredと書かれた部分はinitを使用する場合に必要になります。最初に生成する場合に何をしたいかでinitの効果が決まります。

余白を調整したい場合はこのコードを追加します。
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0

このプログラムは全デバイスに対応します。

SampleCollectionCellは1マス単位のデザインを管理するクラスです。Xibで表示領域を決定しています。Xib上で表示領域を設定すると、視覚上でわかり、コード量が少なくなるので、管理しやすくなります。SampleCollectionCellにコードで設定する場合は、明示的にわかるクラスでわかる必要がある内容をコードで実装します。

例えば、タップされた場合に背景色が変化する場合にはコードで記述します。基本的にViewにはプログラムロジックは書かないようにして、デザインに関するものに集約するとわかりやすくなります。

SampleCollectionDataSourceは表示するためのプログラムロジックを管理するクラスです。必ず記載する関数が画像内にあります。

どのようにコマを表示するかを決定しています。SampleCollectionCellClassを指定して表示するようにしています。起動時、リロード時に実行します。UICollectionViewDataSourceというように記載しているのは、Collectionのプログラムロジックを管理するという種類を決定します。これをiOSではprotocolと呼び、プログラムではインターフェースとも呼びます。電話線のようなものです。

画面、コマ、プログラムロジックを用意しまして、表示するControllerに設定します。Main.storyboardでは表示するSampleCollectionViewを指定します。

表示するプログラムロジックを決定します。ユーザー操作delegateというプログラムで決定します。(このサンプルコードには設定していません。)
cView.collectionView.dataSource = dataSource
    
このコードがcollectionViewに使用するコマを決定します。         cView.collectionView.register(SampleCollectionCell.identifier, forCellWithReuseIdentifier: "SampleCollectionCell")

本日は、稼働日前にCollectionViewについて記載させていただきました。後ほど、追記するかもしれません。なるべくシンプルに記載しようとしましたが、言葉にすると長くなってしまいました。

以上、貴重なお時間お読み下さいまして、誠にありがとうございます。