等水平间距UICollectionView，包括insets - UICollectionViewFlowLayout？

Question

我尝试在屏幕边框的两个UICollectionViewCell之间和UICollectionViewCell之间创建相等的水平间距。它应该看起来像this。

我认为可以使用UICollectionViewFlowLayout来调整每个UICollectionViewCell的宽度，因此无论手机的大小如何，它们都具有相等的间距。每行应该只有3个单元格。

Answer 1

首先，您应该为控制器中的UICollectionView的所有参数添加常量：

let itemsPerRow = 3
let spaceBetweenItems: CGFloat = 20.0
let spaceBetweenLines: CGFloat = 40.0
let itemHeight: CGFloat = 50.0

您提到项目的宽度应该可调。您可以使用以下函数进行计算：

var itemWidth: CGFloat {
    return (self.collectionView.frame.width - CGFloat(self.itemsPerRow + 1) * self.spaceBetweenItems) / CGFloat(self.itemsPerRow)
}

当然，您需要自定义UICollectionView实例的布局：

var collectionViewLayout: UICollectionViewFlowLayout {
    let result = UICollectionViewFlowLayout()
    result.itemSize = CGSize(width: self.itemWidth, height: self.itemHeight)
    result.minimumInteritemSpacing = self.spaceBetweenItems
    result.minimumLineSpacing = self.spaceBetweenLines
    result.sectionInset = UIEdgeInsets(top: 0.0, left: self.spaceBetweenItems, bottom: 0.0, right: self.spaceBetweenItems)
    result.scrollDirection = .vertical
    return result
}

在函数viewDidLoad或您的控制器中，您应该调用setupCollectionView()。这是此功能的代码：

func setupCollectionView() {
    self.collectionView.frame = self.view.frame
    self.collectionView.collectionViewLayout = self.collectionViewLayout
}

您将看到类似这样的内容：