このプロジェクトは、Xcode 10およびSwift 4.2でテストされています。
新しいプロジェクトを作成する
単一のビューアプリにすることもできます。
コードを追加する
新しいCocoa Touch Classファイルを作成します([ファイル]> [新規]> [ファイル...]> [iOS]> [Cocoa Touch Class])。名前を付けMyCollectionViewCell
ます。このクラスは、ストーリーボードのセルに追加するビューのアウトレットを保持します。
import UIKit
class MyCollectionViewCell: UICollectionViewCell {
@IBOutlet weak var myLabel: UILabel!
}
このコンセントは後で接続します。
ViewController.swiftを開き、次のコンテンツがあることを確認します。
import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {
let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]
// MARK: - UICollectionViewDataSource protocol
// tell the collection view how many cells to make
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return self.items.count
}
// make a cell for each cell index path
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
// get a reference to our storyboard cell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell
// Use the outlet in our custom class to get a reference to the UILabel in the cell
cell.myLabel.text = self.items[indexPath.item]
cell.backgroundColor = UIColor.cyan // make cell more visible in our example project
return cell
}
// MARK: - UICollectionViewDelegate protocol
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
// handle tap events
print("You selected cell #\(indexPath.item)!")
}
}
ノート
UICollectionViewDataSource
そして、UICollectionViewDelegate
コレクションビューは、以下のプロトコルがあります。UICollectionViewFlowLayout
プログラムでビューのサイズを変更するプロトコルを追加することもできますが、必須ではありません。
- 単純な文字列をグリッドに配置しているだけですが、後で画像を作成することもできます。
ストーリーボードを設定する
コレクションビューをストーリーボードのビューコントローラーにドラッグします。必要に応じて、制約を追加して、親ビューを満たすようにすることができます。
属性インスペクタのデフォルトも確認してください
コレクションビューの左上にある小さなボックスは、コレクションビューセルです。これをプロトタイプセルとして使用します。ラベルをセルにドラッグして中央に配置します。必要に応じて、セルの境界線のサイズを変更し、ラベルを中央に配置する制約を追加できます。
コレクションビューセルの属性インスペクタの[識別子]ボックスに「引用符なしで」「セル」と書き込みます。これはlet reuseIdentifier = "cell"
ViewController.swift と同じ値であることに注意してください。
そして、セルのIDインスペクターで、クラス名をMyCollectionViewCell
、作成したカスタムクラスに設定します。
コンセントを接続します
- 収集セルにラベルをフック
myLabel
でMyCollectionViewCell
クラス。(Ctrlキーを押しながらドラッグできます)。
- コレクションビュー
delegate
とdataSource
ビューコントローラーをフックします。(ドキュメントアウトラインでコレクションビューを右クリックします。次に、プラス矢印をクリックしてビューコントローラーまでドラッグします。)
完成した
セルのラベルを中央に配置するための制約を追加し、コレクションビューを親の壁に固定した後の様子を次に示します。
改善する
上記の例は機能しますが、かなり醜いです。ここであなたが遊ぶことができるいくつかのものがあります:
背景色
インターフェイスビルダーで、コレクションビュー>属性インスペクター>ビュー>背景に移動します。
セル間隔
セル間の最小間隔を小さい値に変更すると、見栄えがよくなります。インターフェイスビルダーで、コレクションビュー>サイズインスペクター>最小間隔に移動し、値を小さくします。「セルの場合」は水平距離で、「線の場合」は垂直距離です。
セル形状
丸みを帯びた角や境界線などが必要な場合は、セルをいじってみましょうlayer
。ここにいくつかのサンプルコードがあります。cell.backgroundColor = UIColor.cyan
上記のコードの直後に配置します。
cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8
レイヤーで実行できる他のこと(たとえば、影)については、この回答を参照してください。
タップすると色が変わる
セルがタップに視覚的に反応する場合、ユーザーエクスペリエンスが向上します。これを達成する1つの方法は、セルがタッチされている間に背景色を変更することです。これを行うには、次の2つのメソッドをViewController
クラスに追加します。
// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.red
}
// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath)
cell?.backgroundColor = UIColor.cyan
}
更新された外観は次のとおりです。
さらなる研究
このQ&AのUITableViewバージョン