如何在uicollectionview的兩個單元格之間畫線

Question

我想在UIcollectionView的兩個Cell之間畫線，

下面是我到底想要什么的設計

上面的設計是動態變化的，取決於數組的值。請告訴我是否有人會畫線。

Answer 1

好吧，這是一個請求，因為到目前為止您沒有顯示任何方法，但是在這里，我將通過與collectionView一起使用的解決方案來回復您的帖子

用戶界面

• 在您的控制器中添加一個UICollectionView ，假設它的高度為100pt並且其[[ left ， right ， top ]的填充為0。（可通過Autolayout配置）
• 在UICollectionView添加具有3個元素的UICollectionViewCell
  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

1. 創建一個中間有一條水平線的視圖。
2. 將其作為子視圖添加到視圖控制器根視圖。
3. 創建沒有行的集合視圖。 使背景透明。
4. 將其作為子視圖添加到視圖控制器根視圖。
5. 確保兩個視圖的大小相同。

選項2

1. 創建一個方形的自定義UICollectionViewCell。
2. 將圓形圖標放置在單元格的中間。
3. 在單元格中畫一條黃線。
4. 使單元的其余部分透明，沒有邊緣，因此您所看到的只是圖標和黃線。
5. 布置方形單元格，以便它們之間沒有間隙。

選項3

1. 創建一個方形的自定義UICollectionViewCell。
2. 將圓形圖標放置在單元格的中間。
3. 在單元格中畫一條黃線。
4. 創建一個UICollectionReusableView子類，它將作為裝飾視圖。 在此處繪制相同的黃線（您可能希望使“黃線繪制代碼”可重復使用）。
5. 創建一個自定義布局，將您的單元格並排放置，並在兩者之間進行裝飾。

此選項使您更具創造力。 也許您想通過動畫來動態更改每個單元格之間的距離？ 或者，也許您想增加一對單電池之間的距離？ 為此，您將設置多個布局，這些布局的實現方式略有不同（或可配置的單個布局），並在其實例之間進行交換。

這是我最近的自定義集合視圖布局實現。 這是帶有節標題視圖的網格布局，因此並不是您想要的，但它應該可以幫助您入門。

其他參考

1. 創建自定義布局
2. 在自定義布局之間交換