UI

在控制器中添加UICollectionView，其高度为100pt，其填充为[左，正确， top ]为0.（可通过Autolayout配置）
在UICollectionView添加UICollectionViewCell内，其中包含3个元素
1. 一个UIView（或您的自定义UIImageView，它会创建您的黄线。它需要垂直居中，前导到superview等于0，高度可以说5pt
2. 一个UIImageView，它将居中，根据节点，它将显示开始，进度或结束节点。它需要水平和垂直居中，并且需要自定义高度和宽度。
3. 一个UILabel，它将显示节点名称（如果需要隐藏它的开头或结尾）。将前导和尾随边距放到8pt并垂直居中。

查看树应该如下所示：

代码

我们的想法是，您的路线的每个节点都将由一个类似的单元格表示，并且不会在UICollectionViewCell之间留下空格，您将产生类似的效果。

注意：我没有创建自定义单元格，那应该是那样的你必须自己做，你将能够改变内容取决于您的数据。让这成为你的任务学习:)）

class ViewController: UIViewController, UICollectionViewDataSource {
    @IBOutlet weak var collectionView: UICollectionView!

    // MARK: - View Lifecycle

    override func viewDidLoad() {
        super.viewDidLoad()

        setupCollectionView()
    }

    // MARK: - Configurations

    private func setupCollectionView() {
        // Set datasource
        collectionView.dataSource = self

        // Set flow layout
        let layout:UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        layout.itemSize = CGSize(width: 100, height: 100.0)
        layout.scrollDirection = .horizontal
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 0
        collectionView.collectionViewLayout = layout
    }

    // MARK: - Protocol Conformance
    // MARK: UICollectionViewDataSource

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier:"CellIdentifier", for: indexPath)

        if indexPath.item == 0 {
            // This is the start of the route
        } else if indexPath.item == (collectionView.numberOfSections - 1) {
            // This the the end of it
        } else {
            // Other nodes on your route
        }

        return cell
    }
}

输出

Answer 2

选项1

创建一个中间有水平线的视图。
将其作为子视图添加到视图控制器根视图中。
创建没有线条的集合视图。使背景透明。
将其作为子视图添加到视图控制器根视图中。
确保两个视图的大小相同。

选项2

创建一个方形的自定义UICollectionViewCell。
将圆形图标放在单元格的中间。
在细胞中画一条黄线。
使单元格的其余部分透明，没有边缘，所以你看到的只是图标和黄线。
布置方形单元格，使其间没有间隙。

选项3

创建一个方形的自定义UICollectionViewCell。
将圆形图标放在单元格的中间。
在细胞中画一条黄线。
创建一个UICollectionReusableView子类，它将充当装饰视图。在这里绘制相同的黄线（您可能希望使您的黄线绘图代码可以重复使用）。
创建一个自定义布局，将您的单元格并排放置，中间有装饰视图。

此选项可让您更具创意。也许你想用动画动态改变每个单元格之间的距离？或者你想增加一对细胞之间的差距？为此，您将设置多个布局，这些布局在实现方面略有不同（或可配置的单个布局），并在其实例之间进行交换。

This是我最近的自定义集合视图布局实现。它是一个带有节头视图的网格布局，所以不完全是你想要的，但它应该让你开始。

其他参考

如何在uicollectionview中的两个单元格之间画线

2 个答案:

UI

代码

输出