Connecting UIButtons by drawing a line

问题

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


}

回答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:

来源：https://stackoverflow.com/questions/36295373/connecting-uibuttons-by-drawing-a-line