Autolayout设计适用于iPhone 3.5英寸和iPhone 4英寸屏幕尺寸

时间:2014-09-02 20:10:35

标签: ios uibutton autolayout xamarin-studio ios-autolayout

我正在创建一个通用应用。现在我想在屏幕上放置两个按钮:

Placement of two buttons

我尝试使用自动布局和界面生成器(完全是iOS设计器),但我只设法将按钮放在一个屏幕尺寸上(例如3.5英寸显示屏)。因此,我将按钮的大小和间距设置为顶部(一个到超视图的顶部,一个到上面按钮的底部)。

但有没有办法让它适应屏幕尺寸?例如。按钮的宽度是视图宽度减去一定的间隙。或者像图片中的按钮居中(一个很容易)?这可能吗?

比其他选项是在代码中执行所有操作(创建按钮并创建约束)。在这里,我可以查询视图宽度等,以相应地创建我的按钮。这是唯一的方法吗?

如何管理?

修改

现在我在视图控制器上放置了一个空标签。在这个标签上我添加了以下约束:

  • 将中心Y对齐:Superview,等于:0
  • 将中心X对齐:Superview,等于:0

在我的按钮上,我设置了固定的高度和宽度。比superview的尾随空间等于50(水平居中工作因为两个屏幕尺寸具有相同的宽度)。顶部的按钮具有以下约束:

  • 将中心Y对齐:标签,等于:20

底部的按钮获取:

  • 顶部空间:标签,等于:20

不知道为什么它需要不同的约束,但在GUI编辑器中我采用了按钮的底部或顶部。这里的标签也是:

  • 将中心Y对齐:顶部按钮,等于:20
  • 顶部空间:底部按钮,等于:20

现在我将两个按钮置于屏幕中央,无论是3.5英寸还是4英寸显示屏。一个缺点是在3.5英寸显示屏上与导航控制器和工具栏的间隙非常小。在这里,我可以使按钮更小。还有其他选择吗?最初的想法是始终将空间设置为顶部元素,但是在4英寸屏幕上,底部有很多空间。

1 个答案:

答案 0 :(得分:1)

Autolayout基于四个参数x,y,w,h。知道这一点,动态布局的关键是理解满足所有四个约束所需的最小约束数。

在你的绘图中,我们可以通过"容器中的水平中心来解决两个按钮的x坐标。"

w(宽度)可以是固定的(即300),也可以是推断的(如果按钮是前缘10,左边是10;后缘是10,右边),那么宽度是300 ......)

现在我们到达Y coords和H(高度)。你有几个选择。约束高度,然后相应地设置Y。 (例如,将高度锁定到60,从顶部/底部到40的距离 - 例如 - 您的实际值会有所不同......我在WWDC看到苹果工程师的另一个技巧就是插入一个空视图中心,然后根据它设置按钮的约束。

希望这会增加一些洞察力并且不会让你更加困惑。 Autolayout很奇怪,请记住,在ios8中,我们还要考虑sizeClasses ......;(

enter image description here