在界面生成器中使用自动布局将视图设置为纵向宽度百分比和横向高度百分比
Set view as percentage of width in portrait and percentage of height in landscape, in interface builder using autolayout
我正在创建一个具有居中图像的启动屏幕。我希望图像在纵向方向上是宽度的 0.7,在横向方向上是高度的 0.7,因此图像在两个方向上的大小相同,但相对于设备大小。它在 iPhone 上会更小,在 iPads 上会更大,同时在 iPad.
上支持两种方向
我可以做其中一个约束,但不能同时做两个。例如,如果我将它设为纵向宽度的 0.7,那么它在纵向上看起来不错,但在横向上则过大,反之亦然。
如何完全在界面生成器中创建这样的自动布局? (我假设启动屏幕只能使用 IB。)
您需要对相应的视图进行约束。为此,您需要按照以下步骤操作:
- Select 你的 imageView。
- 按住控制键并将光标移动到主视图。
- 现在单击“等宽约束”并为其指定所需的乘数。
- 对等高约束重复上述步骤。
- 您可以开始了。
要完成这项工作,需要添加等宽约束(根据@Saumya Gautam 的回答 - 欢迎来到 SO!),但需要进行更多调整才能给出结果。
- 为所需百分比创建等宽约束(图像到超级视图)。
- 更新约束:将其中一个设置为“小于或等于”关系,并将另一个设置为低于第一个的优先级,例如900.
- 在图像上创建纵横比 (1:1) 约束。
限制条件:
结果,纵向:
横向:
诀窍是添加两组比例宽度和高度约束...
第一个:
- centerX
- 中心Y
- 1:1纵横比
然后:
- 宽度 <= 0.7 @1000
- 宽度 = 0.7 @750
- 身高 <= 0.7 @1000
- 身高=0.7@750
所以我们的限制条件是:
- 尝试 使宽度和高度各为 70% --
Priority: 750
(高,但不是必需的)
- 但 将图像视图保持在 1:1 比率 --
Priority: 1000
(必需)
- 和宽度和高度都不能大于70% --
Priority: 1000
(必填)
文档大纲窗格中的外观如下:
这是我们得到的 iPad 9.7":
和iPhone11:
我正在创建一个具有居中图像的启动屏幕。我希望图像在纵向方向上是宽度的 0.7,在横向方向上是高度的 0.7,因此图像在两个方向上的大小相同,但相对于设备大小。它在 iPhone 上会更小,在 iPads 上会更大,同时在 iPad.
上支持两种方向我可以做其中一个约束,但不能同时做两个。例如,如果我将它设为纵向宽度的 0.7,那么它在纵向上看起来不错,但在横向上则过大,反之亦然。
如何完全在界面生成器中创建这样的自动布局? (我假设启动屏幕只能使用 IB。)
您需要对相应的视图进行约束。为此,您需要按照以下步骤操作:
- Select 你的 imageView。
- 按住控制键并将光标移动到主视图。
- 现在单击“等宽约束”并为其指定所需的乘数。
- 对等高约束重复上述步骤。
- 您可以开始了。
要完成这项工作,需要添加等宽约束(根据@Saumya Gautam 的回答 - 欢迎来到 SO!),但需要进行更多调整才能给出结果。
- 为所需百分比创建等宽约束(图像到超级视图)。
- 更新约束:将其中一个设置为“小于或等于”关系,并将另一个设置为低于第一个的优先级,例如900.
- 在图像上创建纵横比 (1:1) 约束。
限制条件:
结果,纵向:
横向:
诀窍是添加两组比例宽度和高度约束...
第一个:
- centerX
- 中心Y
- 1:1纵横比
然后:
- 宽度 <= 0.7 @1000
- 宽度 = 0.7 @750
- 身高 <= 0.7 @1000
- 身高=0.7@750
所以我们的限制条件是:
- 尝试 使宽度和高度各为 70% --
Priority: 750
(高,但不是必需的) - 但 将图像视图保持在 1:1 比率 --
Priority: 1000
(必需) - 和宽度和高度都不能大于70% --
Priority: 1000
(必填)
文档大纲窗格中的外观如下:
这是我们得到的 iPad 9.7":
和iPhone11: