[英]How to programmatically place two labels in center side by side with spacing using auto layout in ios swift?
I am very new to swift and IOS and I want to place two labels side by side horizontally center programmatically.我对 swift 和 IOS 非常陌生,我想以编程方式将两个标签并排水平居中放置。 Below is my code
下面是我的代码
let secondLabel : UILabel = {
let label = UILabel()
label.text = "1234"
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = UIColor.blue
return label
}()
let thirdLabel : UILabel = {
let label = UILabel()
label.text = "5678"
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = UIColor.red
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setupLayout()
}
private func setupLayout(){
view.addSubview(secondLabel)
//secondLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
secondLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
view.addSubview(thirdLabel)
//thirdLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
thirdLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
self.view.addConstraint(NSLayoutConstraint(
item: thirdLabel,
attribute: .left,
relatedBy: .equal,
toItem: secondLabel,
attribute: .right,
multiplier: 1.0,
constant: 10
))
}
But this is how it looks now但这就是它现在的样子
Please help me to move the labels to the center请帮我把标签移到中心
You can use UIStackView to solve your problem.您可以使用 UIStackView 来解决您的问题。 Please update the following code in your setupLayout method.
请在您的 setupLayout 方法中更新以下代码。
private func setupLayout(){
let stackview = UIStackView()
stackview.axis = .horizontal
stackview.spacing = 10
stackview.translatesAutoresizingMaskIntoConstraints = false
stackview.addArrangedSubview(secondLabel)
secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
stackview.addArrangedSubview(thirdLabel)
thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
self.view.addSubview(stackview)
stackview.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
stackview.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}
While a UIStackView
is one way to go (and easier many times), there are also times that you want to do what you are trying.虽然
UIStackView
是一种方法(而且很多时候更容易),但有时您也想做您正在尝试的事情。 Truth is, you're almost there.事实是,你快到了。
private func setupLayout(){
view.addSubview(secondLabel)
secondLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: -55).isActive = true
secondLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
view.addSubview(thirdLabel)
thirdLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 55).isActive = true
thirdLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
}
Basically, it looks like you have two 100x100 UILabels that you want 10 points apart.基本上,看起来您有两个 100x100 UILabels,您希望它们相距 10 个点。 So:
所以:
centerXAnchor
constraints.centerXAnchor
约束中进行评论。 This will move both labels on top of each other, centered horizontally.constant
property to each constraint.constant
属性。 A negative value move to the left and a positive value moves to the right.Well UIStackView
will be the best option and @manikandan has answered properly.那么
UIStackView
将是最好的选择,@manikandan 已经正确回答了。
But if you are not a big fan of UIStackView
, you can achieve it using UIView
too.但是如果你不是
UIStackView
忠实粉丝,你也可以使用UIView
来实现它。 A bit more lines of code and it will work.多写几行代码就行了。
private func setupLayout() {
let sampleBackgroundView = UIView()
sampleBackgroundView.translatesAutoresizingMaskIntoConstraints = false
sampleBackgroundView.addSubview(secondLabel)
secondLabel.topAnchor.constraint(equalTo: secondLabel.superview!.topAnchor).isActive = true
secondLabel.bottomAnchor.constraint(equalTo: secondLabel.superview!.bottomAnchor).isActive = true
secondLabel.leadingAnchor.constraint(equalTo: secondLabel.superview!.leadingAnchor, constant: 10).isActive = true
secondLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
secondLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
sampleBackgroundView.addSubview(thirdLabel)
thirdLabel.topAnchor.constraint(equalTo: secondLabel.superview!.topAnchor).isActive = true
thirdLabel.bottomAnchor.constraint(equalTo: secondLabel.superview!.bottomAnchor).isActive = true
thirdLabel.trailingAnchor.constraint(equalTo: secondLabel.superview!.trailingAnchor, constant: 10).isActive = true
thirdLabel.widthAnchor.constraint(equalToConstant: 100).isActive = true
thirdLabel.heightAnchor.constraint(equalToConstant: 100).isActive = true
sampleBackgroundView.addConstraint(NSLayoutConstraint(
item: thirdLabel,
attribute: .left,
relatedBy: .equal,
toItem: secondLabel,
attribute: .right,
multiplier: 1.0,
constant: 10
))
view.addSubview(sampleBackgroundView)
sampleBackgroundView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
sampleBackgroundView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
}
Please go through these solutions and you will have a better idea to implement constraints programmatically:请仔细阅读这些解决方案,您将有更好的想法以编程方式实现约束:
There're two options for you to work on that (or maybe more).您有两种选择(或更多)。
Simple explanation hopes this helps.简单的解释希望这会有所帮助。
Using a container view (either UIView
, or UIStackView
) might be the best approach, as it would allow you to easier build other UI components around the group of two labels.使用容器视图(
UIView
或UIStackView
)可能是最好的方法,因为它可以让您更轻松地围绕两个标签组构建其他 UI 组件。 But if you don't need this flexibility, or want to avoid using an extra view, you can achieve the desired layout quite nicely via layout anchors:但是如果你不需要这种灵活性,或者想避免使用额外的视图,你可以通过布局锚点很好地实现所需的布局:
NSLayoutConstraint.activate([
// set the size
secondLabel.widthAnchor.constraint(equalToConstant: 100),
secondLabel.heightAnchor.constraint(equalToConstant: 100),
// center vertically in the parent view
secondLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
// align to the left of the parent view center
secondLabel.rightAnchor.constraint(equalTo: view.centerXAnchor, constant: -5),
// set the size
thirdLabel.widthAnchor.constraint(equalToConstant: 100),
thirdLabel.heightAnchor.constraint(equalToConstant: 100),
// center vertically in the parent view
thirdLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
// align to the right of the parent view center
thirdLabel.leftAnchor.constraint(equalTo: view.centerXAnchor, constant: 5)
])
The spacing between the two is automatically achieved via the offsets from the X center.两者之间的间距是通过与 X 中心的偏移自动实现的。
As a general note, Apple recommends activating constraints in batches , by using activate()
, for performance reasons:作为一般说明,出于性能原因,Apple 建议使用
activate()
批量激活约束:
The effect of this method is the same as setting the isActive property of each constraint to true.
该方法的效果与将每个约束的isActive属性设置为true是一样的。 Typically, using this method is more efficient than activating each constraint individually.
通常,使用此方法比单独激活每个约束更有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.