ios - 水平间距相等的 UICollectionView，包括插图 - UICollectionViewFlowLayout？

Question

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

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

Answer 1

首先，您应该将 UICollectionView 的所有参数的常量添加到 Controller :

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 或您的 Controller 中，您应该调用 setupCollectionView()。下面是这个函数的代码:

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

你会看到这样的东西: