但是当我将屏幕旋转到横屏模式时,tableView的宽度仅占屏幕大小的一半以下,而webView却占据了更多的空间,导致它们不再均匀分配。
这是为什么?无论屏幕方向如何,如何才能使这些视图的宽度仅占屏幕宽度的一半?
答案的前半部分处理了我们想要将视图 A(蓝色)和视图 B(红色)平均分割的情况。后半部分将处理我们想让视图 A 占据半个屏幕,但视图 B 不存在的情况。
按照图片设置蓝色视图的自动布局约束条件。顶部、左侧、底部为 0 对于父视图。右侧为 0 对于红色视图。
为红色视图设置相同但镜像的约束条件。
如果你正确完成了前两个步骤,应该会出现一些自动布局错误和警告:
我们需要一个额外的约束条件来解决这些错误/警告并得到我们所需的效果。
按住 Control 键,从一个视图向另一个视图拖动并选择“宽度相等”。现在我们的视图将始终保持相同的宽度。所有自动布局警告和错误都消失了,无论方向或设备如何,我们的视图都将占据屏幕的一半。
要使用 VFL 以编程方式添加这些约束条件,我们需要以下约束条件:
@"H:|[blueView(==redView)][redView]|"
@"V:|[blueView]|"
@"V:|[redView]|"
现在,假设我们想让一个视图占据屏幕的一半,但是我们没有另一半的视图。我们仍然可以使用自动布局来实现,但是设置略有不同。在这个例子中,我们的视图是蓝色的,其父视图是绿色的。
这与上面的步骤1类似,只是我们不添加右侧约束(如果我们想占用不同的一半,则会有所不同)。
与之前一样,我们要分配“等宽”约束。在这种情况下,从我们的视图到父视图。再次按住控件键并从一个拖动到另一个。
此时,我们有一个自动布局警告。自动布局希望我们的框架与其父母的宽度相匹配。单击警告并选择“更新约束”将放置硬编码值。我们不想要这个。
选择视图并转到其大小检查器。在这里,我们将能够编辑约束。
单击“Equal Width to:”约束旁边的“Edit”。我们需要更改乘数值。
我们需要将乘数值更改为2。
约束现在变为“Proportional Width to:”,所有自动布局警告和错误都消失了。现在我们的视图将始终占据超级视图的一半。
要在代码中添加这些约束,我们可以使用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];
@"[leftView(==rightView)]"
。但您还需要其他约束条件。因此,您需要:@"|[leftView(==rightView)][rightView]|"
(仍然需要垂直约束)。 - nhgrif在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
}
}
将它们都绑定到父视图边缘(表格视图绑定到前沿,网页视图绑定到后沿),并设置它们具有相同的宽度约束。
.5
与其父视图的宽度相关联。