ios - 自定义 tableview 滚动效果，如 google primer

Question

适用于 iOS 的 Google Primer 应用程序具有表格 View 滚动效果，其中单元格在滚动时相互堆叠。 Primer application :如果你在他们的页面上滚动，你可以看到效果......我所说的效果是在 Primer 的特色类(class)中。我正在尝试用 tableview 重现它。

我尝试在 viewdidscroll 事件中使用单元格的框架。我让它工作了，但是当以某种方式向上移动时它会变得非常跳跃/生涩。此外，当发生抖动时，框架会错误地偏移。我只能在单元格内的标签框架上完成。我的单元格真的很大(超过屏幕的一半)。

如何消除跳跃/ SCSS ？如何为容器 View 位置而不是标签位置设置动画？

带有标签的 scrollViewDidScroll 上的当前动画:

override func scrollViewDidScroll(scrollView: UIScrollView) {
    if (self.tableView.contentOffset.y < 0) { return }

    let offsetYDifference =  oldYOffset - self.tableView.contentOffset.y 
    oldYOffset = self.tableView.contentOffset.y

    let cell = self.tableView.visibleCells.first!

    var newOriginY = (cell.textLabel?.frame.origin.y)! - offsetYDifference
    if (newOriginY < 0) { //Cells get reused.
        newOriginY = newOriginY + cell.frame.height
    }

    cell.textLabel?.frame = CGRect(x: (cell.textLabel?.frame.origin.x)!,
        y: newOriginY,
        width: (cell.textLabel?.frame.width)!,
        height: (cell.textLabel?.frame.height)!)
}

Custom paging-like behavior在 Storyboard上启用分页设置为关闭:

override func scrollViewWillEndDragging(scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {

    let offsety = targetContentOffset.memory.y
    var smallestCellDiffToContentOffset = abs(offsety - (self.tableView.visibleCells.first?.frame.origin.y)!)

    var closestCellOrigin = self.tableView.visibleCells.first?.frame.origin.y

    self.tableView.visibleCells.forEach { (cell) -> () in
        if (abs(offsety - cell.frame.origin.y) <= smallestCellDiffToContentOffset) {
            smallestCellDiffToContentOffset = abs(offsety - cell.frame.origin.y)
            closestCellOrigin = cell.frame.origin.y
        }
    }
    targetContentOffset.memory.y = closestCellOrigin!
}

我是一个初学者 swift 开发者，我真的不知道该做什么。提前致谢。

Answer 1

本质上，您看到的是 UITableView 正在阻止您创建此动画的努力。正确的是，更改单元格的框架应该留给 tableview 本身。

您需要的是带有控制单元格位置的自定义布局对象的 UICollectionView。这将是一项相当大的工作，但您可以进行 UITableView 无法提供的更精细的控制。

结帐 this tutorial有关 Collection View 的自定义布局的简要介绍。我推荐观看 2012 WWDC 视频 Advanced Collection Views and Building Custom Layouts