自动布局以动态地调整uilabel宽度 [英] Auto Layout to dynamically size uilabel width

问题描述

所以我有两个UILabels并排在故事板。第二个标签应该紧靠第一个标签的右边缘（尾随约束为1），但是我还需要第一个标签（左边的那个）来设置它的宽度等于它的内容大小，除非它达到最大宽度。视觉上：

So I have two UILabels side by side in Storyboard. The second label should butt up against the right edge of the first one (trailing constraint of 1), but I also need the first label (the one on the left) to set it's width equal to it's content size unless it hits a max width. Visually:

|标签两个文本|

我需要以下约束：

1）标签应该宽度调整，除非它达到最大尺寸。

1) Label one should resize width wise unless it hits a max size.

2）标签二应该总是与标签的右边缘对接

2) Label two should always be butted up against the right edge of label one

如何在故事板中进行设置？

How do I set this up in Storyboard?

推荐答案

1. 在标签之间创建1点水平间距：Control-从 label2 拖动到 label1 。从弹出窗口中选择水平间距。双击约束。将常数更改为1。


2. 给 label1 最大宽度：选择 label1 。转到顶部菜单栏，选择编辑器>引脚>宽度。双击约束。将关系更改为< =，并将常数更改为最大宽度。


3. 垂直对齐标签：选择两个标签。转到顶部菜单栏，选择编辑器>对齐>垂直中心。


4. 您仍然需要设置用于定义标签在容器视图中的位置的约束。我离开了你。我固定了 label1 从根视图左边缘开始的32个点和顶部布局指南的34个点。


5. 更新标签，以便它们反映上述约束：转到画布右下角的菜单栏。点击解决自动布局问题Tie-Fighter按钮。在弹出窗口中选择更新所有帧...。

1. Create the 1 point horizontal space between the labels: Control-drag from label2 to label1. Choose Horizontal Spacing from the pop-up. Double click the constraint. Change the constant to 1.
2. Give label1 a max width: Select label1. Go to the top menu bar, select Editor > Pin > Width. Double click the constraint. Change the relationship to <= and change the constant to the max width.
3. Vertically align the labels: Select both labels. Go to the top menu bar, select Editor > Align > Vertical Centers.
4. You still need to set constraints that define how your labels are positioned in their container view. I leave that up to you. I pinned label1 32 points from the left edge of the root view and 34 points from top layout guide.
5. Update the frames of the labels so they reflect the above constraints: Go to the menu bar in the lower right-hand corner of the canvas. Tap the "Resolve Auto Layout Issues" Tie-Fighter button. Select "Update All Frames…" in the pop-up.

注意：注意，我不需要创建约束， code> label1 的宽度反映其内容大小。自动生成内容大小约束。

Note: Notice that I did not have to create constraints to make label1's width reflect its content size. The content sizing constraints are generated automatically.

>

这篇关于自动布局以动态地调整uilabel宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！