UICollectionView contentOffset after device rotation

Question

What I am trying to do:

On Apple's Photo's App, if you rotate device while scroll to an arbitrary offset, same cell that was in the center beforehand would end up in the center after the rotation.

I am trying to achieve the same behavior with UICollectionView. 'indexPathsForVisibleItems' seem to be the way to do it....

What I got so far:

Following code provides smooth operation between rotates, yet the center item calculation seem to be off:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)

    self.collectionView?.collectionViewLayout.invalidateLayout()

    let middleItem = (self.collectionView?.indexPathsForVisibleItems.count / 2) - 1
    let indexPath = self.collectionView?.indexPathsForVisibleItems[middleItem]

    coordinator.animate(alongsideTransition: { ctx in

        self.collectionView?.layoutIfNeeded()
        self.collectionView?.scrollToItem(at: indexPath!, at: .centeredVertically, animated: false)

    }, completion: { _ in


    })
}

What Doesn't work with above code:

1. Portrait -> Landscape: Somewhat off from what cell should end up in the center.
2. Portrait -> Landscape -> Portrait: Completely off from what offset was in Portrait in the first place.
3. Portrait -> Landscape -> Portrait -> Landscape: Way off!

Notes:

• I have to invalidate the collection view layout upon rotation due to cell sizes and spacing having to be recalculated.
• self.collectionView?.layoutIfNeeded() being inside the animation
  block, make the transition smooth
• May be scrollToItem is being called before the collection view layout is not finalized, leading to incorrect scroll offset?

Alternate Method?

Instead of using 'indexPathsForVisibleItems', use just 'contentOffset'? Calculate the offset after-rotation offset? But how would this be possible when after-rotation contentSize could be different than what's expected do to different cell sizes, cell spacing etc?

Answer 1

You can do this by implementing the UICollectionViewDelegate method collectionView(_:targetContentOffsetForProposedContentOffset:):

During layout updates, or when transitioning between layouts, the collection view calls this method to give you the opportunity to change the proposed content offset to use at the end of the animation. You might return a new value if the layout or animations might cause items to be positioned in a way that is not optimal for your design.

Alternatively, if you've already subclassed UICollectionViewLayout, you can implement targetContentOffset(forProposedContentOffset:) in your layout subclass, which may be more convenient.

In your implementation of that method, compute and return the content offset that would cause the center cell to be positioned in the center of the collection view. If your cell sizes are fixed, it should be a simple matter of undoing the change to the content offset caused by other UI elements (such as the disappearing frames of the status bar and/or navigation bar).

If your cell sizes vary with device orientation:

1. Prior to device rotation, fetch and save the index path of the center cell by calling indexPathForItem(at:) on your collection view, passing the content offset (plus half of the height of the collection view's visible bounds) as the point.
2. Implement one of the targetContentOffset(forProposedContentOffset:) methods. Retrieve the layout attributes for the center cell by calling layoutAttributesForItem(at:) with the saved index path. The target content offset is the middle of the frame for that item (less half of the height of the collection view's visible bounds).

The first step could be implemented in your view controller in viewWillTransition(to:with:) or in scrollViewDidScroll(). It could also be implemented in your layout object in prepareForAnimatedBoundsChange(), or perhaps in invalidateLayout(with:) after checking for a bounds change caused by a change in device orientation. (You would also need to ensure that shouldInvalidateLayout(forBoundsChange:) returns true in those circumstances.)

You may need to make adjustments for content insets, cell spacing, or other matters specific to your app.

Answer 2

This is the implementation of jamesk solution:

In your ViewController:

fileprivate var prevIndexPathAtCenter: IndexPath?

fileprivate var currentIndexPath: IndexPath? {
    let center = view.convert(collectionView.center, to: collectionView)
    return collectionView.indexPathForItem(at: center)
}

override func willTransition(to newCollection: UITraitCollection, with coordinator: UIViewControllerTransitionCoordinator) {
    super.willTransition(to: newCollection, with: coordinator)

    if let indexAtCenter = currentIndexPath {
        prevIndexPathAtCenter = indexAtCenter
    }
    collectionView.collectionViewLayout.invalidateLayout()
}

In UICollectionViewDelegateFlowLayout:

func collectionView(_ collectionView: UICollectionView, targetContentOffsetForProposedContentOffset proposedContentOffset: CGPoint) -> CGPoint {

    guard let oldCenter = prevIndexPathAtCenter else {
        return proposedContentOffset
    }

    let attrs =  collectionView.layoutAttributesForItem(at: oldCenter)

    let newOriginForOldIndex = attrs?.frame.origin

    return newOriginForOldIndex ?? proposedContentOffset
}