ios - 设计UIView，使其可以根据内容高度动态改变其高度

Question

在 XIB文件我有一个 CustomView与同名的类相关。

查看内容非常简单。

有一个垂直的stackview，stackview内部有两个标签。 stackview 与包含它的 View 垂直对齐:

第一个标签(标题)包含静态文本(始终是几个字符)。 第二个标签(副标题)可以具有可变长度文本。

我添加这个CustomView与其他类似的 View 作为 Content View 的 subview ，因为它是一个“行”。

for i in 0...aViews.count {

   var v = CustomView(frame: CGRect(x: 0, y: _y, width: 320, height: 100))
   v.labelText = "my long label text ..."
   contentView.addSubview(v)
   // ...
}

正如你所想象的，标题标签应该有一个固定的位置(顶部和左侧)，也就是说，不能有一行标题从 10 点开始，另一行从 14 点开始。

我必须承认，我天真地认为标签的位置会由我垂直对齐 stackview 的同一事实自动管理。我错了，我发现根本没有问题，直到他们告诉我第二个标签，即副标题，可以包含不止一行。

我直接在 storyboard 中向标签添加了行。 ，并发现:

1. stackview 的容器不会更改其 height基于height其内容；

2. “固定”元素的位置可能垂直居中，但不固定；

我需要的是以下内容:

• 标签应该“分组”并垂直对齐:从第一个标签的顶部到容器的上边框以及从第二个标签的底部到底部边框应该有相同的空间;
• 当第二个标签必须显示多行时，容器 View 应相应更改其高度；

这可能吗？我应该如何设计我的 View ？

Answer 1

好的 - 看看您的项目，您的目标并不遥远......只是几个关键项目。

1. 在 CustomView.xib 中，固定标签 和日期标签 之间没有任何限制。结果是日期标签从 View 底部向上增长，没有任何东西可以阻止它。

2. 此外，在您的 CustomView.xib 中，您将 Fixed Label 限制在后缘...我假设您希望它与 Date Label 左对齐>

3. 创建 CustomView 时，您将高度限制设置为 100，这违背了允许内容确定大小的目的。

4. 在 CustomView 类中，您已将 contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight] 注释掉。该行应该在那里。

5. 在 View Controller 中，您以低优先级向 contentView 添加了高度约束。最好的选择是使其成为占位符约束(双击该约束，然后选择占位符复选框)。这样，约束在运行时被删除，但在设计期间仍然存在(并且 Storyboard 不会提示)。

6. 您做了一些其他不必要的事情 - 可能您正在尝试不同的事情来使其正常工作。

7. View 设置(添加 View )最好在 viewDidLoad() 中完成 - 绝对不是在 viewDidLayoutSubviews() 中完成

8. 我猜测，在您的 CustomView 中，您可能想要限制 Date Label 前导和尾随的宽度，而不是显式宽度 200，从而允许它根据设备宽度水平拉伸(stretch)...但我将其保留为 200。

如果您可以遵循该信息，您应该能够解决问题。但是，我将项目作为 GitHub 存储库提供给您，这样您就可以让它处于“工作”状态，这样您就可以看到更改。

这是存储库的链接:https://github.com/DonMag/ATester2

结果如下:

向上滚动一点: