如何使用"自动布局可视格式"将两个视图放在同一位置?

all*_*nli -1 ios autolayout swift ios-autolayout

我想在Swift中使用"自动布局可视化格式"在同一位置放置两个视图,我该如何以优雅的方式做到这一点?

我成功使用了NSLayoutConstraint,但我希望我仍然可以使用可视化格式找到一种优雅的方式.

我的代码使用NSLayoutConstraint:

NSLayoutConstraint(item: greenView, attribute: .Left, relatedBy: .Equal, toItem: redView, attribute: .Left, multiplier: 1.0, constant: 0).active = true
NSLayoutConstraint(item: greenView, attribute: .Top, relatedBy: .Equal, toItem: redView, attribute: .Top, multiplier: 1.0, constant: 0).active = true
NSLayoutConstraint(item: greenView, attribute: .Right, relatedBy: .Equal, toItem: redView, attribute: .Right, multiplier: 1.0, constant: 0).active = true
NSLayoutConstraint(item: greenView, attribute: .Bottom, relatedBy: .Equal, toItem: redView, attribute: .Bottom, multiplier: 1.0, constant: 0).active = true
Run Code Online (Sandbox Code Playgroud)

小智 7

我会回应vacawama在他关于使用布局锚点的优秀答案中所说的话.它可能与您使用本机API一样清晰和优雅,但请注意它需要iOS 9及更高版本.

出于代码组织的目的,我建议您不要寻找更复杂的代码,而是将代码组织成方法和/或扩展,例如:

extension UIView {

    func constraintsAligningAllEdges(toView view2: UIView) -> [NSLayoutConstraint] {

        return [ topAnchor.constraintEqualToAnchor(view2.topAnchor),
                 bottomAnchor.constraintEqualToAnchor(view2.bottomAnchor),
                 leadingAnchor.constraintEqualToAnchor(view2.leadingAnchor),
                 trailingAnchor.constraintEqualToAnchor(view2.trailingAnchor) ]
    }
}
Run Code Online (Sandbox Code Playgroud)

使用它看起来像这样:

NSLayoutConstraint.activateConstraints(greenView.constraintsAligningAllEdges(toView: redView))
Run Code Online (Sandbox Code Playgroud)

...或者可能使它成为NSLayoutConstraint的类函数扩展.

视觉格式语言的主题上,vacawama也提出了一个非常有趣的布局选项.这是实现相同目标的另一种可能方式:

let views = ["greenView" : greenView, "redView" : redView]

NSLayoutConstraint.activateConstraints(
    NSLayoutConstraint.constraintsWithVisualFormat("H:[greenView]-(0@1)-[redView]", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: views) +
    NSLayoutConstraint.constraintsWithVisualFormat("V:[greenView]-(0@1)-[redView]", options: [.AlignAllLeading, .AlignAllTrailing], metrics: nil, views: views)
)
Run Code Online (Sandbox Code Playgroud)

我在这里所做的不是引入额外的视图,而是引入了两个无关的限制,一个在绿色底部和红色顶部之间,另一个在绿色尾随和顶部前导之间.1然而,它们都具有最低优先级,因此您通常会有其他约束来决定任一视图的大小/位置,因此它们不会造成任何伤害.

这有点优雅吗?我不知道,但我个人认为布局锚对我来说更有意义,而像SnapKit这样的第三方框架也是不错的选择.