如何使用AutoLayout缩放相对于屏幕大小的视图的高度和位置

使用Autolayout什么是保持视图的相对位置和缩放到每个屏幕尺寸的最佳方式? 例如,4和iPad Pro之间存在巨大差异。 我应该使用什么types的约束和思考过程?

被缩放的视图可以各自具有不同的高度并且占据不同比例的屏幕。 我知道有很多方法可以解决这个问题,但最好的方法是什么?

答案可以附上照片,以便我可以清楚地了解过程?

十分感谢,

这是一个相当深入的问题,但要将视图缩放到父级的大小,并且需要使用

等宽限制

等高限制

长宽比约束

我经常使用这些。 这是一个简单的例子

假设我们想把屏幕分成3个视图。 所有与主控制器视图相等的宽度,我们要顶部占40%,第二个视图占30%,底部占20%。 我们可以使用相等的高度约束来监视和编辑和调整乘数0.2 = 20%。

要设置一个相同的高度约束,从视图拖到故事板的父视图中,并放开(也可以在包含左侧Ex.Picture的视图层次结构中执行此操作)。

EqualHeights

你会看到这个菜单。 EqualWidths

select相等的高度,重复相同的宽度。 在这个例子中宽度很好,因为我希望它是主视图的宽度,但是我们需要改变高度上的倍数,或者每个视图将会是主视图的高度。

find大小检查器中的约束,并find相等的高度,以超视图(下图)的约束。 双击或单击编辑,调出上图中的菜单。 在这种情况下,我将乘数设置为0.3,这是母公司的30%。 现在继续为所有视图设置您所需的百分比。 EqualToSuper

其他控件拖到下面的父项的例子: OtherExamples

我把所有的观点都放在一起了。意见之间的顶部和底部约束是0。 我希望了解这些types的约束,这不是一个问题。

示例图钉的菜单。 您可以将其更改为0或任何视图,并快速添加顶部,底部,前导和尾随任何视图 PinMenu

您还可以使用水平和垂直中心,也可以使用乘数与父视图保持相对位置。

现在,为这些视图添加子视图,并按比例进行缩放。 该过程以相同的方式工作。 看到我最后的3个大视图,我添加了一个较小的视图,我刚刚添加的顶视图占据了我们大部分的屏幕。 我希望这个新的观点像一个devise中的化身。

我把它放在顶部视图内,我控制在小视图内拖动,而不需要添加宽高比(注意我在尺寸检查器中设置宽度和高度等于90×90之前)。

ASPECTRATIO

放开你,你会看到这个菜单。 这个约束意味着视图将永远是方形的。 它只需要知道它的宽度或高度,并将解决其他问题。 注意:确保视图是控制在故事板中拖动之前所需的比例。 见下图。

AspectAdd

现在,我添加一个约10的顶部约束和左15的视图持有这个头像小视图使用引脚菜单。 Autolayout仍然是疯狂的,但我所要做的只是添加一个宽度或高度,因为宽高比约束将解决我们不提供的那个。 我控制从小视图拖到它的父(小视图以外的任何地方)。 我select平等的高度。 我把它放在右边的尺寸检查器中,把乘数从1改为0.4。 现在Autolayout再次高兴,因为小视图知道应该是多么高,因为我们给它一个平等的高度约束,它知道应该保持平方,它解决了它的宽度。

边注意:如果我不想使用固定的顶部,底部,尾部,领先,你可以调整乘法器垂直和水平alignment工作相同的宽度相同,并保持相对位置。

我更新的意见,我可以继续添加意见。 这是预览中的结果。 最后