How to change UICollectionViewCell initial layout position?

Question

Background

So, I'm working on a custom framework, and I've implemented a custom UICollectionViewFlowLayout for my UICollectionView. The implementation allows you to scroll through the card stack while also swiping cards (cells) to the left/right (Tinder + Shazam Discover combo).

I'm modifying the UICollectionViewLayoutAttributes to create a scrolling card stack effect.

The Problem

At the end of the stack, when I swipe away a card (cell), the new cards don't appear from behind the stack, but from the top instead. This only happens at the end of the stack, and I have no idea why.

What I think - What I've tried

My guess is that I need to modify some things in the initialLayoutAttributesForAppearingItem, and I've tried that, but it doesn't seem to do anything.

I'm currently calling the updateCellAttributes function inside it to update the attributes, but I've also tried manually modifying the attributes inside of it. I'm really not seeing the issue here, unless there's a different way to modify how a card is positioned for this case.

Could it perhaps be that because the cells are technically not in the "rect" yet (see layoutAttributesForElements(in rect: CGRect)), they are not updated?

Is there anything I'm missing? Is anyone more familiar with how I can modify the flowlayout to achieve my desired behaviour?

Examples and code

Here's a gif of it in action:

Here's a gif of the bug I'm trying to solve:

As you can see, when swiping away the last card, the new card appears from the top, while it should appear from behind the previous card instead.

Below you can find the custom UICollectionViewFlowLayout code. The most important function is the updateCellAttributes one, which is well documented with inline comments (see code below). This function is called from:
initialLayoutAttributesForAppearingItem
finalLayoutAttributesForDisappearingItem
layoutAttributesForItem
layoutAttributesForElements
To modify the layout info and create the stack effect.

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 (instant download)

Github repo

Github issue

If you have any further questions I'd gladly answer them. Thank you for your time and effort, your help would be deeply appreciated!

Answer 1

It seems that after removing last cell we got two animations happens simultaneously. Content offet (because of content size change) changes with animation and new last cell goes to its new position. But new visible cell already at its position. Its a pity but I dont see the quick way to fix this.

Answer 2

First of all you should understand that super.layoutAttributesForElements(in: rect) will return only cells which are visible in standard FlowLayout. Thats why you can see how card under top card disappears when you bounce UICollectionView on bottom. Thats why you should manage attributes on your own. I mean copy all attributes in prepare() or even create them. Another problem was described by @team-orange. He is correct UIKit's animation classes handle this as simple animation and in your logic you calculate cell's positions based on current contentOffset which is already changed in animation block. I'm not sure what you can really do here, maybe you can implement it on your side by settings updated attributes for all cells, but even with isHidden = true it will decrease performance.

<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}>