How to draw line in between two cell in uicollectionview

Question

I want to draw line in between two Cell in UIcollectionView,

Below is design what exactly I want

Above design is dynamically change depends on array value.Please tell me if any one know how to draw line .

Answer 1

Well this is a request, as you've shown no approach so far, but here I am responding to your post with a solution which works with the collectionView

UI

• Add a UICollectionView in your controller which lets say has a height of 100pt and its padding to [left, right, top] is 0. (Configurable via Autolayout)
• Inside the UICollectionView add UICollectionViewCell which has 3 elements
  1. A UIView (Or your custom UIImageView which will create your yellow line. It needs to be vertically centered, leading and trailing to superview equal to 0 and the height lets say 5pt
  2. A UIImageView which will be centered and depending on the node, it will show start, progress or end node. It needs to be centered horizontally and vertically, and a custom height and width.
  3. A UILabel which will show the node names (if start or end it needs to be hidden). Put a leading and trailing margin to 8pt and center it vertically.

View tree should look something like this:

Code

The idea is that each node of your route will be represented by a similar cell, and without leaving leaving spaces between UICollectionViewCells you will have a similar effect.

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

Output

Answer 2

Option 1

1. Create a view that has a horizontal line through the middle.
2. Add it as a subview to your view controller root view.
3. Create a collection view without a line. Make the background transparent.
4. Add it as a subview to your view controller root view.
5. Make sure both views are the same size.

Option 2

1. Create a custom UICollectionViewCell that is square in shape.
2. Position your circular icon in the middle of the cell.
3. Draw a yellow line through the cell.
4. Make the rest of the cell transparent, with no edges, so all you see is the icon and the yellow line.
5. Layout your square shaped cells so that there are no gaps in between.

Option 3

1. Create a custom UICollectionViewCell that is square in shape.
2. Position your circular icon in the middle of the cell.
3. Draw a yellow line through the cell.
4. Create a UICollectionReusableView subclass that will act as a decoration view. Draw the same yellow line here (you may want to make your 'yellow line drawing code' re-usable).
5. Create a custom layout that positions your cells side by side, with decoration views in between.

This option allows you to be more creative. Maybe you want to dynamically change the distance between each cell with an animation? Or maybe you want to increase the gap between just a single pair of cells? To do this, you would setup multiple layouts that differ slightly in their implementation (or a single layout that is configurable) and swap between instances thereof.

This is my most recent custom collection view layout implementation. It's a grid layout with section header views, so not exactly what you want, but it should get you started.

Other Refs

1. Create Custom Layout
2. Swap Between Custom Layouts