iPhoneX/iOS11最新适配指南

原文链接: http://fighting300.com...

iPhone发布会前,就隐隐感觉到一波适配工作要袭来的赶脚,果然不出所料。
新版iPhone的适配工作主要集中在iPhoneX上,相信大家已经对iPhoneX的刘海记忆深刻了,除了吐槽,留给我们的还有比较麻烦的适配工作。下面简单分享下在整理过程中发现的适配注意点。(适配工作主要在UI方面,后续发现的适配点会陆续补充到该文档中)

iPhoneX 375x812尺寸图

上下黑边问题

运行新版Xcode的iPhoneX模拟器,你可能发现之前的APP在iPhoneX屏幕没填充满,上下有黑色区域,应该是你的app之前未用LaunchScreen.Storyboard作为启动页面,可以使用LaunchScreen来当做入场页面,这样APP才会自动适配为iPhoneX的大小。或者修改Assets中的LaunchImage,添加iPhoneX的Launch图如下(1125*2436)。

LaunchImage适配

iOS11新增版本判断API

iOS11版本现在有了简单的API,不用再手写iOS版本判断了。

  if (@available(iOS 11.0, *)) {
    // 版本适配
  }
  // 或者
  #ifdef __IPHONE_11_0   
  #endif

目前没发现有iPhoneX的机型判断API,暂时可以使用size来做代替判断。

  #define kDevice_iPhoneX CGSizeEqualToSize(CGSizeMake(375, 812), [[UIScreen mainScreen] bounds].size)
  if (UIScreen.mainScreen.bounds.size.height == 812) {
      NSLog(@"this is iPhone X");
  }

UI适配

导航栏适配

iPhoneX由于多了大圆角、传感器(齐刘海)以及底部访问主屏幕的指示遮挡,所以需要注意原有这部分内容的设计。
iOS11前导航栏的高度是64,其中statusBar的高度为20,而iPhoneX的statusBar高度变为了44,如果是自定义的NaviBar,这部分需要做相应的适配。

iPhoneX的底部增加了虚拟Homeq区,由于安全区域的原因默认tabBar的高度由49变为83,增高了34,所以自定义的底部TabBar也需要需改其适配方案。
可能有部分APP使用了RN来实现页面,不要忘了在RN中修改相应NaviBar/TabBar的高度。

iPhoneX尺寸
安全区域

安全区域定义了view中可视区域的部分,帮助我们将view放置在整个屏幕的可视的部分。即使把navigationbar设置为透明的,系统也认为安全区域是从navigationbar的bottom开始的。这样保证不被系统的状态栏、或父视图提供的view如导航栏覆盖。

安全区域

iOS11的UIViewController和UIView新加了-(void)viewSafeAreaInsetsDidChange方法,当安全区域改变后该方法会被调用。然后在该方法中根据safeAreaInses属性更新子视图中控件的布局位置。
当然如果你要改变一个UIViewController的safeAreaInsets值, 可以通过设置addtionalSafeAreaInsets属性来实现, 例如你要自定义一些特殊的样式时。
需要注意的是viewSafeAreaInsetsDidChange在UIViewController中第一次调用的时间是在-(void)viewWillAppear:(BOOL)animated调用之后, 在- (void)viewWillLayoutSubviews调用之前。所以可以在viewWillAppear里设置受影响的页面的addtionalSafeAreaInsets属性。

- (void)viewSafeAreaInsetsDidChange{
    [super viewSafeAreaInsetsDidChange];
    if (@available(iOS 11.0, *)) {
        NSLog(@"safeAreaInset list= %@",NSStringFromUIEdgeInsets(self.view.safeAreaInsets));
        NSLog(@"safeAreaLayout list= %@",self.view.safeAreaLayoutGuide);
    }
}
UIScrollView & UITableView

测试过程中发现tableView会有20pt/64pt的偏移,其原因是由于iOS 11废弃了UIViewController的automaticallyAdjustsScrollViewInsets属性,新增了contentInsetAdjustmentBehavior属性,所以当超出安全区域时系统自动调整了SafeAreaInsets,进而影响了adjustedContentInset,在iOS11中决定tableView内容与边缘距离的是adjustedContentInset,所以需要设置UIScrollView的contentInsetAdjustmentBehavior属性。

