Saving contentOffice in UICollectionView while rotating Interface Orientation

Question

I am trying to handle interface orientation changes in a UICollectionViewController. What I'm trying to achieve is that I want to have the same content as after turning the interface. This means that it must be changed in accordance with the ratio of changes in borders.

Starting with a portrait with content offset {bounds.size.width * 2, 0} ...

... should lead to the displacement of the content in the landscape using {bounds.size.width * 2, 0} (and vice versa).

Computing a new offset is not a problem, but does not know where (or when) to set it to get smooth animation. What I am doing this is the layout invalidity in willRotateToInterfaceOrientation:duration: and resetting the content offset in didRotateFromInterfaceOrientation: ::

 - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration; { self.scrollPositionBeforeRotation = CGPointMake(self.collectionView.contentOffset.x / self.collectionView.contentSize.width, self.collectionView.contentOffset.y / self.collectionView.contentSize.height); [self.collectionView.collectionViewLayout invalidateLayout]; } - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation; { CGPoint newContentOffset = CGPointMake(self.scrollPositionBeforeRotation.x * self.collectionView.contentSize.width, self.scrollPositionBeforeRotation.y * self.collectionView.contentSize.height); [self.collectionView newContentOffset animated:YES]; } 

This is a change in the content offset after rotation.

How can I set it during rotation? I tried setting a new content offset to willAnimateRotationToInterfaceOrientation:duration: but this leads to very strange behavior.

An example can be found in my project on GitHub .

Answer 1

Solution 1, “just snap”

If you only need to make sure that the contentOffset ends in the correct position, you can subclass UICollectionViewLayout and implement the targetContentOffsetForProposedContentOffset: method. For example, you can do something like this to calculate the page:

 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset { NSInteger page = ceil(proposedContentOffset.x / [self.collectionView frame].size.width); return CGPointMake(page * [self.collectionView frame].size.width, 0); } 

But the problem you will encounter is that the animation for this transition is extremely strange. What I do in my case (this is almost the same as yours):

Solution 2, smooth animation

1) First, I set the size of the cell that the collectionView: layout: sizeForItemAtIndexPath: delegate method can control:

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return [self.view bounds].size; } 

Note that [self.view bounds] will change according to the rotation of the device.

2) When the device is about to start spinning, I add an imageView on top of the collection view with all the masks for resizing. This view will actually hide the weirdness collectionView (because it sits on top of it), and since the willRotatoToInterfaceOrientation: method is called inside the animation block, it will rotate accordingly. I also save the following contentOffset in accordance with the indexPath shown, so I can fix the contentOffset after the rotation is done:

 - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { // Gets the first (and only) visible cell. NSIndexPath *indexPath = [[self.collectionView indexPathsForVisibleItems] firstObject]; KSPhotoViewCell *cell = (id)[self.collectionView cellForItemAtIndexPath:indexPath]; // Creates a temporary imageView that will occupy the full screen and rotate. UIImageView *imageView = [[UIImageView alloc] initWithImage:[[cell imageView] image]]; [imageView setFrame:[self.view bounds]]; [imageView setTag:kTemporaryImageTag]; [imageView setBackgroundColor:[UIColor blackColor]]; [imageView setContentMode:[[cell imageView] contentMode]]; [imageView setAutoresizingMask:0xff]; [self.view insertSubview:imageView aboveSubview:self.collectionView]; // Invalidate layout and calculate (next) contentOffset. contentOffsetAfterRotation = CGPointMake(indexPath.item * [self.view bounds].size.height, 0); [[self.collectionView collectionViewLayout] invalidateLayout]; } 

Note that my subclass of UICollectionViewCell has a public imageView property.

3) Finally, the last step is to “snap” the content offset to a valid page and delete the temporary image.

 - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation { [self.collectionView setContentOffset:contentOffsetAfterRotation]; [[self.view viewWithTag:kTemporaryImageTag] removeFromSuperview]; } 

Answer 2

The answer “just click” above did not work for me, because it often did not end on an element that was in sight before the rotation. So I got a stream layout that uses the focus element (if set) to calculate the offset content. I set the element to willAnimateRotationToInterfaceOrientation and cleared it in didRotateFromInterfaceOrientation. In iOS7, insertion setup is required because the Collection view may be located under the top pane.

 @interface HintedFlowLayout : UICollectionViewFlowLayout @property (strong)NSIndexPath* pathForFocusItem; @end @implementation HintedFlowLayout -(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset { if (self.pathForFocusItem) { UICollectionViewLayoutAttributes* layoutAttrs = [self layoutAttributesForItemAtIndexPath:self.pathForFocusItem]; return CGPointMake(layoutAttrs.frame.origin.x - self.collectionView.contentInset.left, layoutAttrs.frame.origin.y-self.collectionView.contentInset.top); }else{ return [super targetContentOffsetForProposedContentOffset:proposedContentOffset]; } } @end 

Answer 3

For those using iOS 8+, willRotateToInterfaceOrientation and didRotateFromInterfaceOrientation are deprecated.

Now you should use the following:

 /* This method is called when the view controller view size is changed by its parent (ie for the root view controller when its window rotates or is resized). If you override this method, you should either call super to propagate the change to children or manually forward the change to children. */ - (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id <UIViewControllerTransitionCoordinator>)coordinator { [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator]; [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) { // Update scroll position during rotation animation self.collectionView.contentOffset = (CGPoint){contentOffsetX, contentOffsetY}; } completion:^(id<UIViewControllerTransitionCoordinatorContext> context) { // Whatever you want to do when the rotation animation is done }]; } 

Swift 3:

 override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) coordinator.animate(alongsideTransition: { (context:UIViewControllerTransitionCoordinatorContext) in // Update scroll position during rotation animation }) { (context:UIViewControllerTransitionCoordinatorContext) in // Whatever you want to do when the rotation animation is done } } 

Answer 4

I think the correct solution is to override the method - (CGPoint) targetContentOffsetForProposedContentOffset: (CGPoint) suggestedContentOffset in a subclass of UICollectionViewFlowLayout

From the docs:

When updating a layout or when switching between layouts, the collection considers this method to give you the opportunity to change the proposed content offset to use at the end of the animation. You can override this method if the animation or transition can force objects to be positioned in a way that is not optimal for your design.

Answer 5

Here is the code in Swift 3.1

 override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) let offset = self.collectionView?.contentOffset; let width = self.collectionView?.bounds.size.width; let index = round(offset!.x / width!); let newOffset = CGPoint(x: index * size.width, y: offset!.y) self.collectionView?.setContentOffset(newOffset, animated: false) coordinator.animate(alongsideTransition: { (context) in self.collectionView?.reloadData() self.collectionView?.setContentOffset(newOffset, animated: false) }, completion: nil) } 

Answer 6

This problem bothered me too. The highest voice that voted seemed to me too hacked, so I just rocked it a bit and just changed the alpha presentation of the collection, respectively, before and after rotation. I also do not animate the content offset update.

 - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { self.collectionView.alpha = 0; [self.collectionView.collectionViewLayout invalidateLayout]; self.scrollPositionBeforeRotation = CGPointMake(self.collectionView.contentOffset.x / self.collectionView.contentSize.width, self.collectionView.contentOffset.y / self.collectionView.contentSize.height); } - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation; { CGPoint newContentOffset = CGPointMake(self.scrollPositionBeforeRotation.x * self.collectionView.contentSize.width, self.scrollPositionBeforeRotation.y * self.collectionView.contentSize.height); [self.collectionView setContentOffset:newContentOffset animated:NO]; self.collectionView.alpha = 1; } 

Pretty sleek and less hacky.

Answer 7

I am using the fz option. answer (iOS 7 and 8):

Before rotation:

• Keep current visible pointer path
• Creating a snapshot of a collection View
• Put a UIImageView with it on top of the collection view

After rotation:

• Scroll to saved index

• Take a picture.

   @property (nonatomic) NSIndexPath *indexPath; - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { self.indexPathAfterRotation = [[self.collectionView indexPathsForVisibleItems] firstObject]; // Creates a temporary imageView that will occupy the full screen and rotate. UIGraphicsBeginImageContextWithOptions(self.collectionView.bounds.size, YES, 0); [self.collectionView drawViewHierarchyInRect:self.collectionView.bounds afterScreenUpdates:YES]; UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; [imageView setFrame:[self.collectionView bounds]]; [imageView setTag:kTemporaryImageTag]; [imageView setBackgroundColor:[UIColor blackColor]]; [imageView setContentMode:UIViewContentModeCenter]; [imageView setAutoresizingMask:0xff]; [self.view insertSubview:imageView aboveSubview:self.collectionView]; [[self.collectionView collectionViewLayout] invalidateLayout]; } - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation { [self.collectionView scrollToItemAtIndexPath:self.indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO]; [[self.view viewWithTag:kTemporaryImageTag] removeFromSuperview]; } 

Answer 8

This work is like a charm:

 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return self.view.bounds.size; } -(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { int currentPage = collectionMedia.contentOffset.x / collectionMedia.bounds.size.width; float width = collectionMedia.bounds.size.height; [UIView animateWithDuration:duration animations:^{ [self.collectionMedia setContentOffset:CGPointMake(width * currentPage, 0.0) animated:NO]; [[self.collectionMedia collectionViewLayout] invalidateLayout]; }]; } 

Answer 9

After turning the orientation of the interface, the UICollectionViewCell usually moves to a different position, because we will not update the contentSize and contentOffset.

Thus, the visible UICollectionViewCell is not always in the expected position.

Visible UICollectionView, which we expected, as shown below

The orientation we expected

UICollectionView must delegate the function [collectionView sizeForItemAtIndexPath] from 「UICollectionViewDelegateFlowLayout」.

And you have to calculate the size of the element in this function.

The custom UICollectionViewFlowLayout should override the following functions.

• -(void)prepareLayout

  . Set itemSize, scrollDirection and others.

• -(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity

  . Calculate page number or calculate apparent content offset.

• -(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset

  . Returning visual content.

• -(CGSize)collectionViewContentSize

  . Return the total size of the contents of the collection.

Your viewController must override 「willRotateToInterfaceOrientation」 and in this function you must call the function [XXXCollectionVew.collectionViewLayout invalidateLayout];

But 「willRotateToInterfaceOrientation」 is deprecated in iOS 9, or you can call the [XXXCollectionVew.collectionViewLayout invalidateLayout] function in different ways.

Here is an example: https://github.com/bcbod2002/CollectionViewRotationTest

Answer 10

To drop the troppoli solution , you can set the offset in your custom class without worrying about remembering the code implementation in the view controller. prepareForAnimatedBoundsChange should be called when you rotate the device, and then finalizeAnimatedBoundsChange after it is rotated.

 @interface OrientationFlowLayout () @property (strong)NSIndexPath* pathForFocusItem; @end @implementation OrientationFlowLayout - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset { if (self.pathForFocusItem) { UICollectionViewLayoutAttributes* layoutAttrs = [self layoutAttributesForItemAtIndexPath: self.pathForFocusItem]; return CGPointMake(layoutAttrs.frame.origin.x - self.collectionView.contentInset.left, layoutAttrs.frame.origin.y - self.collectionView.contentInset.top); } else { return [super targetContentOffsetForProposedContentOffset:proposedContentOffset]; } } - (void)prepareForAnimatedBoundsChange:(CGRect)oldBounds { [super prepareForAnimatedBoundsChange:oldBounds]; self.pathForFocusItem = [[self.collectionView indexPathsForVisibleItems] firstObject]; } - (void)finalizeAnimatedBoundsChange { [super finalizeAnimatedBoundsChange]; self.pathForFocusItem = nil; } @end 

Answer 11

If it is found that using targetContentOffsetForProposedContentOffset does not work in all scenarios, and the problem with using didRotateFromInterfaceOrientation is that it gives visual artifacts. My excellent working code is as follows:

 - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { [super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration]; _indexPathOfFirstCell = [self indexPathsForVisibleItems].firstObject; } - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { [super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration]; if (_indexPathOfFirstCell) { [UIView performWithoutAnimation:^{ [self scrollToItemAtIndexPath:self->_indexPathOfFirstCell atScrollPosition:UICollectionViewScrollPositionTop animated:NO]; }]; _indexPathOfFirstCell = nil; } } 

The key is to use the willRotateToInterfaceOrientation method to determine the part in the view that you want to scroll, and willAnimationRotationToInterfaceOrientation to recount it when the view has resized (the borders have already changed when this method is called by the wireframe) and actually move to a new position without animation. In my code, I used the index path for the first visual cell, but the percentage of content contentOffset.y / contentSize.height will also do the job a little differently.

Answer 12

You might want to hide the View collection during its (incorrect) animation and show the appearance of the replacement cell of the cell that rotates correctly.

For a simple photo gallery, I found a way to do this, which looks good. See My answer here: How do I rotate a UICollectionView that looks like a photo app and keep the current center in the center?

Answer 13

My way is to use a UICollectionViewFlowlayout object.

Set the line spacing ojbect if it scrolls horizontally.

 [flowLayout setMinimumLineSpacing:26.0f]; 

Set the interval between intermettes if it scrolls vertically.

 [flowLayout setMinimumInteritemSpacing:0.0f]; 

Please note that when you rotate the screen, it behaves differently. In my case, I scroll it horizontally, so the minimum distance is 26.0f. Then it seems terrible when it rotates in a landscape direction. I have to check the rotation and set the minimum distance for this direction to 0.0f in order to do it right.

What is it! Plain.

Answer 14

I had a problem with my project, I used two different layouts for the UICollectionView.

 mCustomCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"LandScapeCell" forIndexPath:indexPath]; theCustomCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"PortraitCell" forIndexPath:indexPath]; 

Then check it for each orientation and use your configuration for each orientation.

Answer 15

 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CGSize pnt = CGSizeMake(70, 70); return pnt; } -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { // UIEdgeInsetsMake(<#CGFloat top#>, <#CGFloat left#>, <#CGFloat bottom#>, <#CGFloat right#>) return UIEdgeInsetsMake(3, 0, 3, 0); } 

This way you can adjust the content offset and the size of your cell.

Answer 16

Use <CollectionViewDelegateFlowLayout> and in the didRotateFromInterfaceOrientation: method didRotateFromInterfaceOrientation: reload the CollectionView data.

Implement collectionView:layout:sizeForItemAtIndexPath: method <CollectionViewDelegateFlowLayout> and in this method check the orientation of the interface and apply your own size for each cell.

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation]; if (UIInterfaceOrientationIsPortrait(orientation)) { return CGSizeMake(CGFloat width, CGFloat height); } else { return CGSizeMake(CGFloat width, CGFloat height); } } 

Answer 17

I have a similar case in which I use this

 - (void)setFrame:(CGRect)frame { CGFloat currentWidth = [self frame].size.width; CGFloat offsetModifier = [[self collectionView] contentOffset].x / currentWidth; [super setFrame:frame]; CGFloat newWidth = [self frame].size.width; [[self collectionView] setContentOffset:CGPointMake(offsetModifier * newWidth, 0.0f) animated:NO]; } 

This is a view containing collectionView. In supervision I also do this.

 - (void)setFrame:(CGRect)frame { UICollectionViewFlowLayout *collectionViewFlowLayout = (UICollectionViewFlowLayout *)[_collectionView collectionViewLayout]; [collectionViewFlowLayout setItemSize:frame.size]; [super setFrame:frame]; } 

This is the setting of cell sizes in full screen mode (full viewing will be accurate;)). If you do not, many error messages may appear that the cell size is larger than the collection and that the behavior for this is undefined and bla bla bla .....

