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

Question

我正在尝试处理新的 iOS 7 API，这些 API 允许交互式动画 View Controller 转换，包括 UICollectionViewLayout 之间的转换。

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

原始演示，当我找到它时还没有处于工作状态，可以使用 Apple Developer 帐户访问，此处:https://developer.apple.com/downloads/index.action?name=WWDC%202013

我的应用程序版本提供了一个具有两种布局的 Collection View ，这两种布局都具有不同的属性。

在第一个布局中点击一个单元格会正确地动画到第二个，包括，至关重要的是，在新布局中滚动到点击的项目。起初我对新的 Collection View 如何知道如何设置其内容偏移量以使适当的单元格可见感到困惑，但我了解到它是基于呈现 Collection View 的 selected 属性来执行此操作的。

在第一个布局中的项目上捏应该动画，使用 UICollectionViewTransitionLayout，UIViewControllerAnimatedTransitioning 和 UIViewControllerInteractiveTransitioning，到新的布局。这可行，但在新布局或过渡布局中未滚动到捏合单元格。

我已经尝试将 selected 属性设置在不同位置的 pinched-on 单元格上(试图模仿在点击项目以推送新 View Controller 时描述的行为)，到 no有用。

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

Answer 1

您可以在过渡期间自行操作 contentOffset，这实际上比 UICollectionView 的 内置动画提供了更细粒度的控制。

例如，您可以像这样定义过渡布局以在“到”和“从”偏移之间进行插值。您只需要根据您希望事情如何结束来计算“到”偏移量:

@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

block

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

更新

我在新的 GitHub 库中发布了一个实现和一个工作示例 TLLayoutTransitioning .该示例是非交互式的，旨在演示通过 setCollectionViewLayout:animated:completion 改进的动画，但它利用交互式转换 API 与上述技术相结合。看看 TLTransitionLayout class并尝试运行 "Resize" example在示例工作区中。

也许 TLTransitionLayout 可以完成您的需要。

更新 2

我在 TLLayoutTransitioning 库中添加了一个交互式示例。尝试运行 "Pinch" example在示例工作区中。这个将可见细胞捏成一组。我正在研究另一个示例，该示例捏合单个单元格，使该单元格在过渡期间跟随您的手指，而其他单元格遵循默认的线性路径。

更新 3

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