如何使用自动布局缩放视图的高度和视图相对于屏幕尺寸的位置
How to scale height of views and postion of the views relative to the screen size using AutoLayout
使用自动布局保持视图的相对位置和比例适合每个屏幕尺寸的最佳方式是什么?例如,4s 和 iPad Pro 之间存在巨大差异。我应该使用什么类型的约束和思维过程?
正在缩放的视图可能各自具有不同的高度并占据不同的屏幕比例。我知道有很多方法可以解决这个问题,但最好的方法是什么。
回答能否附上图片,让我清楚了解过程?
非常感谢,
这是一个非常有深度的问题,但是要将视图缩放到父级的大小并向下缩放,您需要使用
等宽约束
等高约束
纵横比限制
我经常使用这些。这是一个简单的例子
假设我们要将屏幕分成 3 个视图。所有与主控制器视图的宽度相同,我们希望顶部占 40%,第二个视图占 30%,底部占 20%。我们可以对父视图使用等高约束,并编辑和调整乘数 0.2=20%。
要设置等高约束,请将视图从视图拖动到情节提要中的父视图,然后松开(您也可以在左侧的视图层次结构中执行此操作 Ex.Picture 包括在内)。
您将看到此菜单。
选择等高和等宽重复。这个例子中的宽度很好,因为我希望它是主视图的宽度,但我们需要改变高度的乘数,否则每个视图都将是主视图的高度。
在尺寸检查器中找到约束并找到与 superview 高度相等的约束(下图)。双击或单击编辑并调出上图中的菜单。在这种情况下,我将乘数设置为 0.3,即父级的 30%。现在继续为所有设置您想要的百分比的视图执行此操作。
其他控件拖动到父项的示例如下:
我固定了所有视图 together.Meaning 视图之间的顶部和底部约束为 0。我希望理解这些类型的约束,这不是问题。
pin 菜单的示例图片。您可以将这些更改为 0 或其他任何内容,并为任何视图快速添加 Top、Bottom、Leading 和 Trailing
您还可以使用水平和垂直居中,也可以使用乘数来保持与父视图的相对位置。
现在向这些视图添加子视图并让它们按比例缩放。该过程以相同的方式工作。查看我最后的 3 个大视图,我正在向刚刚添加的顶视图添加一个较小的视图,该视图占据了我们屏幕的大部分。我希望这个新视图像设计中的头像一样。
我把它放在顶视图中,我在小视图中控制拖动而不离开它以获得添加纵横比的选项(注意我在执行此步骤之前在尺寸检查器中设置宽度和高度相等90x90).
放开你就会看到这个菜单。此约束意味着视图将始终是正方形的。它只需要知道它的宽度或高度就可以解决另一个问题。 Note:make 在故事板中控制拖动之前,确保视图是您想要的比例。见下一张图片。
现在,我使用图钉菜单将顶部约束(例如 10)和左侧(15)添加到包含此头像小视图的视图中。自动布局仍然很疯狂,但我所要做的就是添加宽度或高度,因为纵横比约束将解决我们未提供的问题。我控制从小视图拖动到它的父视图(小视图之外的任何地方)。我选择等高。我在右侧的尺寸检查器中找到它,并将乘数从 1 更改为 0.4。现在 Autolayout 又高兴了,因为小视图知道它应该有多宽和多高,因为我们给了它一个相等的高度约束并且它知道应该保持正方形它解决了它的宽度。
旁注:
如果我不想使用固定的顶部、底部、尾部、前导,您可以调整乘数以垂直和水平对齐,以与等宽相同并保持相对位置。
我更新了视图,我可以继续添加视图。这是预览中的结果。
使用自动布局保持视图的相对位置和比例适合每个屏幕尺寸的最佳方式是什么?例如,4s 和 iPad Pro 之间存在巨大差异。我应该使用什么类型的约束和思维过程?
正在缩放的视图可能各自具有不同的高度并占据不同的屏幕比例。我知道有很多方法可以解决这个问题,但最好的方法是什么。
回答能否附上图片,让我清楚了解过程?
非常感谢,
这是一个非常有深度的问题,但是要将视图缩放到父级的大小并向下缩放,您需要使用
等宽约束
等高约束
纵横比限制
我经常使用这些。这是一个简单的例子
假设我们要将屏幕分成 3 个视图。所有与主控制器视图的宽度相同,我们希望顶部占 40%,第二个视图占 30%,底部占 20%。我们可以对父视图使用等高约束,并编辑和调整乘数 0.2=20%。
要设置等高约束,请将视图从视图拖动到情节提要中的父视图,然后松开(您也可以在左侧的视图层次结构中执行此操作 Ex.Picture 包括在内)。
您将看到此菜单。
选择等高和等宽重复。这个例子中的宽度很好,因为我希望它是主视图的宽度,但我们需要改变高度的乘数,否则每个视图都将是主视图的高度。
在尺寸检查器中找到约束并找到与 superview 高度相等的约束(下图)。双击或单击编辑并调出上图中的菜单。在这种情况下,我将乘数设置为 0.3,即父级的 30%。现在继续为所有设置您想要的百分比的视图执行此操作。
其他控件拖动到父项的示例如下:
我固定了所有视图 together.Meaning 视图之间的顶部和底部约束为 0。我希望理解这些类型的约束,这不是问题。
pin 菜单的示例图片。您可以将这些更改为 0 或其他任何内容,并为任何视图快速添加 Top、Bottom、Leading 和 Trailing
您还可以使用水平和垂直居中,也可以使用乘数来保持与父视图的相对位置。
现在向这些视图添加子视图并让它们按比例缩放。该过程以相同的方式工作。查看我最后的 3 个大视图,我正在向刚刚添加的顶视图添加一个较小的视图,该视图占据了我们屏幕的大部分。我希望这个新视图像设计中的头像一样。
我把它放在顶视图中,我在小视图中控制拖动而不离开它以获得添加纵横比的选项(注意我在执行此步骤之前在尺寸检查器中设置宽度和高度相等90x90).
放开你就会看到这个菜单。此约束意味着视图将始终是正方形的。它只需要知道它的宽度或高度就可以解决另一个问题。 Note:make 在故事板中控制拖动之前,确保视图是您想要的比例。见下一张图片。
现在,我使用图钉菜单将顶部约束(例如 10)和左侧(15)添加到包含此头像小视图的视图中。自动布局仍然很疯狂,但我所要做的就是添加宽度或高度,因为纵横比约束将解决我们未提供的问题。我控制从小视图拖动到它的父视图(小视图之外的任何地方)。我选择等高。我在右侧的尺寸检查器中找到它,并将乘数从 1 更改为 0.4。现在 Autolayout 又高兴了,因为小视图知道它应该有多宽和多高,因为我们给了它一个相等的高度约束并且它知道应该保持正方形它解决了它的宽度。
旁注: 如果我不想使用固定的顶部、底部、尾部、前导,您可以调整乘数以垂直和水平对齐,以与等宽相同并保持相对位置。
我更新了视图,我可以继续添加视图。这是预览中的结果。