如何更改 UICollectionViewCell 初始布局位置？

Question

背景

所以，我正在开发一个自定义框架，并且我为我的UICollectionView 实现了一个自定义UICollectionViewFlowLayout。 该实现允许您滚动卡片堆栈，同时向左/向右滑动卡片（单元格）（Tinder + Shazam Discover 组合）。

我正在修改UICollectionViewLayoutAttributes 以创建滚动卡片堆栈效果。

问题

在堆栈的末尾，当我刷掉一张卡片（单元格）时，新卡片不会从堆栈后面出现，而是从顶部出现。这只会发生在堆栈的末尾，我不知道为什么。

我的想法 - 我的尝试

我的猜测是我需要修改initialLayoutAttributesForAppearingItem中的一些东西，我已经尝试过了，但它似乎没有任何作用。

我目前正在调用其中的updateCellAttributes 函数来更新属性，但我也尝试过手动修改其中的属性。我真的没有看到这里的问题，除非有一种不同的方法来修改这种情况下卡片的定位方式。

可能是因为从技术上讲，这些单元格还没有在“矩形”中（请参阅layoutAttributesForElements(in rect: CGRect)），因此它们没有更新？

我有什么遗漏吗？ 有没有人更熟悉我如何修改流程布局以实现我想要的行为？

示例和代码

这是它的 GIF 动图：

这是我正在尝试解决的错误的 gif 图像：

如你所见，当刷掉最后一张卡片时，新卡片从顶部出现，而它应该从前一张卡片的后面出现。

您可以在下面找到自定义UICollectionViewFlowLayout 代码。 最重要的功能是updateCellAttributes一个， 内联 cmets 有很好的记录（请参见下面的代码）。 此函数调用自：
initialLayoutAttributesForAppearingItem
finalLayoutAttributesForDisappearingItem
layoutAttributesForItem
layoutAttributesForElements
修改布局信息并创建堆栈效果。

import UIKit

/// Custom `UICollectionViewFlowLayout` that provides the flowlayout information like paging and `CardCell` movements.
internal class VerticalCardSwiperFlowLayout: UICollectionViewFlowLayout {

    /// This property sets the amount of scaling for the first item.
    internal var firstItemTransform: CGFloat?
    /// This property enables paging per card. Default is true.
    internal var isPagingEnabled: Bool = true
    /// Stores the height of a CardCell.
    internal var cellHeight: CGFloat!
    /// Allows you to make the previous card visible or not visible (stack effect). Default is `true`.
    internal var isPreviousCardVisible: Bool = true

    internal override func prepare() {
        super.prepare()

        assert(collectionView?.numberOfSections == 1, "Number of sections should always be 1.")
        assert(collectionView?.isPagingEnabled == false, "Paging on the collectionview itself should never be enabled. To enable cell paging, use the isPagingEnabled property of the VerticalCardSwiperFlowLayout instead.")
    }

    internal override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        let items = NSArray(array: super.layoutAttributesForElements(in: rect)!, copyItems: true)

