【问题标题】:How to use autolayout to scale view for all screen sizes?如何使用自动布局来缩放所有屏幕尺寸的视图?
【发布时间】:2014-12-15 00:49:44
【问题描述】:

我的应用程序的主导航视图使用带有背景图像的 UIButtons。我在 IB 中使用自动布局来布局视图。

我希望 iphone 4、5、6 和 6plus 上的视图看起来相同(或相似,只是适当缩放)。我尝试过使用垂直和水平约束,但无法弄清楚如何使用纵横比约束。

这是 iphone 5 上的视图。

这是我目前在 iphone 6 上得到的结果

这就是我希望它在 iphone 6/6plus 上的样子。

如何使用自动布局来缩放视图,使其在所有 iphone 屏幕尺寸下看起来都相同或相似?

【问题讨论】:

标签: ios objective-c xcode autolayout


【解决方案1】:

我做了一些修改,我相信我已经找到了解决方案。我将演示如何为您视图中间的两个较大的正方形执行此操作。

这是一张参考图:

首先,您需要创建一个容器(我的蓝色视图),它跨越超级视图的整个宽度,并且高度等于或大于您的内部正方形(橙色)。
此视图需要以下约束:将 Center X 与 Superview 对齐,将 Center Y 与 Superview 对齐(OR 约束以赋予其所需的 Y 位置),Height Equals: [square height],Trailing Space to Superview , 引领空间到 Superview。

内部的橙色方块必须放在容器内,并且必须给出以下约束:Align Center X to Superview,Leading Space to Superview(值=正方形和superview边缘之间的空间) , Trailing 到 [其他视图] 的空间(值 = 方块之间的空间)。一起选择两个正方形,并添加纵横比、等宽和等高约束。
粗体中的项目取决于您选择的方块。左边应该有前导空间到超级视图和尾随空间到另一个视图,右边应该交换这些约束。

这应该会给你你想要的自动布局效果。

【讨论】:

  • 谢谢 - 这很好用。我对容器(蓝色)视图的约束进行了细微调整:我使用 height 大于或等于:[orange square height]height equals: [orange square height] /b> 并添加了 纵横比 约束。
  • 我真的很困惑...你能提供一个项目下载或视图层次结构的截图吗?
【解决方案2】:

聚会有点晚了,但我想这会对将来的某个人有所帮助。 这是我认为更好的方法。我将编写我遵循的步骤以达到预期的结果。

1 - 在视图控制器中添加两个正方形,如下所示。

2 - 现在选择第一个立方体,然后从屏幕底部选择 Pin 菜单。添加顶部和左侧约束。

3 - 现在选择第二个立方体,即右侧的那个,并从 Pin 菜单中为其添加右侧和顶部约束。

4 - 现在选择第一个立方体,然后从立方体内部按住 cntrl 拖动到视图控制器。现在从菜单中选择“等宽”。糊涂了吧?坚持,稍等。

5 - 现在双击“等宽”约束线,会弹出一个菜单。在“乘数”字段中将值更改为 0.4

6 - 对右侧立方体重复第 4 步和第 5 步。

7 - 这是不同尺寸 iPhone 中的结果。 (第一个是 4 英寸设备,第二个是 4.7 英寸设备,第三个是 3.5 英寸设备)。 P.S:底部被裁剪,因为屏幕截图来自预览:)

更新(2018 年 1 月 16 日)

在第 4 步中,选择“纵横比”,而不是选择“等宽”。在此之后省略第 5 步。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-19
    • 2018-11-13
    • 1970-01-01
    • 2016-10-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多