在自动版式，我怎么能有观点占据半个屏幕，无论方向？ [英] In autolayout, how can I have view take up half of the screen, regardless of orientation?

问题描述

在纵向模式下，我对左侧一的tableview，并在右侧网页视图。他们都采取了屏幕的一半。我已经自动布局启用。

In portrait mode, I have a tableview on the left-side, and a webview on the right-side. They both take half of the screen. I have autolayout enabled.

但是，当我旋转屏幕为横向模式，在tableview中的宽度占据了不到半个屏幕的大小和web视图最终采取更多的，而不是他们的是偶数分裂。

But when I rotate the screen to landscape mode, the tableview's width takes up less than half the screen's size, and the webview ends up taking more, instead of them being an even split.

为什么会出现这种情况？我怎么会有意见占用只有一半的屏幕对于它们的宽度，无论屏幕方向的？

Why does this happen? How can I have the views take up only half the screen in regard to their widths, regardless of screen orientation?

推荐答案

答案地址的前半部分中，我们要查看A（蓝色）和视图B（红色）平分的看法的情况。下半年将解决，我们希望有一个观点占据半个屏幕的情况，但鉴于B不存在。

The first half of the answer address the case in which we want to split the view evenly between view A (blue) and view B (red). The second half will address the case in which we want to have view A take up half the screen, but view B does not exist.

设置蓝色的自动布局约束的合照。顶部，左侧，0底部到上海华。权0红色视图。

Set up blue's auto-layout constraints as pictured. Top, left, bottom of 0 to the superview. Right of 0 to the red view.

设置是相同的，但镜像，约束为红视图

Set up the same, but mirrored, constraints for the red view.

如果你正确地完成了前两步，你应该有一些自动布局错误和警告：

If you've completed the first two steps correctly, you should have some auto-layout errors and warnings:

我们需要一个更多约束，以修复这些错误/警告，并得到我们所需要的。

We need one more constraint to fix these errors/warnings and get what we need.

按住Ctrl，然后从一个视图拖动到另一个选择宽度相等。现在，我们的意见将始终保持相同的宽度。我们所有的自动布局警告和错误消失，我们的意见将始终是屏幕的一半，无论方向或设备。

Hold control, click and drag from one view to the other and select "equal widths". Now our views will always maintain the same width. All of our auto layout warnings and errors disappear, and our views will always be half the screen no matter the orientation or device.

要添加使用VFL在code这些限制，我们需要以下限制：

To add these constraints in code using VFL, we need the following constraints:

@"H:|[blueView(==redView)][redView]|"
@"V:|[blueView]|"
@"V:|[redView]|"

---

现在，假设我们想要的单一视图占用半个屏幕的情况，但我们没有对另一半的图。我们仍然可以做到这一点，支持自动布局，但它是一个设置上略有不同。在这个例子中，我们的观点是蓝色的，其父视图是绿色的。

---

Now, suppose the case where we want a single view to take up half the screen, but we don't have a view for the other half. We can still do this with auto layout, but it's a slightly different set up. In this example, our view is blue, and its parent view is green.

这是类似于上面的步骤1，但我们不加右侧约束（如果我们希望我们的观点采取了不同的一半，这将明显发生变化）。

This is similar to step 1 above, except we don't add a right side constraint (this will obviously vary if we want our view to take up a different half).

像以前一样，我们想给一个宽度相等的约束。在这种情况下，从我们的观点到父视图。同样，按住控制和从一个到另一个点击拖动。

Like before, we want to assign an "equal widths" constraint. In this case, from our view to the parent view. Again, hold control and click drag from one to the other.

在这一点上，我们有一个自动布局警告。自动布局希望我们的框架，以配合其母公司的宽度。点击警告，选择更新限制将在把硬codeD值。我们不希望这样。

At this point, we have an auto layout warning. Auto layout wants our frame to match its parent's width. Clicking the warning and choosing "Update constraints" will put a hardcoded value in. We don't want this.

选择视图并转到它的大小检查。在这里，我们就可以编辑的制约。

Select the view and go to its size inspector. Here, we'll be able to edit the constraints.

点击编辑旁边的平等宽度为：约束。我们需要改变倍频值。

Click "Edit" next to the "Equal Width to:" constraint. We need to change the multiplier value.

我们需要乘数值更改为2。

We need to change the multiplier value to 2.

约束现在变为比例宽度为：与我们所有的汽车布局警告和错误消失。现在，我们的观点总是会占用超级观点正好一半。

The constraint now changes to a "Proportional Width to:", and all of our auto layout warnings and errors disappear. Now our view will always take up exactly half of the super view.

要在code添加这些限制，我们可以添加一些使用VFL：

To add these constraints in code, we can add some using VFL:

@"H:|[blueView]"
@"V:|[blueView]|"

但不能与VFL被添加比例宽度约束。我们必须将其添加为这样的：

But the proportional width constraint can't be added with VFL. We must add it as such:

NSLayoutConstraint *constraint =
    [NSLayoutConstraint constraintWithItem:blueView
                                 attribute:NSLayoutAttributeWidth 
                                 relatedBy:NSLayoutRelationEqual
                                    toItem:superView
                                 attribute:NSLayoutAttributeWidth
                                multiplier:2.0
                                  constant:0.0]; 

这篇关于在自动版式，我怎么能有观点占据半个屏幕，无论方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！