为了账号安全,请及时绑定邮箱和手机立即绑定

Xcode 9安全区

/ 猿问

Xcode 9安全区

暮色呼如 2019-07-10 10:41:58

Xcode 9安全区

在探索中Xcode9 Beta发现安全区在界面构建器视图层次结构查看器上。这位医生说,对Apples文档中的安全区感到好奇,并试图了解它的安全范围。“与自动布局直接交互的视图区域”但它并没有让我满意,我想知道这个新事物的实际用途。

有人有线索吗?

结论:苹果文档中的段落为安全区。

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


查看完整描述

3 回答

?
繁星淼淼

安全区域是布局指南(安全区布局指南).
表示视图中不被条形条和其他内容遮掩的部分的布局指南。在iOS 11+中,苹果不推荐顶部和底部的布局指南,取而代之的是单一的安全区布局指南。

当视图在屏幕上可见时,本指南反映视图中未被其他内容覆盖的部分。视图的安全区域反映了导航条、选项卡条、工具栏和其他祖先所覆盖的区域,这些祖先掩盖了视图控制器的视图。(在tvOS中,安全区域包含屏幕的边框,由overscanCompensationInsets(UIScreen.)它还涵盖视图控制器定义的任何额外空间additionalSafeAreaInsets财产。如果视图当前未安装在视图层次结构中,或尚未在屏幕上显示,则布局指南始终与视图的边缘匹配。

对于视图控制器的根视图,此属性中的安全区域表示视图控制器内容的全部模糊部分,以及您指定的任何附加嵌入。对于视图层次结构中的其他视图,安全区域只反映视图中模糊的部分。例如,如果一个视图完全位于其视图控制器根视图的安全区域内,则此属性中的边缘嵌入为0。

据苹果公司称,Xcode 9-发行说明 
接口生成器使用UIView.SecurityAreaLayoutGuide代替UIViewController中过时的顶部和底部布局指南。若要使用新的安全区,请在“文件”检查器中为视图控制器选择“安全区布局指南”,然后在内容和新的安全区域锚点之间添加约束。这可以防止您的内容被顶部和底部栏以及tvOS上的过度扫描区域所遮挡。当部署到早期版本的IOS时,安全区域的约束被转换为顶部和底部。



这里是一个简单的参考,作为比较(使类似的视觉效果)的现有(顶部和底部)布局指南和安全区布局指南。

安全区布局: 

AutoLayout


如何处理安全区域布局?

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

  • 如果未启用,则启用“安全区布局”。
  • 如果它们显示与

    超级视图

    并重新连接所有的安全布局锚。或者双击约束并编辑超级视图到SafeArea锚点的连接

下面是示例快照,如何启用安全区布局和编辑约束。

以下是上述更改的结果


基于SafeArea的布局设计 
在为iPhoneX设计时,您必须确保布局填充屏幕,并且不会被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

大多数使用标准的、系统提供的UI元素(如导航条、表和集合)的应用程序都会自动适应设备的新形式因素。背景材料延伸到显示的边缘,UI元素被适当地嵌入和定位。

对于具有自定义布局的应用程序,支持iPhoneX也应该相对容易,特别是如果您的应用程序使用自动布局,并遵循安全区域和边缘布局指南。


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

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

private let greenView = UIView()

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

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)}

一如既往地使用根视图的layoutMarginsGuide创建引导和尾随边距约束:

 let margins = view.layoutMarginsGuide    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

现在,除非您只针对IOS 11,否则需要将安全区布局指南约束包装为可用#,并返回到早期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)
   ])}


结果:


以下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    }
  }}

下面是示例代码目标-C:


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


需要安全区域来处理iPhone-X的用户界面设计。以下是基本指南如何使用安全区域布局设计iPhoneX的用户界面


查看完整回答
反对 回复 2019-07-10
?
牛魔王的故事

我想提一下当我试图调整一个基于SpriteKit的应用程序,以避免新的iphone X的圆角和“凹槽”时,我第一次被抓住,正如最新的建议。人机界面指南*新财产safeAreaLayoutGuideUIView需要询问视图已添加到层次结构中(例如,在-viewDidAppear:)为了报告有意义的布局框架(否则,它只返回整个屏幕大小)。

从财产的文件:

表示视图中不被条形条和其他内容遮掩的部分的布局指南。当视图在屏幕上可见时,本指南反映了导航栏、选项卡条、工具栏和其他祖先视图未涵盖的视图部分。(在tvOS中,安全区反映没有覆盖屏幕边框的区域。)如果视图当前未安装在视图层次结构中,或尚未在屏幕上显示,则布局指南边缘与视图边缘相等。.

(强调地雷)

如果你早读到-viewDidLoad:layoutFrame指南将是{{0, 0}, {375, 812}}而不是预期的{{0, 44}, {375, 734}}


查看完整回答
反对 回复 2019-07-10
?
守着一只汪
  • 早些时候在IOS 7.0-11.0中<

    弃用UIKit

    使用

    TopLayoutGuide & 底层指南

    那就是

    UIView

    财产
  • iOS 11+用途安全AreaLayoutGuide这也是UIView财产

  • 使能安全区布局指南来自文件检查器的复选框。

  • 安全区域可以帮助您将视图放置在整个界面的可见部分中。

  • 在……里面视频流安全区域还包括屏幕的过扫描接口,表示屏幕边框覆盖的区域。

  • SecurityAreaLayoutGuide反映视图中未被导航条、选项卡条、工具栏和其他祖先视图覆盖的部分。
  • 使用安全区域作为布局您的内容的帮助,如UIButton等。

  • 在为iPhoneX设计时,您必须确保布局填充屏幕,并且不会被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

  • 确保背景延伸到显示的边缘,垂直滚动布局,如表和集合,一直延续到底部。

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

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

  • 一旦你启用安全区布局指南您可以看到接口生成器中列出的安全区域约束属性。

可以设置相应的约束。self.view.safeAreaLayoutGuide作为-

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;

斯威夫特

   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
        }


查看完整回答
反对 回复 2019-07-10

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信