[英]how can I center two elements (without knowing their width) next to each other in Swift?
In my swift
app I have a view with a UILabel and a UIButton. 在我的
swift
应用程序中,我有一个带有UILabel和UIButton的视图。 In the storyboard it looks like this: 在情节提要中,它看起来像这样:
I know I can group those two elements and then put constraints on that group, but that will only work when the UILabel
has constant width. 我知道可以对这两个元素进行分组,然后在该组上施加约束,但这仅在
UILabel
具有恒定宽度时才有效。
I want to display this group like this: 我想这样显示该组:
| label X |
or - when the label is longer, like this: 或-标签较长时,如下所示:
| longerlabel X |
How should I apply constraints to get that effect? 我应该如何应用约束以获得这种效果?
At first I considered UILayoutGuides, but it's much easier than that, as long as you are willing to code a few things. 刚开始我考虑过UILayoutGuides,但是只要您愿意编写一些东西,它就比这容易得多。 Use UILayoutAnchors, centerX, and a multiplier:
使用UILayoutAnchors,centerX和乘数:
myLabel.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.33)
myButton.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.667)
Of course, you need to layout more than this (vertical position in particular) and yes, you can use UILayoutGuides for equal spacing . 当然,您需要布置的空间不止于此(尤其是垂直位置),是的,您可以使用UILayoutGuides获得相等的间距 。 But as long as you are using auto layout and understand how to set up IBOutlets for the things you need to code for that way, this will work.
但是,只要您正在使用自动布局,并且了解如何为您需要以这种方式编写代码的东西设置IBOutlets,就可以使用。
BTW, you can be exact, as in reference the superview in code to center it perfectly.) 顺便说一句,您可以确切地说,就像参考代码中的超级视图以使其完美居中一样。)
you should use a regular UIView
as a container. 您应该使用常规的
UIView
作为容器。 you could set your views up in code like this: 您可以使用以下代码设置视图:
// configure the content
let labelText = "Label"
let buttonTitle = "X"
// setup the views
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.text = labelText
let button = UIButton(type: .system)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle(buttonTitle, for: .normal)
button.setContentCompressionResistancePriority(label.contentCompressionResistancePriority(for: .horizontal) + 1, for: .horizontal)
let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
container.layer.borderColor = UIColor.lightGray.cgColor
container.layer.borderWidth = 1
// add the views
container.addSubview(label)
container.addSubview(button)
view.addSubview(container)
// create the container constraints
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "|[lbl]-[btn]|", options: [.alignAllTop, .alignAllBottom], metrics: nil, views: ["lbl": label, "btn": button]))
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|[btn]|", options: [], metrics: nil, views: ["btn": button]))
// center the container
NSLayoutConstraint(item: container, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
NSLayoutConstraint(item: container, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0).isActive = true
// make sure the container does not extend the view's width
NSLayoutConstraint(item: container, attribute: .leading, relatedBy: .greaterThanOrEqual, toItem: view, attribute: .leading, multiplier: 1, constant: 20).isActive = true
feel free to ask if anything is unclear! 随时询问是否不清楚! this is the result btw:
结果是顺便说一句:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.