Best way to add multiple diagonal connection lines between TableViewCells

Question

I'm creating an app that needs to show a tableview like below image

Similar colored circles are to be matched with a line.

Which view i can add the lines? Or need to create a new view above tableview? But still my tableview needs to be scrolled.

How can i achieve this?

Update for Bounty

I want to implement the same with incliend lines between neighbouring circles. How to achieve the same?

Demonstration below:

Answer 1

create design like this

Based on your requirement just hide upper line and lower line of circle

Answer 2

You need to create collection view in tableview cell. In collection view you create one cell. Design the same user interface like your design. Show and hide the view with matching of rule. It will not affect tableview scrolling. and with this approach you can also provide scroll in collection view cell. i can provide you coded solution if you able to provide me more information. Thanks

You can use this Third Party LIb

Answer 3

You need to use a combination of collection view and a table view to give support for all devices.

1.Create one collection view cell with following layout

2. Hide upper and lower lines as per your need

3. Add collection view in table view cell and managed a number of cells in collection view depending upon the current device width and item's in between spacing.

Answer 4

You can create a vertical label without text, set the background color with black and place it behind the circle in view hierarchy and set a width of the label as per your requirement. Then you can hide unhide the label whenever you want.

P.S.: Make sure to hide your cell separator.

I have created a demo project. You can find it here. I tried to match your requirements. You can update the collection view settings to handle the hide and show of labels.

Let me know if you have any questions.

Hope this help. Thanks!