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

Posted 2021-04-08

我正在创建一个使用集合视图的页面。布局将类似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)

        }

    }

答案

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

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

另一答案

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

填充值应该是所有三个空格的添加（左，中，右）让我们假设填充值= 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) 
}

当然它会起作用