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

Posted 2023-03-10

【中文标题】相等的水平间距UICollectionView，包括插图 - UICollectionViewFlowLayout？

【英文标题】：Equal horizontal spacing UICollectionView, including insets - UICollectionViewFlowLayout?

【发布时间】：2017-11-09 18:29:53

【问题描述】：

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

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

【参考方案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

你会看到这样的：