如何使标签的第一行位于另一个UIView的相同中心位置 [英] how to make the first line of label in the same centre position of another UIView
问题描述
我想在这些单词的第一行(我在这里使用UI标签，还是应该使用文本视图?)在红线的中心，该红线的中心位于该行的中心.黄色的UIView
我尝试了一些自动布局配置，但仍然无法实现
这是一个涉及的过程.花些时间来了解整个逻辑.
首先，我们有一些注意事项:
- 黄色视图具有定义的高度(以及定义的宽度，因此可以确定其水平中心)
- 标签的字体大小固定(通过约束可以使第一行的水平中心与 Yellow "视图的水平中心对齐)
我们将在黄色视图的右侧添加一个占位符视图，并使它们居中对齐.方便的 UIStackView .
我们使用具有以下属性的 UIStackView :
- 轴:
Horizontal - 对齐方式:
居中 - 分布:
填充 - 间距:根据需要
上面的堆栈视图使用自动布局":
- 领先，尾随，顶部:关于超级视图(视图控制器的视图/安全区域)
- 高度:固定高度(这是黄色视图的高度)
这些是堆栈视图的约束:
现在，我们将使用属性将两个视图添加到堆栈视图:
- 黄色视图:
- 宽度:固定宽度
- 高度:等于堆栈视图的高度
- 但是请注意，我使用了宽度&宽高比约束，以使视图保持矩形
- 占位符视图:
- 高度:0
这是两个视图的约束:
现在是标签的一部分.这是一个多行标签(行数设置为 0 )，该标签将与占位符视图按顶部，前导&尾随约束.但是最主要的限制需要稍作考虑.标签的字体大小为 20 ，因此，如果顶部约束具有 -13 (而不是 -10 ，则是因为顶部之间存在顶部填充标签的框架和标签的文本)值，然后将其与 Yellow 视图的水平中心对齐.
这些是标签的约束条件:
足够多的谈话了.我制作了一个演示，您可以在
I want to make the first line of those words (I am using UI Label here, or should I use Text View?), in the center of red line, the center of that red line is located at the center of that yellow UIView
I have tried some autolayout configuration but still failed to achieve this
This is an involved process. Take your time to understand the whole logic.
First of all we have some considerations:
- The Yellow view has a defined height (as well as a defined width, so that it's horizontal center can be determined)
- The label has a fixed font size (so that the horizontal center of first line can be aligned with the horizontal center of the Yellow view by means of constraint)
We will add a placeholder view to the right hand side of the Yellow view and make them center aligned. Here comes the handy UIStackView.
We take a UIStackView with these properties:
- Axis:
Horizontal - Alignment:
Center - Distribution:
Fill - Spacing: As your need
The above stack view uses the Auto Layout:
- Leading, Trailing, Top: With respect to the super view (view controller's view / safe area)
- Height: A fixed height (this will be the height of the Yellow view)
These are the constraints for the stack view:
Now we will add two views to the stack view with the attributes:
- Yellow view:
- Width: A fixed width
- Height: Equal to the height of the stack view
- But note that, I used a width & aspect ratio constraint so that the view remains rectangular
- Placeholder view:
- Height: 0
These are the constraints for the two views:
Now comes the label's part. It's a multiline label (number of lines set to 0) The label will be aligned with the placeholder view by top, leading & trailing constraints. But the top constraints need a slight consideration. The label will have a font size of 20 so that if the top constraint has -13 (not -10 because there is a top padding between the label's frame and label's text) value with the placeholder, then it can be aligned with the horizontal center of the Yellow view.
These are the constraints for the label:
Enough of the talking. I have made a demo which you'll find here. Also keep in mind if you need to control the horizontal space between the yellow view and the label, you can achieve that by changing the spacing value of the stack view.
Also keep in mind that, this implementation is very tightly configured. Anything changes, everything breaks. But if your need is slightly changed so that the first line of the label is vertically aligned (not the horizontal center of the first line) you can forget about the font size of the label and the -13 top constraint's value.
Below is the final output. I added a horizontal redline to indicate the middle of the yellow view.
这篇关于如何使标签的第一行位于另一个UIView的相同中心位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
