那些遇到过的问题

Xcode的安全区域9

dip*_*dip 139 ios swift ios11 xcode9 safearealayoutguide

在浏览界面构建器上查找Xcode9 Beta Found Safe Area时查看层次结构查看器.好奇并试图了解苹果上的安全区文档,主要是文档说"与Auto布局直接交互的视图区域"但它不满足我,我想知道这个新事物的实际用途.

有人有一些线索吗？

在此输入图像描述

结论段落来自Apple doc for Safe area.

UILayoutGuide类旨在执行先前由虚拟视图执行的所有任务,但是以更安全,更有效的方式执行.布局指南不定义新视图.它们不参与视图层次结构.相反,他们只是在他们自己的视图的坐标系中定义一个矩形区域,可以与自动布局进行交互.

Kru*_*nal 257

安全区域是布局指南(安全区域布局指南).
布局指南表示视图中不受条形和其他内容影响的部分.在iOS 11+中,Apple不赞成使用顶部和底部布局指南,并使用单个安全区域布局指南替换它们.

当视图在屏幕上可见时,本指南将反映视图中未被其他内容覆盖的部分.视图的安全区域反映了导航栏,标签栏,工具栏和其他遮盖视图控制器视图的祖先所覆盖的区域.(在tvOS中,安全区域包含屏幕边框,由overscanCompensationInsetsUIScreen属性定义.)它还包含视图控制器additionalSafeAreaInsets属性定义的任何其他空间.如果视图当前未安装在视图层次结构中,或者在屏幕上尚未显示,则布局指南始终与视图的边缘匹配.

对于视图控制器的根视图,此属性中的安全区域表示视图控制器的内容被隐藏的整个部分,以及您指定的任何其他插入内容.对于视图层次结构中的其他视图,安全区域仅反映该视图中被遮挡的部分.例如,如果视图完全位于其视图控制器的根视图的安全区域内,则此属性中的边缘插入为0.

根据Apple,Xcode 9 - 发行说明
Interface Builder使用UIView.safeAreaLayoutGuide替代UIViewController中不推荐使用的Top和Bottom布局指南.要使用新的安全区域,请在文件检查器中为视图控制器选择"安全区域布局指南",然后在内容和新安全区域锚点之间添加约束.这可以防止您的内容被顶部和底部条形图以及tvOS上的过扫描区域遮挡.在部署到早期版本的iOS时,对安全区域的约束将转换为顶部和底部.

在此输入图像描述

这是现有(顶部和底部)布局指南和安全区域布局指南之间的比较(以产生类似的视觉效果)的简单参考.

安全区域布局: 在此输入图像描述

自动版式

在此输入图像描述

如何使用安全区域布局？

请按照以下步骤查找解决方案:

  • 如果未启用,则启用"安全区域布局".
  • 如果它们显示与超级视图的连接,则删除"所有约束",并使用安全布局锚重新附加所有约束.或者双击约束并编辑从超级视图到SafeArea锚点的连接

这是示例快照,如何启用安全区域布局和编辑约束.

在此输入图像描述

这是上述变化的结果

在此输入图像描述

使用SafeArea进行布局设计
在为iPhone X进行设计时,必须确保布局填满屏幕,并且不会被设备的圆角,传感器外壳或用于访问主屏幕的指示器遮挡.

在此输入图像描述

大多数使用标准的,系统提供的UI元素(如导航栏,表格和集合)的应用程序会自动适应设备的新外形.背景材料延伸到显示器的边缘,并且UI元件被适当地插入和定位.

在此输入图像描述

对于具有自定义布局的应用,支持iPhone X也应该相对容易,特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南.

在此输入图像描述

下面是示例代码(参考:安全区域布局指南):
如果在代码中创建约束,请使用UIView的safeAreaLayoutGuide属性来获取相关的布局锚点.让我们在代码中重新创建上面的Interface Builder示例,看看它的外观:

假设我们在视图控制器中将绿色视图作为属性:

private let greenView = UIView()
Run Code Online (Sandbox Code Playgroud)

我们可能有一个函数来设置从viewDidLoad调用的视图和约束:

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}
Run Code Online (Sandbox Code Playgroud)

使用根视图的layoutMarginsGuide始终创建前导和尾随边距约束:

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])
Run Code Online (Sandbox Code Playgroud)

现在,除非您只针对iOS 11,否则您需要使用#available包装安全区域布局指南约束,并回退到早期iOS版本的顶部和底部布局指南:

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}
Run Code Online (Sandbox Code Playgroud)


结果:

在此输入图像描述

继UIView延伸,很容易让你与SafeAreaLayout工作编程.

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}
Run Code Online (Sandbox Code Playgroud)

以下是Objective-C中的示例代码:

以下是Apple Developer官方文档的安全区域布局指南


需要安全区域来处理iPhone-X的用户界面设计.以下是如何使用安全区域布局为iPhone-X设计用户界面的基本准则

Nic*_*ari 18

