iOS autolayout 使用 VFL 以编程方式实现

Question

我已经使用自动布局在 Storyboard中设计了我的 View ，但是我在使用 VFL 以编程方式实现它时遇到了一些问题。这个 View 在纵向上看起来像这样

三个 subview 按某种顺序垂直布局，在某些方法中，我们可以改变它们的顺序(即 [1,2,3] 到 [2,3,1])。 view1,view2,view3 都有一个固定的 width=100 和 height=100，view2 的中心等于它的 superview 的中心。当更改为横向模式时，三个 subview 的水平布局顺序与纵向布局相同，如下所示:

希望有人能帮我实现这个，感谢任何帮助!如果我没有清楚地描述我的问题，您可以在这里下载我的示例项目! https://github.com/SomnusLee1988/SamplePorject

Answer 1

由于您无法仅使用 VFL 设置所需的约束，这可能是一个解决方案:

var view1: UIView!
var view2: UIView!
var view3: UIView!

var variableConstraints = [NSLayoutConstraint]()

let metrics = ["width": 100, "height": 100]
var views: [String: AnyObject]!

override func viewDidLoad() {
    super.viewDidLoad()

    view1 = UIView()
    view1.backgroundColor = UIColor.redColor()
    view1.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(view1)

    view2 = UIView()
    view2.backgroundColor = UIColor.blueColor()
    view2.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(view2)

    view3 = UIView()
    view3.backgroundColor = UIColor.greenColor()
    view3.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(view3)

    views = ["v1": view1, "v2": view2, "v3": view3]

    setupFixedConstraints()
    setupVariableConstraintsForSize(nil)
}

private func setupFixedConstraints() {
    // width and height
    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("[v2(width)]", options: [], metrics: metrics, views: views))
    NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[v2(height)]", options: [], metrics: metrics, views: views))

    // center x and center y
    NSLayoutConstraint(item: view2, attribute: .CenterX, relatedBy: .Equal, toItem: view, attribute: .CenterX, multiplier: 1, constant: 0).active = true
    NSLayoutConstraint(item: view2, attribute: .CenterY, relatedBy: .Equal, toItem: view, attribute: .CenterY, multiplier: 1, constant: 0).active = true
}

private func setupVariableConstraintsForSize(size: CGSize?) {
    // remove existing constraints
    NSLayoutConstraint.deactivateConstraints(variableConstraints)
    variableConstraints.removeAll()

    let size = size ?? view.frame.size

    if size.width > size.height {
        // landscape
        variableConstraints += NSLayoutConstraint.constraintsWithVisualFormat("[v1(==v2)][v2][v3(==v2)]", options: [.AlignAllTop, .AlignAllBottom], metrics: metrics, views: views)
    } else {
        // portrait
        variableConstraints += NSLayoutConstraint.constraintsWithVisualFormat("V:[v1(==v2)][v2][v3(==v2)]", options: [.AlignAllLeading, .AlignAllTrailing], metrics: metrics, views: views)
    }

    // activate constraints
    NSLayoutConstraint.activateConstraints(variableConstraints)
}

override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    setupVariableConstraintsForSize(size)
    super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
}