使用 iOS 7 API 的 UICollectionView 交互式布局过渡答案

【问题标题】：UICollectionView interactive layout transition using iOS 7 APIs使用 iOS 7 API 的 UICollectionView 交互式布局过渡
【发布时间】：2013-10-01 05:52:54
【问题描述】：

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

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

原来的demo，我发现的时候还没有工作，可以用苹果开发者账号访问，这里：https://developer.apple.com/downloads/index.action?name=WWDC%202013

我的应用版本展示了一个包含两个布局的集合视图，这两个布局都具有不同的属性UICollectionViewFlowLayout。

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

在第一个布局中捏住项目也应使用UICollectionViewTransitionLayout、UIViewControllerAnimatedTransitioning 和UIViewControllerInteractiveTransitioning 动画到新布局。这行得通，但是在新布局或过渡布局中没有滚动到被捏住的单元格。

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

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

【问题讨论】：

标签： iphone ios cocoa-touch uicollectionview uicollectionviewlayout

【解决方案1】：

您可以在过渡期间自己操作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”值，但您可以通过将其设置回startInteractiveTransitionToCollectionViewLayout 的完成块中的“to”偏移量来否定它

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 的 AHEasing library 提供的 30 多种缓动功能。

【讨论】：

这看起来很有希望，我很高兴能真正看看它是否能解决我的问题。一个问题：您的示例项目中是否真的有一个交互式组件（例如，在布局之间来回捏合，可能会取消转换）？（我没找到明显的）
不，没有。这个周末我可能会尝试第二个例子。
链接的存储库非常好。感谢您花时间创建和分享它。
@jrturton 谢谢。希望尽快添加更多内容。
@JackWu 谢谢。固定链接。示例项目被合并到一个应用程序中。

【解决方案2】：

谢谢Timothy Moose。它也适用于 iOS14。我没有尝试通过手指进行交互，但对于在列表布局上更改网格布局的简单动画效果很好。你可以替换

self.collectionView?.contentOffset = ...

与

setContentOffset(_ contentOffset: yourOffset, animated: false)

如果你不这样做，内容会在动画过程中反弹一点。

这是我在 Swift 中的示例：

final class SFDocumentsManagerTransitionLayout: UICollectionViewTransitionLayout {
    var fromContentOffset: CGFloat = 0
    var toContentOffset: CGFloat = 0
    
    override var transitionProgress: CGFloat {
        didSet {
            let f = 1 - self.transitionProgress
            let t = self.transitionProgress
            self.collectionView?.setContentOffset(CGPoint(x: 0,
                                                          y: f * self.fromContentOffset + t * self.toContentOffset),
                                                  animated: false)
        }
    }
}

【讨论】：