如何为不同的屏幕设置自动大小文本

Posted

技术标签:

【中文标题】如何为不同的屏幕设置自动大小文本【英文标题】:How to set auto size text for different screens 【发布时间】:2019-03-02 12:59:13 【问题描述】:

我的任务是为不同的屏幕分辨率保留单元格内元素的大小和位置。

我做到了:

    为红色和绿色块 (UILabels) 建立了约束 外容器。 将它们之间的约束设置为 0。它比红色块底部和绿色块顶部的限制更优先。 为这些标签设置 Lines = 0。 设置自动收缩。

因此,不同设备上的字体大小会发生变化。但是还是有几个问题:

    如何删除两个标签上方和下方的过大填充? 如何使它们均匀调整大小? 现在,其中一个块比另一个块具有优势,具体取决于要提高优先级的约束。如果你让它们相等 - 它也不起作用。

(我想通过 Interface Builder 做所有事情)

Screenshot with differing priorities of constraints My constraints Paddings and Attributes

【问题讨论】:

【参考方案1】:

您可以利用等高和等宽约束。

按照以下步骤使 iPhone 8 和 iPhone 4s 上的 UILabel 间距相同。这将帮助您使其成比例。

1) 要实现这一点,只需选择您的标签(红色)、标签(绿色)和超级视图(我认为您是 UICollectionView 的一个单元格)

2) 我们感兴趣的是保持高度成比例。 即红标 (80%) 和绿标 (20%)

目前,所有高度都等于superview高度,即RedLabel和Greenlabel的高度等于superview的100%。

但目标是让红色和绿色标签分别达到 80% 和 20%。

所以选择红色标签高度约束。在这里,您设置了“红色标签的高度应为超级视图高度的 80%”的约束。

与绿色标签类似,设置“绿色标签的高度,使其为超级视图高度的 20%”。

红色标签

绿色标签

3) 现在完成 x 和 y 轴位置约束,这将是直截了当的

a) 红色标签前导 = 父视图的前导

b) Red Label Trailing = superview 的后沿

c) Red Label Top = superview 的上边缘

d) Red Label Bottom = not required(因为它具有所有必需的约束来证明它的位置,即 height = 0.8 * superview 并且它是顶部对齐的,例如:超级视图高度为 100 ,保持此视图顶部与 height = 80 对齐)

e) 绿色标签前导 = 红色标签前导(您已经在点“a”中设置了此项,无需再次为绿色标签设置约束)

f) 绿色标签尾随 = 红色标签前导(您已经在点“b”中设置了此项,无需再次为绿色标签设置约束)

g) 绿色标签底部 = 父视图底部

h) 绿色标签 top = not required (因为它具有所有必需的约束来证明它的位置,即 height = 0.2 * superview 并且它是底部对齐的,例如:super view height is 100 ,保持这个视图底部与 height = 20 对齐)

这是 iPhone 8 和 4s 的最终约束列表和情节提要预览。

【讨论】:

感谢您的回答,这似乎是正确的方法。只是现在我在构建时遇到错误。我不太明白它与什么有关。 Exception name: NSGenericExceptionException reason: Unable to install constraint on view. Does the constraint reference something from outside the subtree of the view? That's illegal. constraint:<NSLayoutConstraint:0x7fb204d99d50 UILabel:0x7fb204cb4d10'07.18'.height == 0.18*UICollectionViewCell:0x7fb204d943f0.height (active)> view:<UILabel: 0x7fb204cb4d10; frame = (11 154; 179 36); text = '07.18'; layer = <_UILabelLayer: 0x7fb204cb5000>>

以上是关于如何为不同的屏幕设置自动大小文本的主要内容,如果未能解决你的问题,请参考以下文章

如何为不同的屏幕尺寸创建具有自动布局的比例视图?

如何为内容不断被替换的段落设置字体大小

Bootstrap:如何为每个屏幕宽度指定不同的背景颜色?

CSS:如何为每种字体设置不同的大小

PyQt:如何为单个标题设置不同的标题大小?

如何为Android中的不同布局设置链中按钮的大小