iOS 如何通过 PureLayout 将两个视图居中
iOS how to center two view via PureLayout
我想将我的 UIImageView 和 UILabel 居中,如下图所示。
我用了一个容器来包含 UIImageView 和 UILabel,但是这个容器不适合 UIImageView 的宽度,UILabel.So 我需要设置 container.Is 的宽度 有什么方法可以解决不设置宽度的问题或计算视图的宽度?这是图片:
有四种视图在起作用:
- 外观或主视图
- 容器视图(包含图像和标签)
- 图像视图
- 标签视图
视图在以下层次结构中:
- 外观
- 容器视图
- 图像视图
- 标签视图
我假设外部视图的宽度和高度来自其他约束。
我从您提供的图像中看到图像比标签高,请记住以下约束可以实现您想要的:
- 将容器视图的 X 轴与外部视图对齐
- 将容器视图的 Y 轴与外部视图对齐
- 将图像视图的顶部、左侧和底部边缘固定到容器视图
- 将标签的右边缘固定到容器视图
- 将标签的 Y 轴与容器视图对齐。
- 设置图像和标签视图之间的水平距离。
[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。他清除了我的思绪。我忘记了"Pin right edge of label to container view",所以containerView
的width
变成了0.
这是 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)
我想将我的 UIImageView 和 UILabel 居中,如下图所示。 我用了一个容器来包含 UIImageView 和 UILabel,但是这个容器不适合 UIImageView 的宽度,UILabel.So 我需要设置 container.Is 的宽度 有什么方法可以解决不设置宽度的问题或计算视图的宽度?这是图片:
有四种视图在起作用:
- 外观或主视图
- 容器视图(包含图像和标签)
- 图像视图
- 标签视图
视图在以下层次结构中:
- 外观
- 容器视图
- 图像视图
- 标签视图
- 容器视图
我假设外部视图的宽度和高度来自其他约束。
我从您提供的图像中看到图像比标签高,请记住以下约束可以实现您想要的:
- 将容器视图的 X 轴与外部视图对齐
- 将容器视图的 Y 轴与外部视图对齐
- 将图像视图的顶部、左侧和底部边缘固定到容器视图
- 将标签的右边缘固定到容器视图
- 将标签的 Y 轴与容器视图对齐。
- 设置图像和标签视图之间的水平距离。
[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。他清除了我的思绪。我忘记了"Pin right edge of label to container view",所以containerView
的width
变成了0.
这是 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)