创建基于百分比的 iOS 布局

Creating a percentage based iOS layout

提问by EGHDK

I'm trying to replicate a layout that I currently have in an Android application, but I don't know how to go about it in iOS especially because of the tallness of the iPhone 5.

我正在尝试复制我目前在 Android 应用程序中拥有的布局，但我不知道如何在 iOS 中进行，尤其是因为 iPhone 5 的高度。

I know how to explain this in "Android" terms but I've been trying for the past few days to do this in iOS but I can't quite get it to work.

我知道如何用“Android”术语来解释这一点，但过去几天我一直在尝试在 iOS 中做到这一点，但我无法让它发挥作用。

Best way to explain it:

最好的解释方式：

1. I want two layouts. The top layout must take up 40% and the bottom must take up 60%.
2. In the top layout, they must be three buttons that fill up all space possible (Essentially 1/3 of the space)
3. In the bottom layout, I want an imageView, and then a textView on top of that.

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

This is a paint mockup. Is this possible to do in iOS? I feel that layouts are much harder to create than android.

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

回答by GK100

Using Xcode 6.0, you can now specify proportional width or height in Interface Builder. Steps for percentage height from superview:

使用 Xcode 6.0，您现在可以在 Interface Builder 中指定比例宽度或高度。从超级视图中获取百分比高度的步骤：

While both the child view and its superview are selected, add an "equal height" constraint (or "equal width" if you wish to have a proportional width).

当子视图和它的父视图都被选中时，添加一个“等高”约束（如果你希望有一个比例宽度，或者“等宽”）。

Then change the "multiplier" of the constraint you just added to the proportion you need. For example, for 50%, change it to 2.

然后将您刚刚添加的约束的“乘数”更改为您需要的比例。例如，对于 50%，将其更改为 2。

If you like to specify the inner view as percentage of the superview, you can reverse the items in the constraint:

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

Now you can use a multiplier of 0.5 (or any other proportion you need):

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

In your specific case, you can define an "equal height" constraint between the 2 child views, and change the multiplier to 1.5 (the bottom being 1.5 the size of the top) or 0.6667 if the items are reversed.

在您的特定情况下，您可以在 2 个子视图之间定义“等高”约束，并将乘数更改为 1.5（底部为顶部大小的 1.5）或 0.6667（如果项目颠倒）。

回答by Caleb

Contrary to the other answers, I think you should at least consider the auto layout system. It was created to make it easier to build predictable layouts like the one you've described. Autolayout is ruled by constraintsthat you put on the views in the layout. You can create those constraints visually or programmatically. Visually, your first view would look something like this:

与其他答案相反，我认为您至少应该考虑自动布局系统。它的创建是为了更轻松地构建像您所描述的那样的可预测布局。自动布局由您在布局中的视图上施加的约束控制。您可以以可视方式或以编程方式创建这些约束。在视觉上，您的第一个视图看起来像这样：

The blue lines you see there are a number of constraints that specify the inter-button spacing, the space around the buttons, and the heights and widths of the buttons. You can see a couple constraints that have a =on them -- I selected all three buttons and gave them an "equal height" constraint.

您看到的蓝线有许多约束，用于指定按钮间距、按钮周围的空间以及按钮的高度和宽度。您可以看到几个约束条件，上面有一个=- 我选择了所有三个按钮并给它们一个“等高”约束条件。

There's a nice visual format syntaxthat lets you describe constraints as strings. Take a minute to look at the linked document -- it won't take much longer than that to learn enough that you can read the strings. For example, your top layout can be specified like this:

有一个很好的视觉格式语法，可以让您将约束描述为字符串。花一点时间看一下链接的文档——学习足够多的内容以阅读字符串不会花费比这更长的时间。例如，您的顶部布局可以这样指定：

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

The parenthetical ==button1tells the layout system to make button2and button3the same height as button1. The -indicates that the standard spacing should be used between the buttons; you can specify a different spacing if you want. For 10 point spacing, do this:

括号==button1告诉布局系统制作button2和button3相同的高度button1。的-表示该标准间距应的按钮之间使用; 如果需要，您可以指定不同的间距。对于 10 点间距，请执行以下操作：

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

Once you have such a string, you can turn it into a constraint using the method: +[NSLayoutConstraint constraintsWithVisualFormat:options:metrics:views:]

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

Some constraints can't be specified either visually or with the strings described above. Chief among these are those where you want to set a constant (but unequal) relationship between two views, as with your top and bottom layouts. You want one of those to take up 40% of the available vertical space, and the other to take 60%. Do this using the method: +[NSLayoutConstraint constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:]. For example:

某些约束无法在视觉上或使用上述字符串指定。其中最主要的是你想在两个视图之间设置一个恒定（但不相等）的关系，就像你的顶部和底部布局一样。您希望其中一个占据可用垂直空间的 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];

That gives you a constraint that sets the height of bottomViewto 1.5 times the height of topView(which is what you want, since 60/40 = 1.5).

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

If you create constraints programmatically, you can add them to the appropriate view when you create (or load) the view hierarchy. Your view controller's -viewDidLoadmethod is a fine place to do that.

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

回答by rocir

You need to add a couple of constraints to make it work. So here's a brief description of what you need:

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

1. You will need horizontal spacing constraints. One if for the top view, because it has zero distance to the top. Another one for the bottom view, because its distance to the bottom is zero. One more constraint between the two views, because they have also zero spacing between each other.

2. The same principle will be applied to the buttons inside the top view. Put your buttons with the correct size inside the top view and add similar constraints, but now you have three elements (instead of two). So constraints for zero spacing to the top, bottom and between buttons.

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

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

When you add components to your view, it will create a few constraints for you. Adding one one top and the other on bottom, it will create both spacing to the top and spacing between each other. To edit them, just go to inspector, fifth tab (ruler) and you will see the list of constraints. Lastly, you may want to try to constraints menu (I don't know if there's a well-known name for this). It's on the bottom-right corner of the Interface Builder canvas. See the image:

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

Please, let me know if you need further assistance.

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

回答by Jsdodgers

I don't know about using autolayout as I dont use it, but in code without it, you could create two UIViewsand set their frames to:

我不知道如何使用自动布局，因为我不使用它，但是在没有它的代码中，您可以创建两个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);

And then in the top view, you can add the buttons with frames (assuming the view is called view1):

然后在顶视图中，您可以添加带有框架的按钮（假设视图名为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));

回答by CaptJak

This can be done automatically when using Storyboards (you might have to change a setting or two here and there). When you create your GUI, you can toggle between the screen sizes (3.5 and 4 inch) to make sure that it will look good on both. See the answer to this question.

这可以在使用 Storyboard 时自动完成（您可能需要在这里和那里更改一两个设置）。创建 GUI 时，您可以在屏幕尺寸（3.5 和 4 英寸）之间切换，以确保它在两种屏幕上看起来都不错。请参阅此问题的答案。

You could also see this tutorial. That should give you an idea on how to work with the GUI layouts.

您还可以查看本教程。这应该让您了解如何使用 GUI 布局。