我的目标是在UICollectionView中具有动态大小的单元格。另外,当contentWidth的可滚动UICollectionView小于Collection的bounds时,我希望项目在集合内居中。

ios - 如何在具有动态大小的单元格的UICollectionViewFlowLayout子类上正确设置节插图-LMLPHP

到目前为止的方法:

我正在尝试以最干净的方式做到这一点。我有自动调整大小的UICollectionViewCells,其中“自动布局”可以根据内容的约束确定单元格的大小。为此,我的单元将覆盖preferredLayoutAttributesFitting函数,并为其内容返回适当的宽度。

我的自定义UICollectionViewFlowLayout子类使用此宽度信息,该宽度信息由UICollectionViewCell提供,以正确调整单元格的大小。

在我的自定义UICollectionViewFlowLayout上唯一覆盖的方法是:


layoutAttributesForItem(at...)
layoutAttributesForElementsIn(rect...)
shouldInvalidateLayout(forBoundsChange...)


UICollectionViewCells的动态大小调整可完美工作。

问题:

使用这种方法,我对每个像元的大小没有先验知识(每个像元可以不同)。我想实现UICollectionViewdelegate方法,以提供一个插图来将我的内容置于收藏夹视图的中心。为此,我认为我应该实现并覆盖

collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets


问题在于这样一个事实,即在布局过程的早期就调用了inset方法,而我不知道将在布局过程中确定的contentSize

这是各种布局方法的堆栈,按它们运行的​​顺序对一个完整的布局通道进行了处理:

prepare started
prepare finished
layoutAttributesForElementsInRect started
layoutAttributesForElementsInRect finished
layoutAttributesForElementsInRect started
layoutAttributesForElementsInRect finished
layoutAttributesForElementsInRect started
layoutAttributesForElementsInRect finished
prepare started
insetForSectionAt 0 called <--- The datasource has knowledge of the presence of cells but the cells themselves are not yet dequeued
prepare finished
layoutAttributesForElementsInRect started
layoutAttributesForItemAt [0, 0] started
layoutAttributesForItemAt [0, 0] finished
layoutAttributesForItemAt [0, 1] started
layoutAttributesForItemAt [0, 1] finished
layoutAttributesForItemAt [0, 2] started
layoutAttributesForItemAt [0, 2] finished
layoutAttributesForElementsInRect finished
layoutAttributesForElementsInRect started
layoutAttributesForItemAt [0, 0] started
layoutAttributesForItemAt [0, 0] finished
layoutAttributesForItemAt [0, 1] started
layoutAttributesForItemAt [0, 1] finished
layoutAttributesForItemAt [0, 2] started
layoutAttributesForItemAt [0, 2] finished
layoutAttributesForElementsInRect finished
prepare started
prepare finished
layoutAttributesForElementsInRect started
<--- At this point Cells DO return valid sizes through Autolayout
layoutAttributesForItemAt [0, 0] started
layoutAttributesForItemAt [0, 0] finished
layoutAttributesForItemAt [0, 1] started
layoutAttributesForItemAt [0, 1] finished
layoutAttributesForItemAt [0, 2] started
layoutAttributesForItemAt [0, 2] finished
layoutAttributesForElementsInRect finished


对于一次布局传递,将对各种布局方法进行多次调用,但是直到最后,才可以从不同单元获得来自自动布局的尺寸信息,以传递到布局。

我注意到sectionInset委托函数在单元已正确出队并允许运行其Autolayout约束之前被提前调用。因此,无法在调用时将正确的值告知插图。

使用这种方法,是否可以在布局通过后强制调用重新计算sectionInsetAt还是应该完全改变该技术?

我尝试过的事情:

我尝试从collectionViewLayout委托函数中查询collectionViewContentSizeinsetForSectionAt。不幸的是,由于当前正在进行布局,因此无法在布局过程中使用。它导致崩溃并显示错误:

[CollectionView] An attempt to update layout information was detected while already in the process of computing the layout (i.e. reentrant call). This will result in unexpected behaviour or a crash. This may happen if a layout pass is triggered while calling out to a delegate. UICollectionViewFlowLayout instance is (<App.ViewportToolbarFlowLayout: 0x7f8a5261add0>)


我尝试使用collectionViewcontentSize方法在执行insetForSectionAt委托方法的过程中获取大小,但是在布局过程中运行时,它无法提供正确的数据。

最佳答案

在这里发布答案。我发现Alex Koshy的this answer对我有很大帮助。

