Question

我得到了一个ViewController，其中包含Labels一堆，分两列（标题和描述值）。所有Labels都是主要View的子代。我希望右列的描述标签垂直对齐：

我的第一次尝试：

我为左列的每个width = 180设置了固定宽度约束 Label。然后，右列中的每个Label在其对应的Label的左侧都有一个 constraint 。这行得通，看起来还不错，但我得到了我想要摆脱的警告：

固定的宽度限制可能会导致剪裁

第二次尝试：

删除左侧Labels的所有固定宽度约束以消除警告。右侧不再对齐。在viewDidLoad()中，我尝试将所有左侧Labels'帧大小设置为最长Label的大小（在我的情况下为“ Some long long text”）< / p>

    shorterTitle.frame.size = longTitle.frame.size
    tinyTitle.frame.size = longTitle.frame.size

但这并没有任何可见的影响（右侧标签的左侧约束似乎并不动态）。

我的第三次尝试：

我忽略了左侧Labels的不同大小，但看了右边的大小。我检查了最长的左侧Label右侧Label的x位置，并将此位置设置为所有其他右侧Labels：

    secondDes.frame.origin.x = firstDes.frame.origin.x
    thirdDes.frame.origin.x = firstDes.frame.origin.x

这很好，但是有一个问题：

如果值Labels为空，则此方法无效。在我的应用程序中，这些首先为空，然后从Web服务器下载右侧Labels的信息。

所以，如果我这样做：

    secondDes.frame.origin.x = firstDes.frame.origin.x
    thirdDes.frame.origin.x = firstDes.frame.origin.x

    firstDes.text = "test1"
    secondDes.text = "test2"
    thirdDes.text = "test3"

右侧无法正确对齐。

因此，我更改了顺序，以便首先设置文本，因此Labels会根据其新文本获得新的宽度大小。

    firstDes.text = "test1"
    secondDes.text = "test2"
    thirdDes.text = "test3"

    secondDes.frame.origin.x = firstDes.frame.origin.x
    thirdDes.frame.origin.x = firstDes.frame.origin.x

令人惊讶的是，这也不起作用。原因是：设置了文本属性，但是到最后两行执行时，Labels的大小尚未调整。因此，我将不得不稍等一会儿再应用大小，然后再次调用最后两行。

如果我这样做的话，用户将可以看到文本跳转。

希望你们有个主意。

Answer 1

自动布局应该是最好的方法。
关于解决方案1：
UILabels firstDes，secondDes和thirdDes看起来像是水平居中。如果您现在将宽度设置为160，则绝对有重叠/破坏约束。
iPhone 5s / LE的宽度为320。如果“ Some long long text：”标签的宽度为180，则它将与“ test1”标签重叠。

通常最好使用内在方法。让控件找出它的文本需要多少空间。

如果这是您的第一个项目，我建议您看一些有关Autolayout的教程。（例如，Ray Wenderlich）

编辑：
来自评论的建议。使用UIView作为容器。将所有UILabel放在此处，并根据需要对齐它们。 UILabels“ test2”和“ test3”具有LayoutContraints，告诉它们与“ test1”具有相同的开头。
图2显示了您在StoryBoard编辑器中查找的约束。如果您不熟悉自动版式，则通过代码添加它们会变得不那么容易。

Answer 2

如何从第一种方法设置用户界面

在您的VC中，首先使用Horizontal-StackView并给它一些约束。现在我给它
- 领先，落后-10（恒定）
- 垂直居中于Vc视图。
- 高度-200（恒定）..稍后我们将删除此高度
首先，我们将设置第一个最高视图，然后复制相同的视图。因此，现在在您的stackview中添加一个视图。它说出了自己的观点。
在labelLeft中添加左标签（view1）并赋予其约束条件：
- 顶部，底部，顶部-5（恒定）
- 宽度-80（恒定）..您可以根据需要进行设置
现在为冒号设置中间标签（labelMid）（如果您不希望这样做，请跳过此步骤）并设置约束条件：
- 通往labelLeft-5（恒定）
- labelLeft顶部
现在设置rightLabel（labelRight）并给出内容：
- 通往labelMid-5（恒定）
- labelLeft顶部
- 跟踪-5（恒定）
现在将每个标签的行数设置为零（0），并删除stackView Height约束。将labelLeft和labelRight中的文本设置为任意长度，然后查看下面的说明。

输出：

第一个输出（左标签更长）



第二个输出（右标签更长）

对于多个视图，您可以直接复制view1并将其粘贴到stackView中，如下所示。

最终输出：

背景紫色是主要视图。

Answer 3

如果数据是静态的，则应使用UIStackView。而且，如果您的数据是动态的，那么UICollectionView是更好的选择。在这种情况下，您可以创建包含标签的单个原型单元，然后使用dequeueReusableCell来使用该单元。如果您对UICollectionView有所了解，希望您能有所了解。

Swift 4-对齐两列UILabel视图

3 个答案:

如何从第一种方法设置用户界面