自动版式设计适应iPhone的3.5英寸和iPhone 4英寸的屏幕尺寸 [英] Autolayout design accommodating iPhone 3.5 inch and iPhone 4 inch screen size

问题描述

我创建一个通用的应用程序。现在我想在屏幕上放置两个按钮：

我和自动布局和Interface Builder试了一下（iOS版设计完全相同），但我只设法适合在一个屏幕大小（例如3.5英寸显示屏）按钮。因此，我设定的按钮的尺寸和间距顶端（一到上海华的顶部，一个以上的按钮的底部）。

但有一个这种适应屏幕大小的方式？例如。按钮的宽度是视图宽度减去一定差距。或在画面中心像按钮（一个很容易）？这可能吗？

比其他的选择是做code（创建按钮，创建约束）的一切。在这里，我可以查询视图宽度等相应地建立我的按钮。这是唯一的办法？

这又如何管理？

编辑：

现在我把视图控制器上的空白标签。在这个标签我增加了以下约束：

• 居中Y以：上海华，等于：0


• 对齐中心X为：上海华，等于：0

在我的按钮我设置一个固定的高度和宽度。比后空间到上海华等于50（水平定心作品，因为两者的屏幕尺寸具有相同的宽度）。在顶部的按钮具有以下限制：

• 居中Y以：不干胶标签，等于：20

在底部的按钮获得：

• 顶层空间到：标签，等于：20

不知道为什么它需要不同的约束，但在GUI编辑，我把底部或按钮的顶部点。这里的标签也得到：

• 居中Y以：顶部的按钮，等于：20


• 顶层空间到：底部按键，等于：20

现在我在屏幕上centerd 3.5或4英寸显示屏，无论两个按钮。一个缺点是，该间隙到导航控制器和工具栏是3.5英寸显示器上非常小。在这里，我可以使按钮较小。任何其他的选择吗？最初的想法是要始终空间设置为顶部元素，但4英寸的屏幕上出现的底部比的空间。

解决方案

自动布局是基于四个参数，X，Y，W，H。知道了这一点，对于一个动态的布局关键是要了解满足全部四个约束约束所需的最小数量。

在图形中，我们可以地址x坐标由两个按钮，在容器中水平居中。

W（宽度）可以是固定的（即300），或推断（如果按钮是从前缘10，左;从所述后缘，右10），则宽度为300 ...）

现在我们得到与Y COORDS和H（高度）。你有几个选项。约束高度，然后设置Y的相应。 （即锁定高度到60，从顶部/底部40例如距离 - 您的实际值可能会有所不同。我已经看到了苹果工程师做在WWDC另一个窍门是在中心插入一个空的观点，然后根据该设定的按钮的限制。

希望这增添了些许的洞察力，不迷惑你。自动布局是怪异，记住，在我们iOS8上的将有sizeClasses考虑以及..（

I'm creating an universal app. Now I want to place two buttons on the screen:

I tried it with autolayout and Interface Builder (iOS Designer exactly) but I only managed to fit the buttons on one screen size (e.g. 3.5 inch display). Therefore I set the size of the buttons and the spacing to the top (one to the top of the superview and one to the bottom of the button above).

But is there a way to adapt this to the screen size? E.g. the width of the button is the the view width minus a certain gap. Or centering the buttons like in the picture (one would be easy)? Is this possible?

Than the other option is to do everything in code (creating the button and creating the constraints). Here I could query the view width and so on to create my buttons accordingly. Is this the only way?

How can this be managed?

EDIT:

Now I placed an empty label on the view controller. On this label I added the following constrains:

• Align Center Y to: Superview, Equals: 0
• Align Center X to: Superview, Equals: 0

On my buttons I set a fixed height and width. Than the trailing space to the superview equals 50 (horizontal centering works because both screen sizes have the same width). The button on top has the following constraint:

• Align Center Y to: Label, Equals: 20

The button on the bottom gets:

• Top Space to: Label, Equals: 20

Don't know why it takes different constraints but in the GUI editor I took the bottom or top point of the button. Here the label gets also:

• Align Center Y to: top Button, Equals: 20
• Top Space to: bottom Button, Equals: 20

Now I have the two buttons centerd on the screen regardless of 3.5 or 4 inch display. One disadvantage is that the gap to the navigation controller and toolbar is very small on the 3.5inch display. Here I can make the buttons smaller. Any other options? The initial idea was to set always the space to the top element but on the 4 inch screen there is much space on the bottom than.

解决方案

Autolayout is based on four parameters, x,y,w,h. Knowing this, the key for a dynamic layout is to understand the minimum number of constraints needed to satisfy all four constraints.

In your drawing, we can address x coord for both buttons by "horizontal center in container."

w (width) can either be fixed (i.e. 300), or inferred (if button is 10 from the leading edge, left; 10 from the trailing edge, right), then width is 300...)

Now we get to the Y coords and H (height). You have a couple options. Constrain the height, and then set the Y's accordingly. (i.e. lock the heights to 60, and the distance from the top/bottom to 40 for example -- your actual values will vary... Another trick i've seen apple engineer do at WWDC is insert an empty view in the center, and then set the constraints of the buttons based on that.

Hope this adds a little insight and doesn't confuse you more. Autolayout is weird, and remember, in ios8 we'll have the sizeClasses to consider as well.. ;(

这篇关于自动版式设计适应iPhone的3.5英寸和iPhone 4英寸的屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！