iOS如何通过PureLayout使两个视图居中显示

Question

我希望将我的UIImageView和UILabel像下面的图像一样居中。 我使用一个容器来包含UIImageView和UILabel，但是该容器不适合UIImageView和UILabel的宽度。因此，我需要设置容器的宽度。是否有方法可以解决问题，而无需设置宽度或计算视图的宽度？以下是图片：

- Kevin Hawk

Answer 1

这里有四个视图：

1. 外部或主视图
2. 容器视图（包含图像和标签）
3. 图像视图
4. 标签视图

这些视图按以下层次结构排列：

1. 外部视图
   1. 容器视图
      1. 图像视图
      2. 标签视图

我假设外部视图的宽度和高度由其他约束条件确定。

根据你提供的图片，我看到图像比标签更高，考虑到这一点，下面的约束条件可以实现你想要的效果：

1. 将容器视图的X轴与外部视图对齐
2. 将容器视图的Y轴与外部视图对齐
3. 将图像视图的顶部、左侧和底部边缘固定到容器视图上
4. 将标签的右边缘固定到容器视图上
5. 将标签的Y轴与容器视图对齐。
6. 设置图像和标签视图之间的水平距离。

- Abdullah

---

这样的评论让在stackoverflow上回答问题值得，继续保持。 - Abdullah

在我的情况下，它有效！我对外部视图施加了宽度约束以尊重其父级，这是因为标签文本是动态的，可能会溢出。 - Jonathan García

将标签的Y轴与容器视图对齐，难道不应该是X轴吗？ - Khurram Shehzad

Answer 2

[self.button autoPinEdgeToSuperviewEdge:ALEdgeLeft withInset:15];
[self.button autoPinEdgeToSuperviewEdge:ALEdgeRight withInset:15];
[self.button autoSetDimension:ALDimensionHeight toSize:46];
[self.button autoAlignAxis:ALAxisVertical toSameAxisOfView:self.contentView];

[self.containerView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];
[self.containerView autoAlignAxisToSuperviewAxis:ALAxisVertical];

[self.iconImageView autoPinEdge:ALEdgeLeft toEdge:ALEdgeLeft ofView:self.containerView];
[self.iconImageView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];

[self.label autoPinEdge:ALEdgeRight toEdge:ALEdgeRight ofView:self.containerView];
[self.label autoAlignAxisToSuperviewAxis:ALAxisHorizontal];

[self.label autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.iconImageView withOffset:10];

感谢@abdullah。他让我想明白了。我忘记了要“将标签的右边缘固定到容器视图”，所以containerView的width变成了0。

- Kevin Hawk

Answer 3

这是Swift版本：

以下是Swift代码：

button.autoPinEdge(toSuperviewEdge: .left, withInset: 15)
button.autoPinEdge(toSuperviewEdge: .right, withInset: 15)
button.autoSetDimension(.height, toSize: 46)
button.autoAlignAxis(.vertical, toSameAxisOf:  contentView)

containerView.autoAlignAxis(toSuperviewAxis: .horizontal)
containerView.autoAlignAxis(toSuperviewAxis: .vertical)

iconImageView.autoPinEdge(.left, to: .left, of: containerView)
iconImageView.autoAlignAxis(toSuperviewAxis: .horizontal)

label.autoPinEdge(.right, to: .right, of: containerView)
label.autoAlignAxis(toSuperviewAxis: .horizontal)
label.autoPinEdge(.left, to: .right, of: iconImageView, withOffset: 10.0)

- Yalcin Ozdemir