ios - big - Conexión de UIButtons dibujando una línea

ionic p

Question

Necesito conectar esos botones con una línea, pero tengo problemas, como puede ver en la captura de pantalla. Necesito la última línea para ir vertical (círculos verdes). ¿Alguna sugerencia?

aquí está el código:

 @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

También probé esto que parece estar funcionando ahora, pero estoy abierto a sugerencias

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

Lo que resulta en esto: