iOS：自适应集合视图单元格宽度

Posted 2023-03-14

【中文标题】iOS：自适应集合视图单元格宽度

【英文标题】：iOS : Adaptive Collection View cell width

【发布时间】：2014-12-23 14:58:27

【问题描述】：

我正在尝试在 ios 上制作具有自适应列宽的网格视图。 在 android 上，可以通过将 stretchMode 属性设置为 spacingWidth 来做到这一点。 此属性将单元格宽度作为最小宽度，如果有可用空间但不足以添加另一列以保持列之间的相同空间，则自动增长单元格。

我没有在 iOS 上找到任何方法。

在 iPhone 6 上看起来像那样（左图），但在 iPhone 5（右图）上，空间又大又丑。我不想自动调整单元格大小以避免这个大空间。

我如何在 iOS 上做到这一点？

（我使用的是 Xcode 6.1）

谢谢

编辑： 这就是我为什么不这样做的原因（黑色空间大约是需要额外的单元格宽度，抱歉我的画很丑我很快就做到了）

编辑 2：

我试图用这段代码计算新的大小，但结果是“奇怪的”（错误的大小、位置），我想我错过了什么

    let CELL_SIZE : Float = 92
    let CELL_MARGIN : Float = 10
    let COLLECTION_VIEW_MARGIN : Float = 20 //Left right margin
    let screenWidth = Float(UIScreen.mainScreen().bounds.width)
    let numberOfCell =  Float(Int(screenWidth / (CELL_SIZE + CELL_MARGIN + COLLECTION_VIEW_MARGIN)))

    let oldCellSize = Float(cell.frame.width)
    var newCellSize : Float
    if(numberOfCell >= 2)
        newCellSize = (screenWidth / numberOfCell) - (CELL_MARGIN * (numberOfCell-1))
     else 
        newCellSize = (screenWidth / numberOfCell)        

    let indexPathRow = Float(indexPath.row)

    var xOffsetMultiplier = indexPathRow % numberOfCell
    if(xOffsetMultiplier == 0)
        xOffsetMultiplier = numberOfCell
    

    var newX : Float = 0
    if(xOffsetMultiplier == 1)
        newX = COLLECTION_VIEW_MARGIN / 2
     else 
        newX = (newCellSize + CELL_MARGIN) * (xOffsetMultiplier-1) + (COLLECTION_VIEW_MARGIN / 2)
    

    var frame = CGRectMake(CGFloat(newX), cell.frame.minY, CGFloat(newCellSize), cell.frame.height)

    cell.frame = frame

这段代码写在我的 ViewController 中的func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell

【问题讨论】：

根据屏幕大小设置单元格宽度。

如果我这样做，我认为它只会显示一列，是真的吗？我用更多关于我需要什么的信息编辑了我的问题

如果屏幕尺寸 320 设置项目尺寸 154*154。 4 边距 + 154 项目 + 4 边距 + 154 项目 + 4 边距 = 320。如果屏幕尺寸 400 设置项目尺寸 120*120 边距变为 10。这是示例 ;)

我尝试以编程方式执行此操作（已编辑问题），但我不知道如何计算

【参考方案1】：

您应该使用UICollectionViewFlowLayout 根据集合视图大小采用单元格大小。

【讨论】：

你有样品吗？在 Interface Builder 中，Layout 属性设置为 flow，我不确定是不是这样，我不明白如何配置它来自动调整单元格宽度