自动居中以编程方式创建的 UIButtons

Question

无论我有多少视图，我如何确保我的视图（在这种情况下为 UIButton ）始终居中？ （例如看图片）

我正在循环中以编程方式制作它们。但是这种方式只有在有 4 个按钮时才有效。

var i = 220

for button in optionButtons {
    button.frame = CGRectMake(CGFloat(i), 280, 150, 150)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.addTarget(self, action: "pressedOption:", forControlEvents: .TouchUpInside)
    dispatch_async(dispatch_get_main_queue(), {
        self.view.addSubview(button)
    })
    CGFloat(i += 150)
}

但这只有在有 4 个时才有效。我如何用少于 4 个来完成这项工作？

Answer 1

您可以通过编程方式创建自动布局格式字符串并向视图添加约束。

let button1 = UIButton()
button1.translatesAutoresizingMaskIntoConstraints = false
button1.setTitle("button 1", forState: UIControlState.Normal)
button1.backgroundColor = UIColor.redColor()

let button2 = UIButton()
button2.translatesAutoresizingMaskIntoConstraints = false
button2.setTitle("button 2", forState: UIControlState.Normal)
button2.backgroundColor = UIColor.redColor()

let button3 = UIButton()
button3.translatesAutoresizingMaskIntoConstraints = false
button3.setTitle("button 3", forState: UIControlState.Normal)
button3.backgroundColor = UIColor.redColor()

let buttons = [button1, button2, button3]
let spaceBeetweenButtons = NSNumber(int: 10)
let buttonWidth = NSNumber(int: 80)
let buttonHeight = NSNumber(int: 35)

let containerWidth = NSNumber(integer: (buttons.count * buttonWidth.integerValue) + (buttons.count - 1) * spaceBeetweenButtons.integerValue)
let containerView = UIView()
containerView.translatesAutoresizingMaskIntoConstraints = false

var views = [String : AnyObject]()
let metrics = ["buttonWidth" : buttonWidth, "buttonHeight" : buttonHeight, "spaceBeetweenButtons" : spaceBeetweenButtons, "containerWidth" : containerWidth]
var format = "H:|-0-"

for var i = 0; i < buttons.count; i++
{
    views["button\(i)"] = buttons[i]
    format += "[button\(i)(==buttonWidth)]"
    if i != buttons.count - 1
    {
        format += "-spaceBeetweenButtons-"
    }
    else
    {
        format += "-0-|"
    }
    containerView.addSubview(buttons[i])
    containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[button\(i)(==buttonHeight)]", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: views))
}

containerView.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat(format, options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: views))

self.view.addSubview(containerView)
self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[containerView(==buttonHeight)]", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: ["containerView" : containerView]))
self.view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:[containerView(==containerWidth)]", options: NSLayoutFormatOptions.DirectionLeftToRight, metrics: metrics, views: ["containerView" : containerView]))
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1.0, constant: 0.0))
self.view.addConstraint(NSLayoutConstraint(item: containerView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterY, multiplier: 1.0, constant: 0.0))

结果：

Answer 2

这是我的解决方案：

构建一个包含所有按钮的 superView 像这样。

接下来，您只需要将 superView 居中即可。

更新：如何自动获取 superView 的大小？

首先，设置superView的位置很容易。

然后，如果您的按钮的大小和它们之间的空间是固定的。 superView的宽高可以由childView决定。

随时问我。谢谢！