在 Swift 中使用 UICollectionView 的时间轴

Question

我正在尝试为我的应用程序编写时间轴。为了给你一个洞察力，我在草图上设计了它：

我不是 Swift 方面的专家，所以我真的不知道如何编码。我考虑过创建一个 UICollectionView，并使用 indexPath 来改变单元格的设计（如果它是偶数或奇数）。

你怎么看？

Answer 1

如果我没理解错的话，你想知道这个设计是怎么做出来的？

你有两种方式来实现这样的设计：

第一个（最简单的方法）：您需要的只是一个顶部带有时间轴视图 (UICollectionView) 的 tableView，带有 2 个自定义集合视图单元格，一个用于奇数，另一个用于偶数 tableview 将有 2 个单元格，一个用于带图像的文本，另一个用于平面文本

如何渲染时间线：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if (indexPath.row + 1) % 2 == 0 {
        return even cell
    } else {
        return odd cell
    }

如何在用户滚动时间轴时通过计算 indexPath 来检测偶数或奇数：

@IBOutlet weak var collectionViewTimeLine: UICollectionView!
func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if let timeline = scrollView as? collectionViewTimeLine {
        // calculate and find selected indexPath
        // reload data
    }
}

第二种方式：当您想要在用户滚动时间轴时平滑地动画内容时使用这种方式

您需要 2 个 UICollectionView，第一个用于时间线，第二个用于内容当用户滚动时间轴时，您滚动 collectionViewContent

@IBOutlet weak var collectionViewTimeLine: UICollectionView!
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if let timeline = scrollView as? collectionViewTimeLine {
            // calculate and find selected indexPath
            // scroll collectionViewContent with selected indexPath
        }
    }

在 Swift 中使用 UICollectionView 的时间轴

Timeline with UICollectionView in Swift

timeline

uicollectionview

swift

swift3