如何正确对齐这些 collectionview 单元格？

Posted 2023-03-14

【中文标题】如何正确对齐这些 collectionview 单元格？

【英文标题】：How to align these collectionview cells properly?

【发布时间】：2018-09-06 18:45:29

【问题描述】：

我正在创建一个使用集合视图的页面。布局将类似于 Apple 的音乐应用程序，其中每行显示两个方形单元格

I want a layout like this-this layout has super equal margins around but in my app the first collection cell is stuck to the left edge and the 2nd cell is stuck to the right edge

    private let cellReuseIdentifier = "cellReuseIdentifier"

    class FeedViewController: UICollectionViewController 

        override func viewDidLoad() 
            super.viewDidLoad()
            collectionView?.backgroundColor = .white
            setupNavBar()
            setupCollectionView()
        

        func setupCollectionView() 
            collectionView?.register(FeedCollectionViewCell.self, forCellWithReuseIdentifier: cellReuseIdentifier)
        

        override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
            return 6
        

        override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellReuseIdentifier, for: indexPath)
            return cell
        

    

    extension FeedViewController: UICollectionViewDelegateFlowLayout 

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
            let padding: CGFloat =  25
            let collectionViewSize = collectionView.frame.size.width - padding

            return CGSize(width: collectionViewSize/2, height: collectionViewSize/2)

        

    

【参考方案1】：

您可以在集合视图设置函数中使用布局属性来设置集合视图插图和单元格之间所需的空间：

guard let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else  return 

layout.sectionInset = UIEdgeInsets(top: yourTopValue, left: yourLeftValue, bottom: yourBottomValue, right: yourRightValue)
layout.minimumInteritemSpacing = yourSpacing
layout.minimumLineSpacing = yourSpacing

【参考方案2】：

使用以下代码来满足您的需求。

填充值应该是所有三个空格（左、中、右）的加法 让我们假设 padding value = 25 那么它应该在布局计算中考虑 75 以获得精确的间距。

并将左、上、中、右空间设置为 25（因为你想在那里添加空间）。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 
    let cellWidth: CGFloat = (collectionView.frame.size.width / 2) - ((padding value * 3)/2)
    let cellHeight: CGFloat = (collectionView.frame.size.height / 2)  - ((padding value * 3)/2) 
    return CGSize.init(width: cellWidth, height: cellHeight) 

肯定会起作用的