在autolayout中，无论方向如何，如何让视图占据屏幕的一半？

Question

在纵向模式下，我在左侧有一个桌面视图，在右侧有一个webview。它们都占据了屏幕的一半。我启用了autolayout。

但是当我将屏幕旋转到横向模式时，桌面视图的宽度不到屏幕大小的一半，而webview最终会占用更多，而不是平均分割。

为什么会这样？无论屏幕方向如何，如何让视图仅占屏幕宽度的一半？

Answer 1

答案的前半部分解决了我们想要在视图A（蓝色）和视图B（红色）之间均匀分割视图的情况。下半部分将讨论我们希望视图A占据屏幕一半的情况，但视图B不存在。

第1步：

设置蓝色的自动布局约束，如图所示。超级视图的顶部，左侧，底部0。从0到红色视图。

第2步：

为红色视图设置相同但镜像的约束。

如果您已正确完成前两个步骤，则应该有一些自动布局错误和警告：

我们还需要一个约束来修复这些错误/警告，并获得我们需要的东西。

第3步：

按住控制，单击并从一个视图拖动到另一个视图，然后选择＆＃34;相等的宽度＆＃34;。现在我们的视图将始终保持相同的宽度。我们所有的自动布局警告和错误都会消失，无论方向或设备如何，我们的视图始终都是屏幕的一半。

要使用VFL在代码中添加这些约束，我们需要以下约束：

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

---

现在，假设我们希望单个视图占据屏幕的一半，但我们不能看到另一半的视图。我们仍然可以通过自动布局来实现这一点，但设置略有不同。在此示例中，我们的视图为蓝色，其父视图为绿色。

第1步：

这类似于上面的第1步，除了我们没有添加右侧约束（如果我们希望我们的视图占据不同的一半，这显然会有所不同）。

第2步：

和以前一样，我们想要分配一个＆＃34;相等的宽度＆＃34;约束。在这种情况下，从我们的视图到父视图。再次，按住控件并单击从一个拖动到另一个。

此时，我们有一个自动布局警告。自动布局希望我们的框架与其父宽度相匹配。单击警告并选择＆＃34;更新约束＆＃34;将硬编码的价值放入。我们不想要这个。

第3步：

选择视图并转到其大小检查器。在这里，我们可以编辑约束。

点击＆＃34;编辑＆＃34;在＆＃34;等宽度旁边：＆＃34;约束。我们需要改变乘数值。

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

约束现在变为＆＃34;比例宽度为：＆＃34;，我们所有的自动布局警告和错误都消失了。现在我们的视图总是占据超级视图的一半。

要在代码中添加这些约束，我们可以使用VFL添加一些：

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

但比例宽度约束不能与VFL相加。我们必须这样添加：

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

Answer 2

在UIView或XIB

中创建Storyboard

1. 设置顶部和左侧约束
2. 设置高度限制
3. 将宽度约束设置为等于超级视图的宽度 *重要
4. 通过将约束转换为十进制来编辑约束的宽度



1. 将小数设置为您喜欢的宽度（在我的情况下为0.5或一半）

<强>

Answer 3

将它们绑定到超视图边缘（前视图的表视图，后端的Web视图），并将它们的约束设置为具有相同的宽度。

Answer 4

以编程方式在Swift 4中编写：

import UIKit

class ViewController: UIViewController {

    let halfScreenViewLeft: UIView = {
        let view = UIView()
        view.backgroundColor = .blue
        return view
    }()

    let halfScreenViewRight: UIView = {
        let view = UIView()
        view.backgroundColor = .red
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(halfScreenViewLeft)
        view.addSubview(halfScreenViewRight)

        //Enable Autolayout
        halfScreenViewLeft.translatesAutoresizingMaskIntoConstraints = false

        //Place the top side of the view to the top of the screen
        halfScreenViewLeft.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

        //Place the left side of the view to the left of the screen.
        halfScreenViewLeft.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true

        //Set the width of the view. The multiplier indicates that it should be half of the screen.
        halfScreenViewLeft.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true

        //Set the same height as the view´s height
        halfScreenViewLeft.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true

        //We do the same for the right view

        //Enable Autolayout
        halfScreenViewRight.translatesAutoresizingMaskIntoConstraints = false

        //Place the top side of the view to the top of the screen
        halfScreenViewRight.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

        //The left position of the right view depends on the position of the right side of the left view

        halfScreenViewRight.leadingAnchor.constraint(equalTo: halfScreenViewLeft.trailingAnchor).isActive = true

        //Place the right side of the view to the right of the screen.
        halfScreenViewRight.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true

        //Set the same height as the view´s height
        halfScreenViewRight.heightAnchor.constraint(equalTo: view.heightAnchor).isActive = true


    }

}

Answer 5

约束系统无法读懂你的想法。你必须说出你想要的。一半是一半。如果你想要一半，说一半。要将视图设置为超视图宽度的一半，请为其指定一个宽度约束，该约束的倍数为.5，与其超视图的宽度相关。