本文介绍了通过画一条线来连接UIButton的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我需要将这些按钮用一条线连接,但是有问题,如屏幕截图所示.我需要最后一行垂直(绿色圆圈).有什么建议吗?

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?

下面是代码:

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


}

推荐答案

我也尝试过此方法,该方法现在似乎可以使用,但我愿意接受建议

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)

            }

        }

这将导致以下结果:

这篇关于通过画一条线来连接UIButton的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 16:50
查看更多