These methods cannot be combined into one subclass of the collection or in the view containing the viewview, but for my current project this was a logical path.

Answer 18

What does this work mean to me:

• Set the size of my cells from my UICollectionViewDelegateFlowLayout method

   func collectionView(collectionView: UICollectionView!, layout collectionViewLayout: UICollectionViewLayout!, sizeForItemAtIndexPath indexPath: NSIndexPath!) -> CGSize { return collectionView.bounds.size } 

• After that I implement willRotateToInterfaceOrientationToInterfaceOrientation:duration: like this

   override func willRotateToInterfaceOrientation(toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval) { let currentPage = Int(collectionView.contentOffset.x / collectionView.bounds.size.width) var width = collectionView.bounds.size.height UIView.animateWithDuration(duration) { self.collectionView.setContentOffset(CGPointMake(width * CGFloat(currentPage), 0.0), animated: false) self.collectionView.collectionViewLayout.invalidateLayout() } } 

The above code is in Swift , but you get the point and easily translate

Answer 19

The answer "just click" is the right approach and does not require additional smoothing using IMO overlays. However, there is a problem that explains why some people see that in some cases the correct page does not scroll. When calculating the page, you want to use height, not width. What for? Since the view geometry has already been rotated by the time the target is reached, targetContentOffsetForProposedContentOffset, and therefore what width was now height. Rounding is also more reasonable than a ceiling. So:

 - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset { NSInteger page = round(proposedContentOffset.x / self.collectionView.bounds.size.height); return CGPointMake(page * self.collectionView.bounds.size.width, 0); } 

