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

Question

我正在尝试处理新的iOS 7 API,它允许交互式动画视图控制器转换,包括UICollectionViewLayouts 之间的转换.

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

原始演示在我找到它时未处于工作状态,可通过Apple Developer帐户访问,网址为:https://developer.apple.com/downloads/index.action？name = WWDC%202020

我的应用程序版本提供了一个包含两个布局的集合视图,两个布局都UICollectionViewFlowLayout具有不同的属性.

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

捏在某个项目中的第一个布局为动画,使用UICollectionViewTransitionLayout,UIViewControllerAnimatedTransitioning和UIViewControllerInteractiveTransitioning,新的布局,以及.这样可以工作,但是在新布局或过渡布局中,压缩单元格不会滚动到该单元格.

我已经尝试selected在不同位置上的pinched-on单元格上设置属性(尝试模仿在点击某个项目时所描述的行为以推动新的视图控制器),但无济于事.

有关如何解决这个问题的任何想法？

Answer 1

您可以contentOffset在过渡期间操纵自己,这实际上提供了比UICollectionView's内置动画更细粒度的控制.

例如,您可以像这样定义过渡布局,以在"到"和"从"偏移之间进行插值.你只需要根据你想要的东西来计算"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该类,并尝试在Examples工作区中运行"Resize"示例.

也许TLTransitionLayout可以完成你所需要的.

更新2

我在TLLayoutTransitioning库中添加了一个交互式示例.尝试在Examples工作区中运行"Pinch"示例.这个将可见细胞作为一组捏住.我正在研究另一个压缩单个单元的示例,使得单元在转换期间跟随您的手指,而其他单元遵循默认的线性路径.

更新3

我最近添加了更多内容偏移位置选项:Minimal,Center,Top,Left,Bottom和Right.而transitionToCollectionViewLayout:现在支持30 +宽松沃伦·穆尔的功能礼貌AHEasing库.