iOS如何通过PureLayout集中两个视图

Question

我想将UIImageView和UILabel放在中心，如下图所示。 我用一个容器来容纳UIImageView和UILabel，但容器不适合UIImageView和UILabel的宽度。所以我需要设置容器的宽度。有没有任何方法可以解决问题而无需设置宽度或计算视图的宽度？这是图片：

Answer 1

有四种观点在起作用：

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

视图位于以下层次结构中：

1. 外观
   1. 容器视图
      1. 图片视图
      2. 标签视图

我假设外部视图从其他约束中获取其宽度和高度。

我从您提供的图片中看到的图像比标签高，请记住遵循约束可以达到您想要的效果：

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

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的{​​{1}}变为0。

Answer 3

这是快速版本：

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)