我想提的东西,首先吸引我,当我试图去适应一个基于SpriteKit应用程序内,以避免圆边和新的iPhone X的"缺口",通过最新的建议人机界面指南:新属性safeAreaLayoutGuide的UIView需求,被查询后视图已经被加入到该层次结构中(例如,上 -viewDidAppear:),以便报告有意义的布局框(否则,它只是返回全屏大小).

从酒店的文件:

布局指南表示视图中不受条形和其他内容影响的部分. 当视图在屏幕上可见时,本指南将反映导航栏,标签栏,工具栏和其他祖先视图未覆盖的视图部分.(在tvOS中,安全区域反映未覆盖屏幕边框的区域.)如果视图当前未安装在视图层次结构中,或者在屏幕上尚未显示,则布局引导边缘等于视图的边缘.

(强调我的)

如果您最早阅读-viewDidLoad:,layoutFrame指南的内容将{{0, 0}, {375, 812}}不是预期的{{0, 44}, {375, 734}}

Jac*_*ack 17

在此输入图像描述

  • 在IOS 7.0-11.0较早< 弃用 > UIKit使用topLayoutGuide&bottomLayoutGuide其UIView属性

  • iOS11 +使用safeAreaLayoutGuide,它也是UIView属性

  • 从文件检查器启用" 安全区域布局指南"复选框.

  • 安全区域可帮助您将视图置于整个界面的可见部分.

  • 在tvOS中,安全区域还包括屏幕的过扫描插图,它代表屏幕边框覆盖的区域.

  • safeAreaLayoutGuide反映导航栏,标签栏,工具栏和其他祖先视图未涵盖的视图部分.

  • 使用安全区域作为帮助来布置您的内容等UIButton .

  • 在为iPhone X进行设计时,您必须确保布局填满屏幕,并且不会被设备的圆角,传感器外壳或访问主屏幕的指示器遮挡.

  • 确保背景延伸到显示器的边缘,并且垂直可滚动的布局(如表和集合)一直延伸到底部.

  • iPhone X上的状态栏比其他iPhone更高.如果您的应用假设状态栏高度为状态栏下方的定位内容,则必须更新您的应用以根据用户的设备动态定位内容.请注意,当语音录制和位置跟踪等后台任务处于活动状态时,iPhone X上的状态栏不会更改高度 print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

  • 家用指示器容器的高度为34点.

  • 启用" 安全区域布局指南"后,您可以在界面构建器中看到安全区域约束属性.

在此输入图像描述

您可以使用self.view.safeAreaLayoutGuideas- 分别设置约束

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;
Run Code Online (Sandbox Code Playgroud)

迅速:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

在此输入图像描述

在此输入图像描述

小智 8

Apple在iOS 7中引入了topLayoutGuide和bottomLayoutGuide属性作为UIViewController的属性.它们允许您创建约束以防止UIKit条形图(如状态,导航或标签栏)隐藏您的内容.这些布局指南在iOS 11中已弃用,并由单个安全区域布局指南取代.

有关更多信息,请参阅链接

Yan*_*ick 5

“安全区域布局指南”有助于避免在放置内容和控件时重叠系统UI元素。

安全区域是系统UI元素（状态栏，导航栏和工具栏或标签栏）之间的区域。因此，当您向应用程序添加状态栏时，安全区域会缩小。将导航栏添加到应用程序后，安全区域会再次缩小。

在iPhone X上，即使未显示任何条形图，“安全区域”也会从纵向屏幕的顶部和底部边缘提供额外的插图。在风景中，安全区域从屏幕和归位指示器的侧面插入。

这摘自Apple的视频《 iPhone X的设计》，在其中他们还可视化了不同元素如何影响安全区域。

归档时间：

查看次数：

117302 次

最近记录：

7 年，2 月 前
如何以编程方式添加安全区域 8
更多相关链接
相关归档
更新 flutter 和 Xcode 后，Xcode 14.3 中缺少文件“libarclite_iphoneos.a” 71
在代码中为topLayoutGuide和bottomLayoutGuide创建自动布局约束 64
NSURLSession:如何增加URL请求的超时？ 61
如何在Swift中创建一个递增值的数组？ 56
@property复制与readonly有意义吗？ 30
iOS/Swift:如何检测UITextField上的触摸操作 27
在swift中打印结构名称 15
为什么我的Xcode无法验证swift iOS项目 14
SwiftUI：圆角矩形覆盖角被切除 12
SwiftUI 字体在复杂视图中缩放 10
难疑归档
如何在JavaScript中获取查询字符串值？ 2701
如何使用CSS为文本或图像提供透明背景？ 2211
用JavaScript比较两个日期 1791
如何检查变量是否是JavaScript中的数组？ 1713
无法打开与身份验证代理的连接 1473
如何比较两个不同分支的文件？ 1430
在C#中调用基础构造函数 1398
如何用"喜欢"查询MongoDB？ 1331
如何一次删除所有Git stashes？ 1280
将JavaScript字符串转换为全部小写？ 1260