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

Question

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

但是当我将屏幕旋转到横向模式时,桌面视图的宽度占据屏幕尺寸的一半以下,并且webview最终会占用更多,而不是它们是偶数分割.

为什么会这样？无论屏幕方向如何,我如何才能让视图占据屏幕宽度的一半？

Answer 1

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

步骤1:

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

第2步:

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

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

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

第3步:

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

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

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

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

步骤1:

这类似于上面的步骤1,除了我们不添加右侧约束(如果我们希望我们的视图占据不同的一半,这显然会有所不同).

第2步:

像以前一样,我们想要分配"相等宽度"约束.在这种情况下,从我们的视图到父视图.再次,按住控件并单击从一个拖动到另一个.

此时,我们有一个自动布局警告.自动布局希望我们的帧与其父级的宽度相匹配.单击警告并选择"更新约束"将输入硬编码值.我们不希望这样.

第3步:

选择视图并转到其大小检查器.在这里,我们将能够编辑约束.

单击"Equal Width to:"约束旁边的"Edit".我们需要改变乘数值.

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

约束现在更改为"比例宽度:",并且所有自动布局警告和错误都消失.现在我们的视图总是占据超级视图的一半.

要在代码中添加这些约束,我们可以使用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

创建UIViewin XIB或Storyboard

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

5. 将小数设置为您想要的宽度(在我的情况下为0.5或一半)