使用 iOS 7 API 的 UICollectionView 交互式布局转换

我正在尝试掌握新的 iOS 7 API，这些 API 允许交互式、动画视图控制器转换，包括之间的转换UICollectionViewLayouts.

我从 WWDC 2013“iOS-CollectionViewTransition”中获取并修改了示例代码，可以在此处找到：https://github.com/timarnold/UICollectionView-Transition-Demo

原始演示在我发现时并未处于工作状态，可以使用 Apple 开发者帐户访问，如下所示：https://developer.apple.com/downloads/index.action?name=WWDC%202013

我的应用程序版本提供了具有两种布局的集合视图，两者UICollectionViewFlowLayout具有不同属性的布局。

点击第一个布局中的单元格会正确地动画到第二个布局，包括最重要的是，在新布局中滚动到点击的项目。起初，我对新的集合视图如何知道设置其内容偏移量以使适当的单元格可见感到困惑，但我了解到它是基于selected当前集合视图的属性。

在第一个布局中捏住某个项目应该会产生动画效果，使用UICollectionViewTransitionLayout, UIViewControllerAnimatedTransitioning, and UIViewControllerInteractiveTransitioning，以及新的布局。这可行，但是被捏住的单元格是not滚动到新布局或过渡布局中。

我尝试过设置selected不同位置的捏合单元上的属性（尝试模仿点击某个项目以推动新视图控制器时描述的行为），但无济于事。

关于如何解决这个问题有什么想法吗？

您可以操纵contentOffset在过渡期间你自己，这实际上给你比UICollectionView's内置动画。

例如，您可以像这样定义过渡布局，以在“to”和“from”偏移之间进行插值。您只需要根据您希望事情的结果自行计算“to”偏移量：

@interface MyTransitionLayout : UICollectionViewTransitionLayout
@property (nonatomic) CGPoint fromContentOffset;
@property (nonatomic) CGPoint toContentOffset;
@end

#import "MyTransitionLayout.h"
@implementation MyTransitionLayout

- (void) setTransitionProgress:(CGFloat)transitionProgress
{
    super.transitionProgress = transitionProgress;
    CGFloat f = 1 - transitionProgress;
    CGFloat t = transitionProgress;
    CGPoint offset = CGPointMake(f * self.fromContentOffset.x + t * self.toContentOffset.x, f * self.fromContentOffset.y + t * self.toContentOffset.y);
    self.collectionView.contentOffset = offset;
}

@end

需要注意的一件事是contentOffset当转换完成时将被重置为“from”值，但是您可以通过将其设置回完成块中的“to”偏移量来否定它startInteractiveTransitionToCollectionViewLayout

CGPoint toContentOffset = ...;
[self.collectionViewController.collectionView startInteractiveTransitionToCollectionViewLayout:layout completion:^(BOOL completed, BOOL finish) {
    if (finish) {
        self.collectionView.contentOffset = toContentOffset;
    }
}];

UPDATE

我在新的 GitHub 库中发布了此实现和工作示例TLLayoutTransitioning。该示例是非交互式的，旨在演示改进的动画setCollectionViewLayout:animated:completion，但它利用了交互式转换 API 并结合了上述技术。看看TLTransitionLayout class并尝试运行“调整大小”示例在示例工作区中。

Perhaps TLTransitionLayout可以完成你所需要的。

UPDATE 2

我向 TLLayoutTransitioning 库添加了一个交互式示例。尝试运行“捏”的例子在示例工作区中。这个将可见细胞捏成一组。我正在研究另一个示例，该示例会捏住单个单元格，以便该单元格在转换过程中跟随您的手指，而其他单元格则遵循默认的线性路径。

UPDATE 3

我最近添加了更多内容偏移放置选项：最小、居中、顶部、左侧、底部和右侧。和transitionToCollectionViewLayout:现在支持 30 多个缓动函数（由 Warren Moore 提供）AHEasing 库.