带有情节提要的高级动态自动布局

众所周知,iPhone的尺寸截然不同,因此开发人员可以应对。 为了创建看起来不错/复杂的场景,UI组件需要与其他组件保持动态约束。

让我给你一个我在工作中的设计师给我的情况。

我指的是常量部分正下方的“优先级”。
您可以直接使用优先级。 如果存在彼此相对应的约束,或者在同一UI组件上设置的约束多于约束,则优先级用于确定Xcode坚持的约束。 当然,选择的优先级更高。

在本期中,它可能不只是一个小尺寸的屏幕,因此我们将所有内容都放在滚动视图中作为第一步。

这是我如何设置动态自动布局的提示。

您要处理最坏的要求/限制,然后再转到理想的要求。

让我们看一下必须远离顶部的顶部图像视图。
它必须与顶部至少相距40,但最好为70。

因此,最糟糕的要求是它必须与顶部保持40的距离,因此我们将此约束设置为1000优先级,这是最高优先级,这样其他约束不会对其产生任何影响。

对于距离顶部70的位置,我们将赋予700优先级,这意味着在将所有约束设置为高于700的优先级之后,我们将转向该约束条件,看看是否需要设置。

现在我们完成了顶部图像视图部分。 有多容易? 我们不需要计算空白空间,不需要放置很多if条件,就可以设置约束。

让我们进入拒绝组视图。 由于当我们显示拒绝原因时,我们要相应地更改高度约束,而不是手动更改。

我们如何实现适合内容的自动高度限制?

为此,我们将使用内容抗压缩性优先级。 对于不熟悉内容抗压缩优先级的用户,这基本上是优先级,其中当将某个UI组件在垂直或水平方向上抑制为较小尺寸并且其抗压缩优先级高于对其进行压缩的约束时,UI不会被压缩。

如上所示,我们将拒绝标签的内容抗压缩优先级设置为1000,这意味着该标签在任何情况下都不会被压缩。

您可能要看的一件事是拒绝组视图和横幅视图之间的距离。 它的大小很大没有问题,但是当它很小时,它可能会与另一个重叠,因此我们需要为此设置约束。

彼此之间没有特定的距离,但它的设置方式是两个必须彼此分开。 这就是为什么它的优先级也是1000!

和田田! 都结束了。 是时候检查它是否适用于较小的尺寸,例如iPhone 4s。

如您所见,图像视图和顶部之间的距离是我们想要的40,其他UI组件的行为也与设计时一样,例如拒绝原因标签随内容占用而改变高度限制。

我们已经学习了如何将优先级用于复杂的约束关系。 这是关于哪个优先级更高,哪个对哪个优先级设置了约束。

即使我是程序设计UI的拥护者,但我还是使用Storyboard处理复杂场景的忠实粉丝。 试试看。 如此简单和直接会让您惊讶!

感谢您抽出宝贵时间阅读此博客。

如有任何疑问,请随时告诉我:)