こんにちはEveryDaySoft代表の永田です。こちらのリポジトリにあるCollectionViewについて、解説いたします。
https://github.com/daisukenagata/SampleCollectionView
ネット上に汎用的に拡張できるSampleがあまりないと感じ作成しました。CollectionViewはオセロや将棋盤をイメージしていただければと思います。マス目上にデザインを構築できる機能です。
SampleCollectionViewはCollectionViewを管理しているクラスです。このクラスでの役割で、CollectionViewのデザインを決定します。XibというファイルでCollectionViewの表示領域を決定します。
layout.itemSize = CGSize(width: UIScreen.main.bounds.width / 4,
height: UIScreen.main.bounds.width / 4)この4という数字は横幅に対して４等分している数字を縦横サイズとして設定しています。画面ではこのようになります。5等分にするとLabelの数が横に４つになります。
デフォルトではCellの数によって余白を自動計算するため、ピッタリの値を設定すると、自動で調整します。FileOwnerという箇所で設定するとIBOutletで接続したコードの状態が値があ理、他のクラスでも使用できます。loadNibという関数で使用しているコードがFileOwnerでは必要です。initと書かれている部分は２箇所ありますが、overrideと書かれた部分はデフォルトの初期化、最初に生成する部分です。requiredと書かれた部分はinitを使用する場合に必要になります。最初に生成する場合に何をしたいかでinitの効果が決まります。
余白を調整したい場合はこのコードを追加します。 layout.minimumInteritemSpacing = 0 layout.minimumLineSpacing = 0
このプログラムは全デバイスに対応します。
SampleCollectionCellは１マス単位のデザインを管理するクラスです。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について記載させていただきました。後ほど、追記するかもしれません。なるべくシンプルに記載しようとしましたが、言葉にすると長くなってしまいました。
以上、貴重なお時間お読み下さいまして、誠にありがとうございます。