Answer 20

I solved this problem with the following steps:

• Calculate the current scroll NSIndexPath
• Disable scrolling and pagination in UICollectionView
• Apply new stream layout to UICollectionView
• Enable Scrolling and Pagination in UICollectionView
• Scroll UICollectionView to current NSIndexPath

Here is a code template demonstrating Above Steps:

 - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration; { //Calculating Current IndexPath CGRect visibleRect = (CGRect){.origin = self.yourCollectionView.contentOffset, .size = self.yourCollectionView.bounds.size}; CGPoint visiblePoint = CGPointMake(CGRectGetMidX(visibleRect), CGRectGetMidY(visibleRect)); self.currentIndexPath = [self.yourCollectionView indexPathForItemAtPoint:visiblePoint]; //Disable Scrolling and Pagination [self disableScrolling]; //Applying New Flow Layout [self setupNewFlowLayout]; //Enable Scrolling and Pagination [self enableScrolling]; } - (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation; { //You can also call this at the End of `willRotate..` method. //Scrolling UICollectionView to current Index Path [self.yourCollectionView scrollToItemAtIndexPath:self.currentIndexPath atScrollPosition:UICollectionViewScrollPositionCenteredVertically animated:NO]; } - (void) disableScrolling { self.yourCollectionView.scrollEnabled = false; self.yourCollectionView.pagingEnabled = false; } - (void) enableScrolling { self.yourCollectionView.scrollEnabled = true; self.yourCollectionView.pagingEnabled = true; } - (void) setupNewFlowLayout { UICollectionViewFlowLayout* flowLayout = [[UICollectionViewFlowLayout alloc] init]; flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0); flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; flowLayout.minimumInteritemSpacing = 0; flowLayout.minimumLineSpacing = 0; [flowLayout setItemSize:CGSizeMake(EXPECTED_WIDTH, EXPECTED_HEIGHT)]; [self.yourCollectionView setCollectionViewLayout:flowLayout animated:YES]; [self.yourCollectionView.collectionViewLayout invalidateLayout]; } 

Hope this helps.

Answer 21

Swift 3.

, () indexPath.item, x - . UICollectionView:

 override func collectionView(_ collectionView: UICollectionView, targetContentOffsetForProposedContentOffset proposedContentOffset: CGPoint) -> CGPoint { let page:CGFloat = pageNumber // your tracked page number eg. 1.0 return CGPoint(x: page * collectionView.frame.size.width, y: -(topInset)) //the 'y' value would be '0' if you don't have any top EdgeInset } 

viewDidLayoutSubviews(), collectionView.frame.size.width - , .

Answer 22

, :

 - (void) willRotateToInterfaceOrientation: (UIInterfaceOrientation) toInterfaceOrientation duration: (NSTimeInterval) duration { [UIView animateWithDuration: duration animation: ^(void) { CGPoint newContentOffset = CGPointMake(self.scrollPositionBeforeRotation.x * self.collectionView.contentSize.height, self.scrollPositionBeforeRotation.y * self.collectionView.contentSize.width); [self.collectionView setContentOffset: newContentOffset animated: YES]; }]; }