未分類

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

DateFormatterの使い方

Date型の日付を文字列にして表示する。 let date = Date() import Foundation //フォーマットを指定 let formatter = DateFormatter() …

no image

見やすい字幕のコツ

話しているそのままを文字起こしするのではなく、適宜読みやすいように変えて字幕を入れる。 ※正しい言葉に書き換えすぎるのもその人の個性や親しみがなくなるので、全て直そうとしなくてよい。より自然にわかりや …

テキストアニメーションでMVを作る

  テキストのモーショングラフィックを使ってMVを作った。 いろいろなテキストの表示を試してみた。 ・RGBずらし ・グリッチ ・ヌルとカメラを使って全体を動かす ●参考動画:

プレミアプロ講座基礎編1_エフェクト(新規作成時の設定)

新規プロジェクト作成時の設定 プロジェクトを保存する場所を指定 プロジェクトや書き出しを行った時に保存されるフォルダを指定する。 ここを指定すると、オートセーブされるデータのファイルなども全てこのファ …