创建基于百分比的iOS布局

Question

我正在尝试复制我目前在Android应用程序中的布局,但我不知道如何在iOS中进行,特别是因为iPhone 5的高度.

我知道如何用"Android"术语解释这个问题,但过去几天我一直在尝试在iOS中这样做,但我无法让它发挥作用.

解释它的最佳方式:

1. 我想要两个布局.顶部布局必须占40%,底部必须占60%.
2. 在顶部布局中,它们必须是三个按钮,以填满所有可能的空间(基本上占空间的1/3)
3. 在底部布局中,我想要一个imageView,然后是一个textView.

这是一个油漆样机.这可以在iOS中做到吗？我觉得布局比android更难创建.

Answer 1

使用Xcode 6.0,您现在可以在Interface Builder中指定比例宽度或高度.高级百分比高度的步骤:

选择子视图及其超级视图时,添加"相等高度"约束(如果希望具有比例宽度,则添加"等宽").

然后将刚刚添加的约束的"乘数"更改为您需要的比例.例如,对于50%,将其更改为2.

如果要将内部视图指定为超级视图的百分比,则可以反转约束中的项目:

现在您可以使用0.5的乘数(或您需要的任何其他比例):

在您的特定情况下,您可以在2个子视图之间定义"相等高度"约束,并将乘数更改为1.5(底部为顶部大小的1.5)或0.6667(如果项目相反).

Answer 2

与其他答案相反,我认为你至少应该考虑自动布局系统.它的创建是为了更容易构建可预测的布局,就像您所描述的那样.Autolayout由您放置在布局中的视图上的约束来控制.您可以通过视觉或编程方式创建这些约束.在视觉上,您的第一个视图看起来像这样:

您看到的蓝线有许多约束,指定按钮间间距,按钮周围的空间以及按钮的高度和宽度.你可以看到一些有约束的约束=- 我选择了所有三个按钮并给它们一个"相等高度"约束.

有一种很好的可视化格式语法,可以将约束描述为字符串.花一点时间查看链接的文档 - 学习它可以阅读字符串的时间不会太长.例如,您的顶部布局可以像这样指定:

V:[button1]-[button2(==button1)]-[button3(==button1)]

括号==button1表示布局系统的高度button2和button3高度相同button1.的-表示该标准间距应的按钮之间使用; 您可以根据需要指定不同的间距.对于10点间距,请执行以下操作:

V:|-10-[button1]-10-[button2(==button1)]-10-[button3(==button1)]-10-|

一旦有了这样的字符串,就可以使用以下方法将其转换为约束: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

无法通过目测或使用上述字符串指定某些约束.其中最主要的是你想在两个视图之间设置一个恒定(但不相等)的关系,就像你的顶部和底部布局一样.您希望其中一个占用可用垂直空间的40%,另一个占60%.使用以下方法执行此操作:+[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:].例如:

NSLayoutConstraint *c = [NSLayoutConstraint constraintWithItem:bottomView
                                                     attribute:NSLayoutAttributeHeight
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:topView
                                                    multiplier:1.5
                                                      constant:0];

这给了你一个约束,将高度设置为高度的bottomView1.5倍topView(这是你想要的,因为60/40 = 1.5).

如果以编程方式创建约束,则可以在创建(或加载)视图层次结构时将它们添加到相应的视图中.您的视图控制器的-viewDidLoad方法是一个很好的地方.

Answer 3

我不知道如何使用自动布局，因为我不使用它，但在没有它的代码中，您可以创建两个UIViews并将它们的框架设置为：

CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height * 0.4f);
CGRectMake(0, self.view.frame.size.height * 0.4f, self.view.frame.size.width, self.view.frame.size.width * 0.6f);

然后在顶视图中，您可以添加带有框架的按钮（假设该视图称为view1）：

CGRectmake(0, 0, self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (1.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));
CGRectmake(0, view1.frame.size.height * (2.0f/3.0f), self.view.frame.size.width, view1.frame.size.height * (1.0f/3.0f));