        for object in items {
            if let attributes = object as? UICollectionViewLayoutAttributes {
                self.updateCellAttributes(attributes)
            }
        }
        return items as? [UICollectionViewLayoutAttributes]
    }

    internal override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {

        if self.collectionView?.numberOfItems(inSection: 0) == 0 { return nil }

        if let attr = super.layoutAttributesForItem(at: indexPath)?.copy() as? UICollectionViewLayoutAttributes {
            self.updateCellAttributes(attr)
            return attr
        }
        return nil
    }

    internal override func finalLayoutAttributesForDisappearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        // attributes for swiping card away
        return self.layoutAttributesForItem(at: itemIndexPath)
    }

    internal override func initialLayoutAttributesForAppearingItem(at itemIndexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        // attributes for adding card
        return self.layoutAttributesForItem(at: itemIndexPath)
    }

    // We invalidate the layout when a "bounds change" happens, for example when we scale the top cell. This forces a layout update on the flowlayout.
    internal override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }

    // Cell paging
    internal override func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {

        // If the property `isPagingEnabled` is set to false, we don't enable paging and thus return the current contentoffset.
        guard let collectionView = self.collectionView, isPagingEnabled else {
            let latestOffset = super.targetContentOffset(forProposedContentOffset: proposedContentOffset, withScrollingVelocity: velocity)
            return latestOffset
        }

        // Page height used for estimating and calculating paging.
        let pageHeight = cellHeight + self.minimumLineSpacing

        // Make an estimation of the current page position.
        let approximatePage = collectionView.contentOffset.y/pageHeight

        // Determine the current page based on velocity.
        let currentPage = (velocity.y < 0.0) ? floor(approximatePage) : ceil(approximatePage)

        // Create custom flickVelocity.
        let flickVelocity = velocity.y * 0.4

        // Check how many pages the user flicked, if <= 1 then flickedPages should return 0.
        let flickedPages = (abs(round(flickVelocity)) <= 1) ? 0 : round(flickVelocity)

        // Calculate newVerticalOffset.
        let newVerticalOffset = ((currentPage + flickedPages) * pageHeight) - collectionView.contentInset.top

        return CGPoint(x: proposedContentOffset.x, y: newVerticalOffset)
    }

    /**
     Updates the attributes.
     Here manipulate the zIndex of the cells here, calculate the positions and do the animations.

     Below we'll briefly explain how the effect of scrolling a card to the background instead of the top is achieved.
     Keep in mind that (x,y) coords in views start from the top left (x: 0,y: 0) and increase as you go down/to the right,
     so as you go down, the y-value increases, and as you go right, the x value increases.

     The two most important variables we use to achieve this effect are cvMinY and cardMinY.
     * cvMinY (A): The top position of the collectionView + inset. On the drawings below it's marked as "A".
     This position never changes (the value of the variable does, but the position is always at the top where "A" is marked).
     * cardMinY (B): The top position of each card. On the drawings below it's marked as "B". As the user scrolls a card,
     this position changes with the card position (as it's the top of the card).
     When the card is moving down, this will go up, when the card is moving up, this will go down.

     We then take the max(cvMinY, cardMinY) to get the highest value of those two and set that as the origin.y of the card.
     By doing this, we ensure that the origin.y of a card never goes below cvMinY, thus preventing cards from scrolling upwards.


     +---------+   +---------+
     |         |   |         |
     | +-A=B-+ |   |  +-A-+  | ---> The top line here is the previous card
     | |     | |   | +--B--+ |      that's visible when the user starts scrolling.
     | |     | |   | |     | |
     | |     | |   | |     | |  |  As the card moves down,
     | |     | |   | |     | |  v  cardMinY ("B") goes up.
     | +-----+ |   | |     | |
     |         |   | +-----+ |
     | +--B--+ |   | +--B--+ |
     | |     | |   | |     | |
     +-+-----+-+   +-+-----+-+


     - parameter attributes: The attributes we're updating.
     */
    private func updateCellAttributes(_ attributes: UICollectionViewLayoutAttributes) {

        guard let collectionView = collectionView else { return }

        var cvMinY = collectionView.bounds.minY + collectionView.contentInset.top
        let cardMinY = attributes.frame.minY
        var origin = attributes.frame.origin
        let cardHeight = attributes.frame.height

        if cvMinY > cardMinY + cardHeight + minimumLineSpacing + collectionView.contentInset.top {
            cvMinY = 0
        }

        let finalY = max(cvMinY, cardMinY)

        let deltaY = (finalY - cardMinY) / cardHeight
        transformAttributes(attributes: attributes, deltaY: deltaY)

        // Set the attributes frame position to the values we calculated
        origin.x = collectionView.frame.width/2 - attributes.frame.width/2 - collectionView.contentInset.left
        origin.y = finalY
        attributes.frame = CGRect(origin: origin, size: attributes.frame.size)
        attributes.zIndex = attributes.indexPath.row
    }

    // Creates and applies a CGAffineTransform to the attributes to recreate the effect of the card going to the background.
    private func transformAttributes(attributes: UICollectionViewLayoutAttributes, deltaY: CGFloat) {

        if let itemTransform = firstItemTransform {

            let scale = 1 - deltaY * itemTransform
            let translationScale = CGFloat((attributes.zIndex + 1) * 10)
            var t = CGAffineTransform.identity

            t = t.scaledBy(x: scale, y: 1)
            if isPreviousCardVisible {
                t = t.translatedBy(x: 0, y: (deltaY * translationScale))
            }
            attributes.transform = t
        }
    }
}

Full project zip（即时下载）

Github repo

Github issue

如果您还有任何问题，我很乐意回答。 感谢您的时间和精力，我们将非常感谢您的帮助！

Answer 1

似乎在删除最后一个单元格后，我们得到了两个动画同时发生。内容偏移（由于内容大小的变化）随着动画的变化而变化，新的最后一个单元格进入它的新位置。但是新的可见单元已经在它的位置。很遗憾，但我没有看到解决此问题的快速方法。

Answer 2

首先您应该了解super.layoutAttributesForElements(in: rect) 将只返回标准FlowLayout 中可见的单元格。这就是为什么当您在底部弹起UICollectionView 时可以看到顶部卡片下的卡片消失的原因。这就是为什么你应该自己管理属性。我的意思是复制prepare() 中的所有属性，甚至创建它们。 @team-orange 描述了另一个问题。他是正确的 UIKit 的动画类将其作为简单的动画处理，并且在您的逻辑中，您根据动画块中已经更改的当前 contentOffset 计算单元格的位置。我不确定你在这里真正能做什么，也许你可以通过为 all 单元格设置更新属性来实现它，但即使使用isHidden = true 它也会降低性能。

<VerticalCardSwiper.VerticalCardSwiperView: 0x7f9a63810600; baseClass = UICollectionView; contentOffset: {-20, 13636}; contentSize: {374, 14320}; adjustedContentInset: {40, 20, 124, 20}>
<VerticalCardSwiper.VerticalCardSwiperView: 0x7f9a63810600; baseClass = UICollectionView; contentOffset: {-20, 12918}; contentSize: {374, 14320}; adjustedContentInset: {40, 20, 124, 20}>