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: