Question

是否有一种简单的方法可以以编程方式创建UIButtons并在给定路径中显示它们，如：

UIBUTTON -> UIBUTTON -> UIBUTTON
                            |
                            v
UIBUTTON <- UIBUTTON <- UIBUTTON
|
v
UIBUTTON -> UIBUTTON -> UNBUTTON


  for i  in 0...array.count - 1 {

            let button = UIButton(frame: CGRectMake(CGFloat(i) * 74 + 10, 5, 64, 64))

            // some other stuff
            //.....


            containerView.addSubview(label)

但这只会在一个方向上永远（x）....

修改

我已根据您的建议设法添加按钮。我现在有另一个问题，我已经部分解决了，但我很感激你的意见。

我需要将这些按钮与一行连接，但是您可以在屏幕截图中看到问题。我需要最后一行去垂直（绿色圆圈）。有什么建议吗？

这是代码：

 @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

这是一个想法：创建一个网格作为按钮的对齐点。将所有按钮添加到容器视图中，以便您可以一次移动/居中它们。

func drawButtons() {
    let containerView = UIView()
    let buttonCount = 12
    let buttonsPerRow = 3
    let horizontalSpace: CGFloat = 100
    let verticalSpace: CGFloat = 50

    // 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, 0, 0))
        button.setTitle("Button \(index)", forState: .Normal)
        button.setTitleColor(button.tintColor, forState: .Normal)
        button.sizeToFit()

        containerView.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
        }
    }

    // Optional: draw the alignment points and give the container view a background color
    // so it's easier to visualize
    for point in points {
        let circleView = UIView(frame: CGRectMake(point.x, point.y, 5, 5))
        circleView.layer.cornerRadius = 2.5
        circleView.layer.opacity = 0.5
        circleView.backgroundColor = UIColor.redColor()
        containerView.addSubview(circleView)
    }
    containerView.backgroundColor = UIColor.lightGrayColor()


    // Center the containerView on the screen
    containerView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(containerView)

    let c1 = NSLayoutConstraint(item: containerView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1, constant: 0)
    let c2 = NSLayoutConstraint(item: containerView, attribute: .CenterY, relatedBy: .Equal, toItem: self.view, attribute: .CenterY, multiplier: 1, constant: 0)
    let c3 = NSLayoutConstraint(item: containerView, attribute: .Width, relatedBy: .Equal , toItem: nil, attribute: .Width, multiplier: 0, constant: containerWidth)
    let c4 = NSLayoutConstraint(item: containerView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .Height, multiplier: 0, constant: containerHeight)
    NSLayoutConstraint.activateConstraints([c1, c2, c3, c4])
}

结果（添加红点和灰色视图以辅助可视化）：

如何在路径中显示UIButtons

1 个答案: