UICollectionView - draw a line between cells - ios

Question

How do I draw a line between cells in a UICollectionView that crosses over the spaces?
The intended output is something like this.:
The best that I've done is to add lines inside each cell. How do I connect the lines through the spaces?

Answer 1

I made an extension that you can use like this:
collectionView.drawLineFrom(indexPathA, to: indexPathB, color: UIColor.greenColor())
Here is the extension:
extension UICollectionView {
func drawLineFrom(
from: NSIndexPath,
to: NSIndexPath,
lineWidth: CGFloat = 2,
strokeColor: UIColor = UIColor.blueColor()
) {
guard
let fromPoint = cellForItemAtIndexPath(from)?.center,
let toPoint = cellForItemAtIndexPath(to)?.center
else {
return
}
let path = UIBezierPath()
path.moveToPoint(convertPoint(fromPoint, toView: self))
path.addLineToPoint(convertPoint(toPoint, toView: self))
let layer = CAShapeLayer()
layer.path = path.CGPath
layer.lineWidth = lineWidth
layer.strokeColor = strokeColor.CGColor
self.layer.addSublayer(layer)
}
}
The result looks like this:

Answer 2

I could achieve this with below code, might have different approach too.
Ok, so I am creating a custom UIView with custom frame and just providing the frame blindly, you can calculate based on your adjacent cells.
let cell1 = collectionView.cellForItemAtIndexPath(NSIndexPath(forRow: 0, inSection: 0))
let myView = UIView.init(frame: CGRectMake((cell1?.frame.origin.x)!, ((cell1?.frame.origin.y)! + 50.0), (cell1?.frame.size.width)!*4, 10))
myView.backgroundColor = UIColor.blueColor()
collectionView.addSubview(myView)
collectionView.bringSubviewToFront(myView)
This would draw a line of height 10.0. Let me know if this helps you.

Answer 3

Updated #Callam's answer for Swift 5 and added a few minor modifications
Uses dequeueReusableCell instead cellForItemAtIndexPath
Uses a custom collection view cell that you'll need to create elsewhere. You'll also need to give it a reuse identifier name.
extension UICollectionView {
func drawLineFrom(
from: IndexPath,
to: IndexPath,
lineWidth: CGFloat = 2,
strokeColor: UIColor = UIColor.blue
) {
let fromPoint = self.dequeueReusableCell(withReuseIdentifier: "fooReuseIdentifier", for: from) as? FooCustomCollectionViewCell
let toPoint = self.dequeueReusableCell(withReuseIdentifier: "fooReuseIdentifier", for: to) as? FooCustomCollectionViewCell
let path = UIBezierPath()
guard let fromCenter = fromPoint?.center else { return }
guard let toCenter = toPoint?.center else { return }
path.move(to: convert(fromCenter, to: self))
path.addLine(to: convert(toCenter, to: self))
let layer = CAShapeLayer()
layer.path = path.cgPath
layer.lineWidth = lineWidth
layer.strokeColor = strokeColor.cgColor
self.layer.addSublayer(layer)
}
}