为集合视图单元格设置自动布局宽度和高度约束的最佳实践？答案

【问题标题】：Best practices for setting autolayout width and height constraints for a collection view cell?为集合视图单元格设置自动布局宽度和高度约束的最佳实践？
【发布时间】：2015-02-05 11:25:36
【问题描述】：

我正在设计一个用 swift 构建的 ios 8 应用程序的 UI。我有自动布局和约束的中级知识。这是我的情况：我有一个自定义集合视图控制器和集合视图单元。我想在界面生成器中使用“等宽”和“等高”约束来设置单元格相对于父视图的乘数的宽度和高度——而不是使用固有的高度/宽度属性，例如 320 x 94.

这是我尝试过的

在 IB 中使用固有宽度和高度作为尺寸等级。（这不起作用）
从 UICollectionViewCell 到 CollectionView 的 Control-Dragging（不起作用，因为“等高”和“等宽”甚至不是约束选项）

我应该满足于固有的高度和宽度，并假设 CollectionViewFlowLayout 会照顾我还是有办法以编程方式做到这一点？

谢谢。亚历克斯

【问题讨论】：

没有人知道这个问题的答案。制作集合视图非常烦人，并且您无法观看正在编辑的内容的预览。

标签： ios swift uicollectionview autolayout uicollectionviewcell

【解决方案1】：

单元格的布局和大小由 collectionView 的 collectionViewLayout 属性完成。使用 UICollectionViewFlowLayout 类的 collectionViewLayout，您可以使用 item size 属性设置固定大小：

(collectionView.collectionViewLayout as? UICollectionViewFlowLayout)?.itemSize = 100 //set fixed size here

或使用委托方法设置可变大小：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // determine variable size here using indexPath value
}

【讨论】：

【解决方案2】：

使用UICollectionViewDelegateFlowLayout 方法调整单元格大小

例如，如果您希望在视图宽度上显示 3 个单元格

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
    let width = CGRectGetWidth(collectionView.bounds)
    let hcount = 3
    let gapcount = CGFloat(hcount) + 1
    //this should be a class var/constant which you can feed into the minimumLineSpacingForSectionAtIndex delegate
    let gap = 10 
    let kwidth = width - gap
    let keywidth = kwidth/CGFloat(hcount)

    return CGSize(width:keywidth,height:50)
}

您可以调整单元格之间的距离

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat

边缘插入

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets

【讨论】：