Question

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

视图内容非常简单。

有一个垂直的 stackview ，在 stackview 内部有两个 labels 。 stackview 与包含它的视图垂直对齐：

第一个标签（标题）包含静态文本（总是几个字符）。第二个标签（字幕）可以具有可变长度的文本。

我将此CustomView和其他类似的视图添加为Content View的子视图，因为它是“行”。

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)
   // ...
}

您可以想象，标题标签应该具有固定的位置（顶部和左侧），也就是说，不能有 row ，标题的起始点是10点，另一个起始点是14。 / p>

我必须承认，我天真的认为标签的位置将由我垂直对齐 stackview 的同一事实自动管理。我错了，我没有发现任何问题，直到他们告诉我第二个标签（字幕）可以包含多行。

我直接在storyboard的标签上添加了行，发现：

stackview 的容器不会根据其内容的height更改其height；
“固定”元素的位置可能垂直居中，但不固定；

我需要以下内容：

标签应“分组”并垂直对齐：从第一个标签的顶部到容器的上边界以及从第二个标签的底部到底部的边界应有相同的空间； < / li>
当第二个标签必须显示多行时，容器视图应相应地更改其高度；

这可能吗？我应该如何设计视图？

Answer 1

我认为您在混合使用外部视图的绝对位置（即手动设置框架）并对其内部组件使用自动布局约束，并且错误地期望动态自动布局部分以某种方式“一直到达外部”视图。要进行自动布局，您需要一直使用自动布局，包括CustomViews在contentView中的放置方式。

如果出于某种原因您不想为此使用TableView或CollectionView，例如，也可以尝试将CustomView作为已安排的子视图添加到具有top / bottom / leading /尾随约束到contentView，然后将CustomView的“ Align Center Y”约束替换为“ Align Top”和“ Align Bottom”约束，以实际允许标签从内部“推入”需要更多的垂直空间。

编辑，这是一个简短的草图来说明该设置：

编辑2 ，以下是一些屏幕截图，以进一步阐明。基本布局如下：

运行时结果将如下所示：

请注意，在本示例中，UIStackViews使用“等距”分布。如果要以编程方式创建和添加CustomView，请使用StackView的func addArrangedSubview(_ view: UIView)。

祝你好运！

Answer 2

好吧-查看您的项目，就在不远处……只有几个关键项目。

在CustomView.xib中，Fixed Label和Date Label之间没有约束。结果是Date Label从视图底部开始向上增长，没有什么可以阻止它。
同样在您的CustomView.xib中，您将Fixed Label约束到后沿...我想您希望它与Date Label
在创建CustomViews时，您将高度限制设置为100，这违背了允许内容确定大小的目的。
在CustomView类中，您已将contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]注释掉。那条线应该在那里。
在视图控制器中，您向contentView添加了高度优先级较低的约束。最好的选择是使该占位符约束（双击该约束，然后选择“占位符”复选框）。这样，约束在运行时就被删除了，但是在设计时就存在（并且Storyboard不会抱怨）。
您正在做一些其他不必要的事情-可能是您在尝试其他方法来使其正常工作。
最好在viewDidLoad()中完成视图设置（添加视图）–在viewDidLayoutSubviews()中绝对不是
我猜想，在您的CustomView中，您可能不是约束200的显式宽度，而是想约束Date Label前导和尾随，以使其水平伸展基于设备的宽度...但是我将其保留为200。

如果您可以遵循该信息，则应该能够解决问题。但是，我将项目作为GitHub存储库提供给您，因此您可以使其处于“工作”状态，从而可以查看更改。

以下是仓库的链接：https://github.com/DonMag/ATester2

这是结果：

然后向上滚动一点：

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

2 个答案: