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

Posted 2023-03-22

【中文标题】在 iPhone X 上横向使用最大屏幕

【英文标题】：Using maximal screen with in landscape on iPhone X

【发布时间】：2018-01-24 09:00:22

【问题描述】：

我目前正在设置这样的 Web 视图的布局约束：

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 视图被绘制为绿色区域的位置。

但我想使用视图的最大宽度，其中网络视图延伸到右侧 (2) 或左侧 (3)。这将需要一个动态布局指南来引导和尾随。

我怎样才能做到这一点？

【参考方案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];

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

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

- (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()