如何使用自动布局来缩放所有屏幕尺寸的视图? [英] How to use autolayout to scale view for all screen sizes?

问题描述

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

The main navigation view of my app uses UIButtons with background images. I'm using autolayout in IB to lay out the view.

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

I want the view to look the same (or similar, just scaled appropriately) on iphone 4, 5, 6, and 6plus. I have tried using vertical and horizontal constraints but have trouble figuring out how to use the aspect ratio constraint.

这是 iphone 5 上的视图.

This is what the view looks like on an iphone 5.

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

Here is what I've got so far on an iphone 6

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

This is what I want it to look like on an iphone 6/6plus.

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

How do I use autolayout to scale the view so that it looks the same or similar for all iphone screen sizes?

推荐答案

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

I've done some tinkering and I believe I've found a solution. I will demonstrate how to do it for the two larger squares roughly in the middle of your view.

这是一张参考图:

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

First, you need to create a container (my blue view) that spans the entire width of the superview, and has a height the same or larger than your inner squares (orange).
This view needs the following constraints: Align Center X to Superview, Align Center Y to Superview (OR constraints to give it the Y position you desire), Height Equals: [square height], Trailing Space to Superview, Leading Space to Superview.

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

The inner orange squares must be placed inside the container, and must be given the following constraints: Align Center X to Superview, Leading Space to Superview (value = space between square and edge of superview), Trailing Space to [other view] (value = space between squares). Select the two squares together, and add Aspect Ratio, Equal Width and Equal Height constraints.
The items in bold depend on which square you're selecting. The left one should have leading space to superview and trailing space to the other view, and the right one should have these constraints swapped.

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

This should give you your desired effect with autolayout.

这篇关于如何使用自动布局来缩放所有屏幕尺寸的视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！