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

Question

我想在两个 之间画一条线手机 在 UIcollectionView ,

下面是我想要的设计



以上设计是根据数组值动态变化的。请告诉我是否有人知道如何画线。

Answer 1

好吧，这是一个请求，因为到目前为止您还没有展示任何方法，但是在这里我用一个适用于 collectionView 的解决方案来回复您的帖子

用户界面

在您的 Controller 中添加UICollectionView，它可以说具有100pt的高度，并填充到[左，

在 UICollectionView 里面添加 UICollectionViewCell 有 3 个元素

A UIView (或您的自定义 UIImageView 将创建您的黄线。它需要垂直居中 ， 前导和尾随 到 superview 等于 0767918

0x10404

一个 5pt 将居中，根据节点，它将显示开始、进度或结束节点。它需要水平和垂直居中，以及自定义的高度和宽度。

A UIImageView 将显示节点名称(如果开始或结束，则需要隐藏)。在 UILabel 处放置前导边距和后边距，并将其垂直居中。

View 树应如下所示:



代码

这个想法是，您的路线的每个节点都将由一个相似的单元格表示，并且在 8pt 之间不留空格，您将获得类似的效果。

Note: I didn't create a custom cell, and that should be something that you have to do it on your own, where you will be able to change the content depending on your data. And let this be a task for you to learn :)

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
    }
}

输出