Question

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

UIButton 1 ＆lt; 30px＆gt; UIButton 2 ＆lt; 30px＆gt; UIButton 3

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

UIButton 1 ＆lt; 30px＆gt; UIButton 2
UIButton 3

如果可以使用autolayout 来完成此操作，请不要创建约束的出口。

Answer 1

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

我在blog post

上找到了这个github示例

Answer 2

使用具有左对齐垂直流布局的集合视图结束。这可能看起来有点矫枉过正，但效果很好。

Answer 3

因为没有关于如何/在何处创建此类限制的任何规范，我会这样做。

我的一点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()
    }
}

不要害怕代码，它不是那么多，真的不那么难理解。 :)希望能以某种方式帮助你。

宽度减小时自动垂直对齐

3 个答案: