创建基于百分比的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中指定比例宽度或高度。 高级百分比高度的步骤：

虽然选择了子视图及其超级视图，但添加一个＆＃34;相等的高度＆＃34;约束（或＆＃34;等宽＃34;如果你希望有一个比例宽度）。

然后改变＆＃34;乘数＆＃34;您刚刚添加到您需要的比例的约束。例如，对于50％，将其更改为2.

如果您想将内部视图指定为超级视图的百分比，则可以反转约束中的项目：

现在你可以使用0.5的乘数（或你需要的任何其他比例）：

在您的具体情况下，您可以定义一个＆＃34;相等的高度＆＃34; 2个子视图之间的约束，并将乘数更改为1.5（底部是1.5的顶部大小）或0.6667如果项目被反转。

Answer 2

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

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

有一个很好的visual format syntax，可以让你将约束描述为字符串。花一点时间查看链接的文档 - 学习它可以阅读字符串的时间不会太长。例如，您的顶部布局可以像这样指定：

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];

这为您提供了一个约束，将bottomView的高度设置为topView高度的1.5倍（这是您想要的，因为60/40 = 1.5）。

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

Answer 3

我不知道使用autolayout，因为我不使用它，但在没有它的代码中，你可以创建两个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));

Answer 4

您需要添加一些约束才能使其正常工作。所以这里是您需要的简要说明：

1. 您需要水平间距约束。一个如果是顶视图，因为它与顶部的距离为零。另一个用于底视图，因为它与底部的距离为零。两个视图之间还有一个约束，因为它们之间的间距也是零。

2. 相同的原则将应用于顶视图内的按钮。将您的按钮放在顶视图中并添加相似的约束，但现在您有三个元素（而不是两个）。因此限制了顶部，底部和按钮之间的零距离。

向视图添加组件时，它会为您创建一些约束。在底部添加一个顶部和另一个顶部，它将创建顶部间距和彼此之间的间距。要编辑它们，只需转到检查器，第五个选项卡（标尺），您将看到约束列表。最后，您可能想尝试约束菜单（我不知道是否有一个众所周知的名称）。它位于Interface Builder画布的右下角。见图：



如果您需要进一步的帮助，请告诉我。

Answer 5

这可以在使用Storyboard时自动完成（您可能需要在此处或那里更改一个或两个设置）。创建GUI时，您可以在屏幕尺寸（3.5和4英寸）之间切换，以确保它们在两者上看起来都很好。 See the answer to this question

You could also see this tutorial。这应该可以让您了解如何使用GUI布局。