水平stackview标签随着固定高度元素增长

Posted

技术标签:

【中文标题】水平stackview标签随着固定高度元素增长【英文标题】:Horizontal stackview label grow with a fixed height element 【发布时间】:2018-08-22 10:21:10 【问题描述】:

我有一个带有 UIImageView(1:1 纵横比,高度 32)和 标签 的水平堆栈视图。由于它有一个高度,stackView 会在右侧切断我的标签,不让我有超过一行。

我希望水平 StackView 的高度增加,因为标签需要显示自己的文本或使用 UIImageView 高度(如果它更大)。

【问题讨论】:

向我展示您的视图层次结构和约束。顺便说一句,我认为使用堆栈不是很好 更新@dahiya_boy 水平stackview中的2个元素似乎不能有不同的高度 对 Stackview 也使用底部约束 不,我希望堆栈视图随着其内容而增长。 @SagarShirbhate 【参考方案1】:

这里是完整的解释,

如果你不给 Imageview 任何高度,那么它的外观如何

ImageView 增长

如果你给 Imageview 指定高度,

标签缩小到图像视图的高度

解决方案

将 ImageView 放入如下视图中,

现在,给图像视图适当的约束。现在它可以正常工作了。

输出:

【讨论】:

所以现在你需要在水平方向上给出约束,因为 imageview 和 label 都没有,不是吗?但是,这正是问题所在。 @Godfather 标签不在视图内。只有图片 您失去了水平堆栈视图的简单设置,实际上没有必要这样做,因为您只需将所有内容都放在 uiview 中,而不仅仅是 imageiview,还有标签 可以分享项目吗? @Godfather 我没有为此准备任何项目,这很简单,而不是 imageview 先取 UIView,然后将 ImageView 放入其中并给出约束。就这些【参考方案2】:

GitHub 仓库:Source Code 查看FirstViewController里面的代码

解释:

第 1 步: 改变 StackView 的约束,使得 height >= minValue 值。之后,它的高度将根据 UILabel 的高度自动调整。

第 2 步: 设置文本后调用 UILabel 的 sizeToFit 方法。这将改变 UILabel 的框架。

lable.text = "SomeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView.omeText Here. It will expalnd the StackView."
lable.sizeToFit()

第 3 步: 将图片的Scale Mode设置为Aspect Fit,并设置其高宽约束。

第 4 步: 根据要求设置 Stackview 的对齐方式,我已将其设置为顶部以使图像和标签保持在顶部。

最终结果:

约束:

【讨论】:

至极约束? UIStackView 上的 heightConstaint。 我在 stackView 中添加了一个高度约束,使其大于或等于最小高度 (32),但仍然没有增长。 @DeepArora 但它也增加了 Imageview 的高度。 @Godfather 删除 ImageView 的高度,如果 StackView 有任何高度,则使其 >= 。现在检查

以上是关于水平stackview标签随着固定高度元素增长的主要内容,如果未能解决你的问题,请参考以下文章

创建预期的 UI 行为,同时也不会收到破坏约束警告

Xcode如何在水平stackview中创建一个方形按钮(宽度等于高度)

在 StackView 中按内容对齐两个元素

UIView 和 StackView 删除元素,Swift

StackView 在一个元素周围添加额外的空间

Stackview 安排问题