UIStackView

时间:2017-04-18 19:41:26

标签: ios xcode swift3 autolayout storyboard

我想要实现的是,有两个容器视图,其中包含两个标签。此标签是动态设置的,表示百分比或金额。我还有一个图像视图。我想要实现的是“容器视图 - 图像 - 容器视图”。我遇到的问题如下:假设左侧容器具有百分比值(从0到100),而右侧容器视图具有美​​元金额(可能高达数百万)。我想做的是标签动态调整大小并占用尽可能少的空间。以下是一些可以更好理解的图像:

This is the problem I am experiencing: percent is a single digit and takes small amount of space, while dollar amount is too long and is either cut off completely of scree, or trunkating

我使用堆栈视图来隔开三个视图。这甚至是解决这个问题的正确方法吗?

Storyboard

编辑:这是我想要达到的最终结果:

end result

2 个答案:

答案 0 :(得分:4)

您可以使用堆栈视图执行此操作。这是你需要做的:

  1. 将图像视图的内容拥抱和压缩阻力优先级设置为100这样的低数字。这将使图像视图拉伸以填充额外空间,或缩小以为数字留出更多空间。

  2. 在图像视图上设置最小宽度约束,这样如果数字非常大,它就不会缩小为空。通过在图像视图上创建宽度约束,然后将其编辑为而不是=来执行此操作。

    您的图片视图约束应该像这样结束:

    image view constraints

  3. 将图像视图的内容模式设置为“Aspect Fit”。这将使其根据需要缩小或增大箭头图像以适应可用空间而不会扭曲它:

    arrow content mode

  4. 对于标签,将自动收缩设置为“最小字体比例”,值为0.5,然后启用“收紧字母间距”。如果没有足够的空间来容纳全尺寸的所有东西,这样就可以调整标签:

    label settings

  5. 结果:

    demo screen shot

答案 1 :(得分:0)

选择 StackView 并打开属性检查器分布更改为按比例填充。我还会测试非常大的数字以查看它如何影响 StackView 的外观,但如果我理解正确,这应该可行。