基本上,必须在layoutAttributesForElementsIn(rect...)中执行该工作,因为它是唯一可获得完整版式图片的地方。我已经修改了Alex的代码以处理水平和垂直UICollectionViews(这可能不是每个人都想要的,但正是我所需要的)。我使用布局的scrollDirection属性来确定元素是水平居中(当scrollDirection.horizontal时)还是垂直居中(当scrollDirection.vertical时)。

这是代码:

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    guard let collectionView = collectionView else { return nil }

    guard let superLayoutAttributes = super.layoutAttributesForElements(in: rect) else { return nil }
    let computedAttributes = superLayoutAttributes.compactMap { layoutAttribute -> UICollectionViewLayoutAttributes? in
        return layoutAttribute.representedElementCategory == .cell ? layoutAttributesForItem(at: layoutAttribute.indexPath) : layoutAttribute
    }
    guard let attributes = NSArray(array: computedAttributes, copyItems: true) as? [UICollectionViewLayoutAttributes] else { return nil }

    let interItemSpacing = minimumInteritemSpacing

    switch scrollDirection {
    case .horizontal:
        let leftPadding: CGFloat = self.sectionInset.left
        var leftMargin: CGFloat = leftPadding // Modified to determine origin.x for each item
        var maxY: CGFloat = -1.0 // Modified to determine origin.y for each item
        var rowSizes: [[CGFloat]] = [] // Tracks the starting and ending x-values for the first and last item in the row
        var currentRow: Int = 0 // Tracks the current row
        attributes.forEach { layoutAttribute in
            // Each layoutAttribute represents its own item
            if layoutAttribute.frame.origin.y >= maxY {

                // This layoutAttribute represents the left-most item in the row
                leftMargin = leftPadding

                currentRow += rowSizes.isEmpty ? 0 : 1
                // Register its origin.x in rowSizes for use later
                rowSizes.append([leftMargin, 0])
            }
            layoutAttribute.frame.origin.x = leftMargin
            leftMargin += layoutAttribute.frame.width + interItemSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
            // Add right-most x value for last item in the row
            rowSizes[currentRow][1] = leftMargin - interItemSpacing
        }
        // At this point, all cells are left aligned
        // Reset tracking values and add extra left padding to center align entire row
        leftMargin = leftPadding
        maxY = -1.0
        currentRow = 0
        attributes.forEach { (layoutAttribute) in
            if layoutAttribute.frame.origin.y >= maxY {

                // This layoutAttribute represents the left-most item in the row
                leftMargin = leftPadding

                // Need to bump it up by an appended margin
                let rowWidth = rowSizes[currentRow][1] - rowSizes[currentRow][0] // last.x - first.x
                let appendedMargin = (collectionView.frame.width - leftPadding  - rowWidth - leftPadding) / 2
                leftMargin += appendedMargin

                currentRow += 1
            }

            layoutAttribute.frame.origin.x = leftMargin

            leftMargin += layoutAttribute.frame.width + interItemSpacing
            maxY = max(layoutAttribute.frame.maxY, maxY)
        }

    case .vertical:
        let topPadding: CGFloat = self.sectionInset.top
        var topMargin: CGFloat = topPadding
        var maxX: CGFloat = -1.0 // Modified to determine origine.x for each item
        var colSizes: [[CGFloat]] = [] // Tracks the starting and ending y-values for the first and last item in the column
        var currentCol: Int = 0
        attributes.forEach { (layoutAttribute) in
            if layoutAttribute.frame.origin.x >= maxX {
                topMargin = topPadding

                currentCol += colSizes.isEmpty ? 0 : 1
                colSizes.append([topMargin, 0])
            }

            layoutAttribute.frame.origin.y = topMargin
            topMargin += layoutAttribute.frame.height + interItemSpacing
            maxX = max(layoutAttribute.frame.maxX, maxX)
            colSizes[currentCol][1] = topMargin - interItemSpacing
        }
        topMargin = topPadding
        maxX = -1.0
        currentCol = 0
        attributes.forEach { (layoutAttribute) in
            if layoutAttribute.frame.origin.x >= maxX {

                topMargin = topPadding

                let colWidth = colSizes[currentCol][1] - colSizes[currentCol][0]
                let appendedMargin = (collectionView.frame.height - topPadding - colWidth - topPadding) / 2
                topMargin += appendedMargin

                currentCol += 1
            }

            layoutAttribute.frame.origin.y = topMargin

            topMargin += layoutAttribute.frame.height + interItemSpacing
            maxX = max(layoutAttribute.frame.maxX, maxX)
        }
    }

    return attributes
}

10-07 19:51
查看更多