未分類

collectionViewの基本的な使い方

投稿日:

1.collectionViewを画面一杯に配置する。CellのIdentifierに任意の名前「Cell」とつける。

2.プロトコルを追加し、デリゲートの設定をする。

class ViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

UICollectionViewDelegateFlowLayoutはレイアウトに関するものなので、レイアウト調整をしたい時に使う。必須ではない。

デリゲートの設定をする。
CollectionViewにマウスを合わせて、ViewControllerの黄色い丸までcontrolキーを押しながらドラックアンドドロップ。
「dataSource」と「delegate」を設定する。
コードで設定することもできる。

3.必須のメソッドを書く

以下の必須のメソッド2つを書く。

 //セルの数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 35
    }
    
    //セルの情報を入れる
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //表示するセルの登録
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .blue //セルの色
        
        return cell
    }

4.レイアウトの調整をする

あとは適宜レイアウトの調整。

・セクションを追加

セクションを2つにして、セクションごとにセル数を変えてみた。

//セルの数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return 7
        } else {
            return 35
        }
    }
    
    //セルの情報を入れる
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //表示するセルの登録
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .blue //セルの色
        
        return cell
    }

・セクションやセルのレイアウトを変更

セクションのマージンを上下左右30にした。
セル同士の距離はデフォルとで10pxとなっている。1pxに変えた。
またセクションごとにセルの数を変えた。

    override func viewDidLoad() {
        super.viewDidLoad()
        //レイアウトを調整
        let layout = UICollectionViewFlowLayout()
        //セクション間の距離
        layout.sectionInset = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)
        //セル同士の列の距離(最小値)
        layout.minimumInteritemSpacing = 1
        //セル同士の行の距離(最小値)
        layout.minimumLineSpacing = 1
        collectionView.collectionViewLayout = layout
    }

    //セルの数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return 7
        } else {
            return 35
        }
    }

・境界線、特定のセルの色を変える

//セルの情報を入れる
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //表示するセルの登録
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .white //セルの色
        //2つ目のセルの色のみ変更
        if indexPath.row == 1 {
            cell.backgroundColor = .systemPink
        }
        //境界線
        cell.layer.borderColor = UIColor.systemPink.cgColor
        cell.layer.borderWidth = 1
        
        return cell
    }

全てのコード

import UIKit

class ViewController: UIViewController,UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    @IBOutlet weak var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //レイアウトを調整
        let layout = UICollectionViewFlowLayout()
        //セクション間の距離
        layout.sectionInset = UIEdgeInsets(top: 30, left: 30, bottom: 30, right: 30)
        //セル同士の列の距離(最小値)
        layout.minimumInteritemSpacing = 1
        //セル同士の行の距離(最小値)
        layout.minimumLineSpacing = 1
        collectionView.collectionViewLayout = layout
    }
    
    //セクションの数
    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 2
    }
    
    //セルの数
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        if section == 0 {
            return 7
        } else {
            return 35
        }
    }
    
    //セルの情報を入れる
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        //表示するセルの登録
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath)
        cell.backgroundColor = .white //セルの色
        //2つ目のセルの色のみ変更
        if indexPath.row == 1 {
            cell.backgroundColor = .systemPink
        }
        //境界線
        cell.layer.borderColor = UIColor.systemPink.cgColor
        cell.layer.borderWidth = 1
        
        return cell
    }
    
    //セルの大きさ・隙間を調整する関数
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let width = UIScreen.main.bounds.width / 7 - 1.5
        let height = width * 1.5
        
        return CGSize(width: width, height: height)
    }
}

参考:https://rara-world.com/swift-collection-view-programming/

https://qiita.com/takehilo/items/d0e56f88a42fb8ed1185

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

PremiereProの音量調整について

声→-5db BGM→-15db~-24db SE→-5db くらいに調整できているとバランスが良いと言えます。 基本BGMやSEは音声サイトからダウンロードしてくる場合が多いと思います。 その場合は …

no image

配列の作り方

配列の作り方 ・宣言する var abcdBox = [String]() ・宣言時に配列の要素を入れておく var abcdBox = [“a”,”b”,”c”,”d”] ・要素を1つだけ追加する …

画像を挿入して、位置や大きさを調整する方法

プロジェクトパネルに読み込む ↓ シーケンスに持っていってクリップを作成 ↓ そのクリップを選択した状態でエフェクトコントロールを開くと、位置や大きさが調整できる。(fxがつく) ※なぜか直接動かせな …

no image

date(byAdding:to:options:)で日付を操作する

date(byAdding:to:options:) 指定された日付に、指定された要素を追加して、新たな日付を返す。 とある日付に任意の日数分足した日付を求められる。 import Foundatio …

no image

datePickerModeでdatePickerの表示を変更する

datePickerModeプロパティを使うことで、datePickerの表記を変更することができる。 UIDatePicker.Mode.dateで設定する。 dateのところは、date,time …