通过画一条线来连接UIButtons

我需要连接这些button,但有问题,你可以在截图中看到。 我需要最后一行垂直(绿色圆圈)。 有什么build议么?

这里是代码:

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

在这里输入图像说明

我也尝试过这似乎正在工作,但我愿意提出build议

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

结果如下:

在这里输入图像说明