Question

我目前正在设置网页视图的布局限制，如下所示：

UIView *theView = self.view;
UILayoutGuide *theGuide = theView.safeAreaLayoutGuide;

inWebView.translatesAutoresizingMaskIntoConstraints = NO;
[theView.topAnchor constraintEqualToAnchor:inWebView.topAnchor].active = YES;
[theGuide.leadingAnchor constraintEqualToAnchor:inWebView.leadingAnchor].active = YES;
[theGuide.trailingAnchor constraintEqualToAnchor:inWebView.trailingAnchor].active = YES;
[theView.bottomAnchor constraintEqualToAnchor:inWebView.bottomAnchor].active = YES;

在横向模式下在iPhone X上显示视图时会导致左右边距。 Web视图在视图中水平居中。这在下面的草图中显示为（1）将Web视图绘制为绿色区域的位置。

但我想使用视图的最大宽度，其中Web视图延伸到右侧（2）或左侧边缘（3）。这需要一个动态布局指南，用于前导和尾随。

我怎样才能做到这一点？

Answer 1

我通过添加更多约束找到了解决方案：

@property (nonatomic, strong) NSLayoutConstraint *leftFullConstraint;
@property (nonatomic, strong) NSLayoutConstraint *rightFullConstraint;

并初始化视图约束：

UIView *theView = self.view;
UILayoutGuide *theGuide = theView.safeAreaLayoutGuide;
NSLayoutConstraint *theConstraint;

inWebView.translatesAutoresizingMaskIntoConstraints = NO;
[theView.topAnchor constraintEqualToAnchor:inWebView.topAnchor].active = YES;
theConstraint = [theGuide.leadingAnchor constraintEqualToAnchor:inWebView.leadingAnchor];
theConstraint.priority = UILayoutPriorityDefaultHigh;
theConstraint.active = YES;
theConstraint = [theGuide.trailingAnchor constraintEqualToAnchor:inWebView.trailingAnchor];
theConstraint.priority = UILayoutPriorityDefaultHigh;
theConstraint.active = YES;
[theView.bottomAnchor constraintEqualToAnchor:inWebView.bottomAnchor].active = YES;

self.leftFullConstraint = [theView.leftAnchor constraintEqualToAnchor:inWebView.leftAnchor];
self.rightFullConstraint = [theView.rightAnchor constraintEqualToAnchor:inWebView.rightAnchor];

注意：新约束使用左右而不是前导和尾随，因为书写方向无关紧要！它们的优先级高于保存区域布局指南的约束。因此，当应用程序激活它时，它们会将约束推翻到安全区域。

最后，当特征集合发生变化时，约束会更新：

- (void)updateConstraints {
    UIDeviceOrientation theOrientation = [[UIDevice currentDevice] orientation];

    switch (theOrientation) {
        case UIDeviceOrientationLandscapeLeft:
            self.leftFullConstraint.active = NO;
            self.rightFullConstraint.active = YES;
            break;
        case UIDeviceOrientationLandscapeRight:
            self.leftFullConstraint.active = YES;
            self.rightFullConstraint.active = NO;
            break;
        default:
            self.leftFullConstraint.active = NO;
            self.rightFullConstraint.active = NO;
    }
}

- (void)traitCollectionDidChange:(UITraitCollection *)inPreviousTraitCollection {
    [super traitCollectionDidChange:inPreviousTraitCollection];
    [self updateConstraints];
}

Swift 4 也是如此。定义属性：

var leftFullConstraint: NSLayoutConstraint?
var rightFullConstraint: NSLayoutConstraint?

初始化约束：

if let theView = self.view {
    let theGuide = theView.safeAreaLayoutGuide
    var theConstraint: NSLayoutConstraint!

    inWebView.translatesAutoresizingMaskIntoConstraints = false
    theView.topAnchor.constraint(equalTo: inWebView.topAnchor).isActive = true
    theConstraint = theGuide.leadingAnchor.constraint(equalTo: inWebView.leadingAnchor)
    theConstraint.priority = UILayoutPriorityDefaultHigh
    theConstraint.isActive = true
    theConstraint = theGuide.trailingAnchor.constraint(equalTo:inWebView.trailingAnchor)
    theConstraint.priority = UILayoutPriorityDefaultHigh
    theConstraint.isActive = true
    theView.bottomAnchor.constraint(equalTo: inWebView.bottomAnchor).isActive = true

    self.leftFullConstraint = theView.leftAnchor.constraint(equalTo: inWebView.leftAnchor)
    self.rightFullConstraint = theView.rightAnchor.constraint(equalTo: inWebView.rightAnchor)
}

并更新它们：

func updateConstraints() {
    if let leftFullConstraint = self.leftFullConstraint, 
       let rightFullConstraint = self.rightFullConstraint {
        let theOrientation = UIDevice.current.orientation

        switch(theOrientation) {
        case .landscapeLeft:
            leftFullConstraint.isActive = false
            rightFullConstraint.isActive = true
            break;
        case .landscapeRight:
            leftFullConstraint.isActive = true
            rightFullConstraint.isActive = false
            break
        default:
            leftFullConstraint.isActive = false
            rightFullConstraint.isActive = false
        }
    }
}

override func traitCollectionDidChange(_ inPreviousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(inPreviousTraitCollection)
    updateConstraints()
}

在iPhone X上使用横向最大屏幕

1 个答案: