まずlazy varで2種類のCollectionViewを定義
lazy var collectionView1 : UICollectionView = {
let layout = UICollectionViewFlowLayout()
let collectionView = UICollectionView(
frame: self.view.bounds,
collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.hex(string: "#eeeeee", alpha: 1)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "cellId")
self.cellidentifier = "cellId1"
return collectionView
}()
lazy var collectionView2 : UICollectionView = {
let layout = UICollectionViewFlowLayout()
let collectionView = UICollectionView(
frame: self.view.bounds,
collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.hex(string: "#eeeeee", alpha: 1)
collectionView.delegate = self
collectionView.dataSource = self
collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "cellId2")
self.cellidentifier = "cellId2"
return collectionView2
}()
次にアイテムの個数や表示内容、タッチ時の処理collectionViewの設定を設定します。
// 表示するアイテムの数
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if collectionView == self.collectionView2 {
//collectionView2で設定したいアイテム数
self.array_count = array2.count
}
else{
//collectionView1で設定したいアイテム数
self.array_count = array1.count
}
return self.array_count
}
// アイテムの大きさ
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let size = self.view.frame.width / 3.5
return CGSize(width: size, height: size)
}
// 上下左右の余白設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let inset = (self.view.frame.width / 4) / 8
return UIEdgeInsets(top: inset, left: inset, bottom: inset, right: inset)
}
// 余白の最小値を設定
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return (self.view.frame.width / 4) / 6
}
// アイテムの表示内容(UICollectionViewDataSource が必要)
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if collectionView == self.collectionView2 {
let cellA = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId2", for: indexPath) as! CollectionViewCell
cellA.backgroundColor = UIColor.lightGray
let item = array1[indexPath.row]
cellA.setUpContents(item)
//他のファイルで設定したカスタムセルを呼び出す
return cellA
}
else {
let cellB = collectionView.dequeueReusableCell(withReuseIdentifier: "cellId1", for: indexPath) as! CollectionViewCell
cellB.backgroundColor = UIColor.lightGray
let item = array2[indexPath.row]
cellB.setUpContents(item)
//他のファイルで設定したカスタムセルを呼び出す
return cellB
}
}
// タッチ時の処理
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if collectionView == self.collectionView2 {
//collectionView2で設定したいタッチ処理
print("collectionView2 is tapped!")
}
else{
//collectionView1で設定したいタッチ処理
print("collectionView1 is tapped!")
}
}
関数内の処理をif文で分けるのがポイント
参考記事:How can I add multiple collection views in a UIViewController in Swift?
Swiftのお役立ち情報