UIButtonsを線で描画して接続する

Question

これらのボタンを線で接続する必要がありますが、スクリーンショットのように問題があります。私は最後の行が垂直に行く必要があります（緑色の円）。助言がありますか？

ここのコードです：

@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

私は今も働いているように思われ、これを試してみましたが、私は提案につながる

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) 

      } 

     } 

に開いているが、これは：