如何设置 UIViewController 以避免在凹口和底部滑动条区域绘制？

Question

我正在复活我在 2015 年编写的一个应用程序，它仍然可以全屏运行，但我正在绞尽脑汁试图弄清楚如何避免在 iPhone X 及其后代上的凹口区域和底部滑动条区域进行绘图.

这是 iPhone 14 Pro Max 上的样子（在 iOS 模拟器中）。请注意，它一直向上进入药丸区域：

我的启动屏幕视图控制器场景在 Xcode 编辑器中具有以下属性。

• 界面构建器文档
  • 构建：部署目标 (12.0)
  • 使用特质变体：开
  • 使用安全区域布局指南：开
  • 用作启动屏幕：开
• 查看
  • 排列：位置视图
  • 布局：自动调整大小蒙版
  • 布局边距：默认
    • 保留超级视图边距：关闭
    • 跟随可读宽度：关闭
    • 安全区域相对边距：关闭
  • 布局指南
    • 安全区域：开
    • 键盘：关闭

我的主视图控制器场景具有以下属性：

• 界面构建器文档
  • 构建：部署目标 (12.0)
  • 使用特征变体：关闭
  • 使用安全区域布局指南：开
  • 用作启动屏幕：关闭
• 视图控制器
  • 布局
    • 调整滚动视图插入：开
    • 按下时隐藏底部栏：关闭
    • 从 NIB 调整视图大小：打开
    • 使用全屏（已弃用）：关闭
  • 延伸边缘
    • 在顶部栏下：关闭
    • 在底部栏下：关闭
    • 在不透明条下：关闭

我希望 UIViewController 的框架自动限制在屏幕的“安全”区域，即凹口/药丸区域和底部滑动条区域之间的区域。

iPhone 8 和所有 iPad 上的一切看起来都很好。只是最近的 iPhone 遇到了问题。

Answer 1

这是

非常基本的自动布局。阅读文档并学习一些教程会让您受益匪浅。

但是，这是一个非常简单的示例，使用堆栈视图来获取与您发布的图像类似的布局：

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1.0];
    
    // we're going to add 6 views in a 2x3 layout
    NSArray <UIColor *>*colors = @[
        [UIColor redColor], [UIColor greenColor], [UIColor blueColor],
        [UIColor cyanColor], [UIColor yellowColor], [UIColor orangeColor],
    ];
    
    UIStackView *sv = [UIStackView new];
    sv.axis = UILayoutConstraintAxisVertical;
    sv.distribution = UIStackViewDistributionFillEqually;
    sv.spacing = 8.0;
    
    int cIdx = 0;
    for (int i = 0; i < 3; i++) {
        UIStackView *sv2 = [UIStackView new];
        sv2.axis = UILayoutConstraintAxisHorizontal;
        sv2.distribution = UIStackViewDistributionFillEqually;
        sv2.spacing = 8.0;
        for (int j = 0; j < 2; j++) {
            UIView *v = [UIView new];
            v.backgroundColor = colors[cIdx];
            v.layer.cornerRadius = 12.0;
            cIdx++;
            [sv2 addArrangedSubview:v];
        }
        [sv addArrangedSubview:sv2];
    }

    sv.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:sv];
    
    // respect safe area
    UILayoutGuide *g = [self.view safeAreaLayoutGuide];

    [NSLayoutConstraint activateConstraints:@[
        [sv.topAnchor constraintEqualToAnchor:g.topAnchor constant:0.0],
        [sv.leadingAnchor constraintEqualToAnchor:g.leadingAnchor constant:0.0],
        [sv.trailingAnchor constraintEqualToAnchor:g.trailingAnchor constant:0.0],
        [sv.bottomAnchor constraintEqualToAnchor:g.bottomAnchor constant:0.0],
    ]];
    
}

@end

iPhone SE 上的结果（无刘海或虚拟主页按钮）：

旋转：

在 iPhone 14 Pro 上：