如何旋转类似于照片应用的 UICollectionView 并保持当前视图居中? [英] How to rotate a UICollectionView similar to the photos app and keep the current view centered?

问题描述

我有一个照片库视图，它使用 UICollectionView 和 UICollectionViewFlowLayout，它具有 pagingEnabled 并水平滚动，仅显示一个视图时间.

I have a photo gallery view that uses a UICollectionView with a UICollectionViewFlowLayout, it has pagingEnabled and scrolls horizontally showing only one view at a time.

在我尝试旋转它之前效果很好......

Works great till I try to rotate it...

当我旋转设备时，在 willRotateToInterfaceOrientation:duration: 我更新 collectionView.contentOffset 使其停留在正确的项目上，并调整 currentCell 的大小使其动画成新的维度.问题出在两个状态之间的动画中，前一个"方向动画从左上角并扔进视图其他单元格.我是什么做错了，以至于屏幕上的动画视图是 FUBAR?

When I rotate the device, in willRotateToInterfaceOrientation:duration: I update the collectionView.contentOffset so it stays on the correct item and I resize the currentCell so it animates into the new dimensions. The problem is in the animation between the two states, the 'previous' orientation animates from the upper left corner AND flings into the view other cells. What is it I'm doing wrong such that the view being animated off the screen is FUBAR?

这是实际效果:

http://www.smugmug.com/gallery/n-3F9kD/i-BwzRzRf/A(忽略断断续续的视频，那是 Quicktime 的错:p)

http://www.smugmug.com/gallery/n-3F9kD/i-BwzRzRf/A (ignore the choppy video, thats Quicktime's fault :p)

这是我的 willAnimateRotationToInterfaceOrientation:duration:

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration {
[super willAnimateRotationToInterfaceOrientation:toInterfaceOrientation duration:duration];

// Update the flowLayout's size to the new orientation's size
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout;
if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) {
    flow.itemSize = CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height);
} else {
    flow.itemSize = CGSizeMake(self.collectionView.frame.size.width, self.collectionView.frame.size.height);
}
self.collectionView.collectionViewLayout = flow;
[self.collectionView.collectionViewLayout invalidateLayout];

// Get the currently visible cell
PreviewCellView *currentCell = (PreviewCellView*)[self.collectionView cellForItemAtIndexPath:[NSIndexPath indexPathForRow:_currentIndex inSection:0]];

// Resize the currently index to the new flow's itemSize
CGRect frame = currentCell.frame;
frame.size = flow.itemSize;
currentCell.frame = frame;

// Keep the collection view centered by updating the content offset
CGPoint newContentOffset = CGPointMake(_currentIndex * frame.size.width, 0);
self.collectionView.contentOffset = newContentOffset;
}

据我所知，我在任何地方都找不到任何示例代码来说明如何制作优雅旋转的照片库"样式集合视图.

As far as I'm aware I can't find any sample code anywhere that illustrates how to make a 'photo gallery' style collection view that rotates gracefully.

推荐答案

我为此苦苦挣扎了一段时间，直到我至少找到了这个美容解决方法":

I struggled with this for quite a while, until I at least found this 'cosmetic workaround':

在旋转期间在 collectionView 顶部添加一个带有当前图像(和正确的自动布局约束集)的全屏 UIImageView.像这样:

Add a full screen UIImageView with the current image (and correct auto layout constraints set) on top of the collectionView during rotation. Like so:

-(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration: (NSTimeInterval)duration 
{

[self.collectionView.collectionViewLayout invalidateLayout];

    // show a UIImageView with the current image on top of the collectionView 
    // to cover the ugly animation
    self.imageViewOnTopOfCollectionView.image = [self imageForItemAtIndexPath:self.currentIndexPath];
    self.imageViewOnTopOfCollectionView.hidden = NO;

    // show a centered, very large 'fakeBackground' view on top of
    // the UICollectionView, but below the UIImageView
    self.fakeBackground.hidden = NO;
}

-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
    // ... set correct contentOffset

    // hide the fake views again
    self.imageViewOnTopOfCollectionView.hidden = YES;
    self.fakeBackground.hidden = YES;
}

一个大的fakeBackground"将是一个额外的改进，以防止丑陋的集合视图动画的一部分在这个 imageViews 框架旋转时在它之外可见.例如.一个超大(在所有维度上都大于视图边界)UIView，其背景颜色与 collectionView 相同，z-Index 位于 collectionView 和 imageView 之间.

A large 'fakeBackground' would be an extra improvement to prevent parts of the ugly collection view animation being visible outside this imageViews frame while it rotates. E.g. an oversized (larger than the view's bounds in all dimensions) UIView with the same background color as the collectionView, with a z-Index just between the collectionView and the imageView.

这篇关于如何旋转类似于照片应用的 UICollectionView 并保持当前视图居中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！