CollectionViewCell Sizeについて

UIcollectionViewCellを使用して画像をロードする場合、各Cell間の間隔を調整するために、いくつかの個人的な調査を行いました.
不足や間違いがある場合は、指摘してください.

この文章の目標は、上記の概念を含む簡単なCollectionViewを構築することです.🤓

Snapkit

を使用

UIcollectionViewの作成

lazy varとして宣言して初期化
UIcollectionViewFlowLayoutとしてレイアウト
UIcollectionViewCellクラスの作成と登録
DataSource,委任設定

    private lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
        collectionView.backgroundColor = .systemBackground
        collectionView.register(CollectionViewCell.self, forCellWithReuseIdentifier: "CollectionViewCell")
        collectionView.dataSource = self
        collectionView.delegate = self
        
        return collectionView
    }()

UICollectionViewCell class

final class CollectionViewCell: UICollectionViewCell {
    private let imageView = UIImageView()
    
    func setup(with image: UIImage) {
        addSubview(imageView)
        imageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        imageView.backgroundColor = .tertiaryLabel
    }
}

UICollectionView DataSource

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 12 //화면에 표시 될 cell 개수
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as? CollectionViewCell //다운캐스팅
        cell?.setup(with: UIImage())
        
        return cell ?? UICollectionViewCell()
    }
}

CollectionViewCell Sizeの設定

ここでは、U i c o l l e c t i n t i o n w DelegateFlowLayoutプロトコルを使用します.
sizeForItemAtメソッドを使用してCollection ViewCellの各サイズを決定

extension ViewController: UICollectionViewDelegateFlowLayout {
    
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        
        let width: CGFloat = (collectionView.frame.width / 3) - 0.5
        
        return CGSize(width: width, height: width)
    }
}

 let width: CGFloat = (collectionView.frame.width / 3) - 1.0

1行に3つのセルを表示するには、
3をCollectionViewフレームの幅で除算し、間隔を0.5に設定します.

viewDidLoadの追加

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(collectionView)
        collectionView.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview()
            $0.top.equalToSuperview()
            $0.bottom.equalToSuperview()
        }
    }

もしあなたがyorom corom addSubviewを作ってくれて、レイアウトもしてくれたら、今までの様子

こうなる!

layout minimumLineSpacing & minimumInteritemSpacing

以前、UIcollectionViewを使用していたときに知りました.
MinimumLineSpacing&MinimumInteritemSpacingは初めて知りました.
アップルの公式ドキュメントを通じて概念と使い方を理解してみましょう.

minimumLineSpacing

The minimum spacing to use between lines of items in the grid.
グリッド内のitemsの最小間隔を設定するには

var minimumInteritemSpacing: CGFloat { get set }

CGFloatを採用.
図から見ると.

Scroll layout垂直時の最小行間隔
セルの追加を開始すると、下の行が表示されます.
セルのサイズが異なる場合は、行と行の間の最小間隔を設定します.
Default: 10.0
そして正式な書類を見ました.
If the delegate object does not implement the collectionView(_:layout:minimumLineSpacingForSectionAt:) method,
the flow layout uses the value in this property to set the spacing between lines in a section.
CollectionViewDelegateFlowLayoutプロトコルのCollectionView(:layout:minimumLineSpacingForSectionAt:)メソッドを使用して設定していない場合.
つまり、UICOLLectionViewFlowLayoutに設定されたレイアウトからPropertyをロードして設定することができます!

minimumLineSpacing

The minimum spacing to use between items in the same row.
同じ行のアイテム間の最小間隔を設定

var minimumInteritemSpacing: CGFloat { get set }

同じくCGFloatを採用

セルの左右の間隔の最小間隔を設定します.
If the delegate does not implement the
collectionView(_:layout:minimumInteritemSpacingForSectionAt:) method,
the flow layout object uses the value of this property to set the spacing between items in the same line.
上記2つの製品を実際に適用すると、

    private lazy var collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 0.5
        layout.minimumInteritemSpacing = 0.5
        
		//...중략...		
        
        return collectionView
    }()

このようにUIcollection ViewFlowLayoutを発表する部分では、前の2つの方法で使用しなかったflow layout object layoutをpropertyを使用するように設定できます!

完成の様子

なぜベルの画像サイズを調整できないのか-s;