[英]How to center horizontally 2 or more UIViews inside a UIView container using autolayout programmatically in Swift 3.0
I'm trying to center 2 or more UIView
s horizontally inside a UIView
eg 我试图在
UIView
水平居中2个或更多UIView
例如
| [UIView1] [UIView2] |
| [UIView1] [UIView2] [UIView3] |
or 要么
| [UIView1] [UIView2] [UIView3] [UIView4] |
I'm adding these constraints to all the views inside the container view 我将这些约束添加到容器视图中的所有视图
let horizontalConstraint = NSLayoutConstraint(item: views[N], attribute: .centerX, relatedBy: .equal, toItem: container, attribute: .centerX, multiplier: 1, constant: 0)
let verticalConstraint = NSLayoutConstraint(item: views[N], attribute: .bottom, relatedBy: .equal, toItem: container, attribute: .centerY, multiplier: 1, constant: 0)
let widthConstraint = NSLayoutConstraint(item: views[N], attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: width)
let heightConstraint = NSLayoutConstraint(item: views[N], attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: height)
And I'm adding a spacing constraints between each view 我在每个视图之间添加了间距约束
let spacingConstraint = NSLayoutConstraint(item: views[N], attribute: .left, relatedBy: .equal, toItem: views[N+1], attribute: .right, multiplier: 1, constant: 10)
The above constraints horizontally center all views. 上述约束水平居中所有视图。
If I change the priority of the horizontalConstraint
to 750 then I'm getting something like this 如果我将
horizontalConstraint
的优先级更改为750,那么我会得到类似的东西
As you can see, when I have an odd number of views these will be horizontally aligned properly, but this is not the case when having an even number of views. 正如您所看到的,当我有奇数个视图时,它们将被正确地水平对齐,但是当具有偶数个视图时则不是这种情况。
How can I center horizontally any even number of views inside and another view programmatically without using another container or spacing views? 如何在不使用其他容器或间隔视图的情况下,以编程方式将任意偶数个视图内部和另一个视图水平居中?
You should use UIStackView
. 你应该使用
UIStackView
。 If you don't know how to use UIStackView
you can check out this tutorial. 如果您不知道如何使用
UIStackView
,可以查看本教程。
Here's how stack views should look alike. 这是堆栈视图应该看起来相似的方式。
Keep in mind that in attributes inspector of Stack View you need to enter Axis. 请记住,在Stack View的属性检查器中,您需要输入Axis。
Anyway, if you still want to add constraints programmatically, I recommend using SnapKit . 无论如何,如果您仍想以编程方式添加约束,我建议使用SnapKit 。
Here's an example how to use it: 以下是如何使用它的示例:
let box = UIView()
let container = UIView()
container.addSubview(box)
box.snp.makeConstraints { (make) -> Void in
make.size.equalTo(50)
make.center.equalTo(container)
}
As you can see, there is much less code with SnapKit. 正如您所看到的,使用SnapKit的代码要少得多。
So I was able to accomplish this with the help of the UIStackView
as recommended by @Sivajee Battina and @Nedim. 所以,我能够与的帮助来完成这个
UIStackView
所推荐的@Sivajee Battina和@Nedim。 I created a UIStackView
property and the setup the views as follow 我创建了一个
UIStackView
属性,并按如下方式设置视图
self.view.addSubview(container)
labelContainer.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(stackContainer)
stackContainer.translatesAutoresizingMaskIntoConstraints = false
stackContainer.axis = .horizontal
stackContainer.distribution = .equalSpacing
stackContainer.alignment = .bottom
stackContainer.spacing = spacing
Then I added the constraint as follow 然后我添加了约束如下
container.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 10.0).isActive = true
container.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10.0).isActive = true
container.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -10.0).isActive = true
container.widthAnchor.constraint(equalToConstant: containerWidth).isActive = true
container.heightAnchor.constraint(equalToConstant: containerHeight).isActive = true
stackContainer.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
stackContainer.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true
for view in self.views {
view.widthAnchor.constraint(equalToConstant: viewWidth).isActive = true
view.heightAnchor.constraint(equalToConstant: viewHeight).isActive = true
}
Resulting in the solution!! 导致解决方案!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.