在UIStackView中垂直居中放置三个UILabel

时间:2018-12-05 12:07:01

标签: ios swift uilabel uistackview

我在UILabels中有三个UIStackView。其中一个具有多行(最后一个),而其他仅具有一行。我希望它们在UIStackView内部居中,以便顶部和底部空间可以动态变化。我究竟做错了什么?

headingLabel.translatesAutoresizingMaskIntoConstraints = false
headingLabel.textAlignment = .center
subHeadingLabel.translatesAutoresizingMaskIntoConstraints = false
subHeadingLabel.textAlignment = .center
subHeadingLabel.numberOfLines = 0
bodyLabel.translatesAutoresizingMaskIntoConstraints = false
bodyLabel.textAlignment = .center
bodyLabel.numberOfLines = 0
bodyLabel.text = "My very very long text \n to make it multiline"
textStackView.axis = .vertical
textStackView.distribution = .fillProportionally
textStackView.alignment = .center
textStackView.translatesAutoresizingMaskIntoConstraints = false

textStackView.addArrangedSubview(headingLabel)
textStackView.addArrangedSubview(subHeadingLabel)
textStackView.addArrangedSubview(bodyLabel)

现在的样子:

enter image description here

应该如何:

enter image description here

编辑:我也尝试使用fillEqually,但是它没有任何改变。我还设置了UIStackView的顶部和底部锚点。我在这里想要实现的是,例如,UIStackView的高度为100,而所有三个标签的高度为40。应该将60个以上的空间平均分配,例如30-30分配到底部。

UIStackView的约束

myStackView.anchor(contentImageView.bottomAnchor, left: self.view.leftAnchor, bottom: self.view.bottomAnchor, right: self.view.rightAnchor, topConstant: 0, leftConstant: 0, bottomConstant: 0, rightConstant: 0, widthConstant: 0, heightConstant: 0)

一种解决方案: 我通过将UIStackView放在UIView内来解决它,而没有给UIStackView增高。仅将X和Y锚定在中心。它可以解决我的问题,但是我不确定这是否是正确的解决方案。

2 个答案:

答案 0 :(得分:0)

  

在这里我想要实现的是,例如,UIStackView的高度为100,而所有三个标签的高度为40。应该将60个以上的空间平均分配,例如30-30分布在底部和底部。

那不是堆栈视图的工作方式。如果要三个高度为40的标签居中,则只需执行此操作,而无需堆栈视图。或将堆栈视图高度设置为40并将其居中。

答案 1 :(得分:0)

UIStackView的角度来看,确保UIViewController的底部约束应大于等于零。因此,UIStackView的高度将根据其中的内容而增加。

尝试一下。

let myStackView = UIStackView()
view.addSubview(myStackView)
myStackView.translatesAutoresizingMaskIntoConstraints = false
myStackView.topAnchor.constraint(greaterThanOrEqualTo: view.topAnchor, constant: 0.0).isActive = true
myStackView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0.0).isActive = true
myStackView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: 0.0).isActive = true
myStackView.bottomAnchor.constraint(greaterThanOrEqualTo: view.bottomAnchor, constant: 0.0).isActive = true
myStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0).isActive = true
myStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 0.0).isActive = true

enter image description here