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

Posted 2023-03-21

【中文标题】自动居中以编程方式创建的 UIButtons

【英文标题】：auto center programmatically created UIButtons

【发布时间】：2015-10-12 08:54:26

【问题描述】：

无论我有多少视图，我如何确保我的视图（在这种情况下为 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 个来完成这项工作？

【问题讨论】：

为什么不只是一个 UIStackView？

【参考方案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))

结果：

【讨论】：

不错！这正是我正在寻找的。我想念的一件事，如何将“容器”垂直居中于屏幕中心？

【参考方案2】：

这是我的解决方案：

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

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

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

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

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

随时问我。谢谢！

【讨论】：

但我如何（自动）展开该视图以显示所有按钮？

以编程方式添加自动布局约束 -> 第一个按钮开始位置到最后一个按钮结束位置是容器视图的宽度。