Connecting UIButtons by drawing a line - ios

Question

I need to connect those buttons with a line but have issues as you can see on the screenshot. I need the last line to go vertical (green circles). Any suggestions?
here is the code:
#IBAction func drawButtons (sender: AnyObject) {
buttonContainerView.removeFromSuperview() // Clear containerView
buttonContainerView = UIView() // Create a new instance
let buttonCount = array.count
let n = Int(self.view.frame.size.width) / 90 //check how many buttons can fit in the screen
let buttonsPerRow = n
let horizontalSpace: CGFloat = 80
let verticalSpace: CGFloat = 80
// Create the alignment points
var points = [CGPointZero]
var direction: CGFloat = 1
for i in 1..<buttonCount {
let previousPoint = points[i-1]
let point: CGPoint
if i % buttonsPerRow == 0 {
direction *= -1
point = CGPointMake(previousPoint.x, previousPoint.y + verticalSpace)
} else {
point = CGPointMake(previousPoint.x + direction * horizontalSpace, previousPoint.y)
}
points.append(point)
}
// Make the buttons
var containerWidth: CGFloat = 0
var containerHeight: CGFloat = 0
for (index, point) in points.enumerate() {
let button = UIButton(frame: CGRectMake(point.x, point.y, 60, 60))
button.setTitle("Button \(index)", forState: .Normal)
button.setTitleColor(button.tintColor, forState: .Normal)
button.layer.cornerRadius = 30
button.layer.borderColor = UIColor .redColor().CGColor
button.layer.borderWidth = 1
buttonContainerView.addSubview(button)
// Determine size needed in the container to show all button
if button.frame.maxX > containerWidth {
containerWidth = button.frame.maxX
}
if button.frame.maxY > containerHeight {
containerHeight = button.frame.maxY
}
let myBezierPath = UIBezierPath()
myBezierPath.moveToPoint(CGPointMake(point.x + 60, point.y + 30))
myBezierPath.addLineToPoint(CGPointMake(point.x + 80, point.y + 30))
let shapeLayer = CAShapeLayer()
shapeLayer.path = myBezierPath .CGPath
shapeLayer.strokeColor = UIColor.blueColor().CGColor
shapeLayer.lineWidth = 2
shapeLayer.fillColor = UIColor.clearColor().CGColor
buttonContainerView.layer.addSublayer(shapeLayer)
}
// Optional: draw the alignment points and give the container view a background color
// so it's easier to visualize
for _ in points {
for (index, point) in points.enumerate() {
let circleLabel = UILabel(frame: CGRectMake(point.x, point.y, 11, 11))
circleLabel.layer.cornerRadius = 5.5
circleLabel.text = String(index + 1)
circleLabel.textAlignment = NSTextAlignment.Center
circleLabel.font = circleLabel.font.fontWithSize(8)
buttonContainerView.addSubview(circleLabel)
}
}
// buttonContainerView.backgroundColor = UIColor.lightGrayColor()
// Center the containerView on the screen
buttonContainerView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(buttonContainerView)
let c1 = NSLayoutConstraint(item: buttonContainerView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1, constant: 0)
let c2 = NSLayoutConstraint(item: buttonContainerView, attribute: .CenterY, relatedBy: .Equal, toItem: self.view, attribute: .CenterY, multiplier: 1, constant: 0)
let c3 = NSLayoutConstraint(item: buttonContainerView, attribute: .Width, relatedBy: .Equal , toItem: nil, attribute: .Width, multiplier: 0, constant: containerWidth)
let c4 = NSLayoutConstraint(item: buttonContainerView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 0, constant: containerHeight)
NSLayoutConstraint.activateConstraints([c1, c2, c3, c4])
}
}

Answer 1

I have also tried this which seems to be working now, but I'm open to suggestions
for i in 1..<buttonCount {
let previousPoint = points[i-1]
let point: CGPoint
if i % buttonsPerRow == 0 {
direction *= -1
point = CGPointMake(previousPoint.x, previousPoint.y + verticalSpace)
let lineView = UIView (frame: CGRectMake(previousPoint.x + 30, previousPoint.y + lineVerticalSpace, 1, 20))
lineView.layer.borderColor = UIColor .blueColor().CGColor
lineView.layer.borderWidth = 3
buttonContainerView.addSubview(lineView)
} else {
point = CGPointMake(previousPoint.x + direction * horizontalSpace, previousPoint.y)
}
points.append(point)
// print(direction)
if direction == -1 {
let lineView = UIView (frame: CGRectMake(previousPoint.x + (direction * lineHorizontalSpace + 40), point.y + 30, 20, 1))
lineView.layer.borderColor = UIColor .redColor().CGColor
lineView.layer.borderWidth = 3
buttonContainerView.addSubview(lineView)
}
else {
let lineView = UIView (frame: CGRectMake(previousPoint.x + direction * lineHorizontalSpace, point.y + 30, 20, 1))
lineView.layer.borderColor = UIColor .redColor().CGColor
lineView.layer.borderWidth = 3
buttonContainerView.addSubview(lineView)
}
}
Which results in this: