自动布局动态尺寸宽度的UILabel [英] Auto Layout to dynamically size uilabel width

问题描述

所以我在故事板由方二UILabels的一面。第二个标签应对接起来反对第一个（尾随的1约束）的右边缘，但我也需要第一个标签（一个左侧），设置它的宽度等于它的内容的大小，除非它击中一个最大宽度。视觉：

---

|标签一文| |标签两个文本|

---

和我需要以下限制：

1）标签应该调整宽度明智的，除非它击中的最大尺寸。

2）标签两者应始终抵靠在标签之一的右边缘

如何在故事板设置呢？

解决方案

1. 创建标签之间的1个点的水平空间：按住Control键拖动从 LABEL2 到卷标1 。然后从弹出的水平间距。双击约束。不断更改为1。


2. 给卷标1 A最大宽度：选择卷标1 。转至顶部的菜单栏，选择编辑>针>宽度。双击约束。更改关系到＆lt; =并更改常数的最大宽度


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


4. 您还需要设置定义您的标签如何定位自己在容器视图的约束。我离开这个给你。我寄托卷标1 根视图的左边缘32分从顶部布局指南34分。


5. 更新标签的框架，使他们反映上述制约因素：进入菜单栏在画布右下方角落。点击解决自动布局问题铁战斗机按钮。在弹出菜单中选择更新所有帧...。

请注意：请注意，我没有创建的约束，使卷标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:

---

|Label one text| |Label two text|

---

And I need the following constraints:

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

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

How do I set this up in Storyboard?

解决方案

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.

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屋！