1.手动适配
如果你使用了UITableView、UIScrollView,可以直接使用以下代码做适配,这样系统就不会主动为你设置边缘距离,但是你可能需要手动适配UITableView的contenteInset。

  #ifdef __IPHONE_11_0  
  // 单独作用与某个tableView
  if ([tableView respondsToSelector:@selector(setContentInsetAdjustmentBehavior:)]) {
    tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
  }
  // 作用与所有的UIScrollView
  UIScrollView.appearance.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
  // 设置view的宽高
  tableView.contentInset = UIEdgeInsetsMake(0, 0, 34, 0);
  #endif

2.自动适配
设置contentInsetAdjustmentBehavior属性为UIScrollViewContentInsetAdjustmentAutomatic,则系统会自动计算contentView的偏移量。

3.设置安全区域的addtionalSafeAreaInset
某些情况下,你需要顶部区域,比如广告区域覆盖Status,则可以设置相应页面的addtionalSafeAreaInset属性,这样系统不会将safeArea上调到从status开始。这样可以提供更好的用户体验。
例如如果你的SafeAreaInset值为(44,0,0,0),则需要设置相应的additionalSafeAreaInsets值为(-44,0,0,0)。

  if (@available(iOS 11.0, *)) {
      self.additionalSafeAreaInsets = UIEdgeInsetsMake(-44, 0, 0, 0);
  } else {
      // Fallback on earlier versions
  }

4.iOS11开始UITableView开启了自动估算行高,estimatedRowHeight estimatedSectionHeaderHeight estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAutomaticDimension,所以heightForHeaderInSection和viewForHeaderInSection应该一起使用,不然tableView顶部滑动的时候会有空白。
在适配过程中发现UITableView会在Header/Footer返回size为负值的情况下会(之前遗漏的bug)崩溃,这块可以自查下,而iOS11之前的版本不会。

其他方案......

另外有人对iPhoneX整个UIWindow做了内容的调整,只是UI还是有点丑,感兴趣的同学可以去看看该GitHub,不过可能这样的设计方案不会通过APPLE的审核。

API适配

LocalAuthentication 本地认证

本地认证框架提供了从具有指定安全策略(密码或生物学特征)的用户请求身份验证的功能。例如,要求用户仅使用Face ID或Touch ID进行身份验证,可使用以下代码:

  let myContext = LAContext()   
  let myLocalizedReasonString = <#String explaining why app needs authentication#>    
  var authError: NSError?   
  if #available(iOS 8.0, macOS 10.12.1, *) {   
      if myContext.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &authError) {   
          myContext.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: myLocalizedReasonString) { success, evaluateError in
              if success {  
                  // 用户验证通过  
              } else {  
                  // 用户验证失败,处理失败信息  
              }  
          }  
      } else {  
          // 不能执行策略验证,处理验证错误信息  
      }  
  } else {  
      // Fallback on earlier versions
  }

LAContext新增API如下:

  1. biometryType属性返回当前设备支持的生物学特征验证方式,他的值可以分别为typeFaceID、typeTouchID或者none。
  2. localizedReason需要验证时展示在弹框上的提示信息
参考文档
  1. https://developer.apple.com/videos/fall2017/
  2. https://developer.apple.com/iphone/
  3. http://www.jianshu.com/p/0ec6a98302c3
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 前言 苹果WWDC开发者大会上,终于发布了大家期待已久的iOS 11,有些新特性功能确实出人意料。不过大的方面苹果...
    Mr_Say_Yes阅读 3,195评论 6 15
  • 一、前言 iOS11发布也有一段时间了,每次版本升级,相关的适配工作当然是下个版本的核心工作之一。而且这次iOS1...
    景铭巴巴阅读 10,898评论 8 105
  • 随着Xcode GM版本发布,适配iOS 11也就提上了日程,总的来说整个适配过程不是很麻烦。建议观看今年WWDC...
    iOS骆驼阅读 2,619评论 1 6
  • 1.找 要想过真正有意义的生活,首要任务是要找到真正有意义的事。每天腾出时间来思考当天所做的事情,有助于自己反思,...
    sharemy的简书阅读 156评论 0 0
  • 双重身份暴露的我 还怎样表白 明明可以全身而退 却被一眼看穿了谎言 在我们的世界里 始终没有找到我的专属角色
    FM117阅读 79评论 0 0