宽度减小时自动垂直对齐

Question

当容器的宽度为 640px 时，我有三个按钮如下对齐：

UIButton 1 <30px> UIButton 2 <30px> UIButton 3

当宽度减小到 320px 时，我想将第三个按钮放到下一行，如下所示：

UIButton 1 <30px> UIButton 2
UIButton 3

让我知道这是否可以使用自动布局完成而无需创建约束的出口。

Answer 1

您必须覆盖 layoutSubviews 并手动重新计算每个视图的 setFrame 属性。

我找到了这个blog post with example on github

Answer 2

最终使用了带有左对齐垂直流布局的集合视图。它可能看起来有点矫枉过正，但效果很好。

Answer 3

因为没有关于 how/where 的任何规范来创建这样的约束，所以我会这样做。

这是我的一些 NSLayoutConstraint Extension 快速创建约束（适用于 iOS 9 及更高版本）。

我没有使用 StoryBoards/IB 所以这是 Swift (2.0) 中的快速代码解决方案：

class SomeViewController: UIViewController {

    private let button1 = UIButton(type: UIButtonType.System)
    private let button2 = UIButton(type: UIButtonType.System)
    private let button3 = UIButton(type: UIButtonType.System)

    private var buttonArray: [UIButton] { return [self.button1, self.button2, self.button3] }

    private var constraintsForWideWidth: [NSLayoutConstraint] = []
    private var constraintsForShortWidth: [NSLayoutConstraint] = []

    override func viewDidLoad() {

        super.viewDidLoad()

        self.button1.translatesAutoresizingMaskIntoConstraints = false
        self.button2.translatesAutoresizingMaskIntoConstraints = false
        self.button2.translatesAutoresizingMaskIntoConstraints = false

        // set your buttons somewhere !!!

        self.view.addSubview(self.button1)
        self.view.addSubview(self.button2)
        self.view.addSubview(self.button3)

        self.setupConstraints()
    }

    private func setupConstraints() {

        // points are doubled px on retina display
        // setup the width and/or height as you would like
        // for this example I'll set them with some static numbers

        for button in self.buttonArray {

            NSLayoutConstraint.with(button.widthAnchor == 80)
            NSLayoutConstraint.with(button.heightAnchor == 20)
        }

        NSLayoutConstraint.with(self.button2.leftAnchor == self.button1.rightAnchor, constant: 15)
        NSLayoutConstraint.with(self.button2.centerYAnchor == self.button1.centerYAnchor)

        self.constraintsForWideWidth.append(NSLayoutConstraint.with(self.button3.leftAnchor == self.button2.rightAnchor, constant: 15))
        self.constraintsForWideWidth.append(NSLayoutConstraint.with(self.button3.centerYAnchor == self.button2.centerYAnchor))

        self.constraintsForShortWidth.append(NSLayoutConstraint.with(self.button3.topAnchor == self.button1.bottomAnchor, active: false))
        self.constraintsForShortWidth.append(NSLayoutConstraint.with(self.button3.centerXAnchor == self.button1.centerXAnchor, active: false))
    }

    func someFunctionThatExecutesWhenTheSizeChanges() {

        // deactivate both, because we want less code later
        NSLayoutConstraint.deactivateConstraints(self.constraintsForShortWidth)
        NSLayoutConstraint.deactivateConstraints(self.constraintsForWideWidth)
        // 640 px are 320 pt
        if self.view.frame.width == 320 {

            NSLayoutConstraint.activateConstraints(self.constraintsForWideWidth)

        } else if self.view.frame.width == 160 {

            NSLayoutConstraint.activateConstraints(self.constraintsForShortWidth)
        }

        self.view.layoutIfNeeded()
    }
}

不要害怕代码，代码不多，真的不难理解。 :) 希望对您有所帮助。

宽度减小时自动垂直对齐

Auto align vertically when width decreases

ios

autolayout

nslayoutconstraint