美文网首页iOS学习笔记iOS之功能细节ios新版本特性与适配
34. 适配iOS11,适配iPhoneX,适配安全区的几个文章

34. 适配iOS11,适配iPhoneX,适配安全区的几个文章

作者: 春田花花幼儿园 | 来源:发表于2017-09-21 23:15 被阅读7437次
    • 重磅!!! 在继今年年初WWDC之后,苹果官方文档的中文适配逐步加快!现在已经出了官方版适配iPhoneX的中文文档!《为 iPhone X 更新您的 app》。苹果是越来越重视中国的开发者了!
    • 2017.09.29更新:修正关于安全区域的描述!更加完善!推荐大家看WWDC的视频
    • 2018.02.04更新:公司真正适配iPhoneX之后的一些纠正,推荐两篇文章。

    2018.02.04更新部分:公司真正适配iPhoneX之后的一些纠正,找到了这篇文章,既然有现成的我就不写了。


    2017.09.29更新部分:

    首先关于适配iPhoneX,适配安全区讲,因为iPhoneX的刘海和底部Home Indicator上滑指示条的存在,所以弄出来一个安全区的概念。这个区域,就是保证我们的内容的在任何时候,尤其是横屏状态下,内容不被遮盖!而且这个安全区是可以自己设置更改的,不过修改了安全区到底是否影响审核,还是需要看苹果时候的审核规则,目前来看,还是老老实实的把内容写到安全区域内为上策~

    这里特别注意!如果你的应用支持横屏, 那么在横屏状态下的安全区域一定要留意!,当然,竖屏状态下,底部34pt的安全区域也要注意! 另外,安全区域内不要加交互逻辑! 这部分不允许应用和用户交互! 也就是说 王者农药挡住了金币 不可能发生,因为过审都是个问题!这个在《Human Interface Guidelines - iPhone X》说的很清楚, 如下图:

    横,竖屏幕下的安全区域 iPhone X 的 Home Indicator 区域(转)

    另外: 从《如何评价新版 iPhone X 的设计规范?》中,总结得到:当竖屏的时候,安全区的顶端始于屏幕顶端44pt(132px)处,而下端距离屏幕底端34pt(102px)长;当你的应用在横屏的时候,与竖屏一样,有刘海的一侧留出44pt,无刘海的一侧34pt。

    Ps: 猜想一下:我觉得底部的安全距离,在竖屏状态下且没有tabbar的页面,去掉还是蛮爽的一件事情,不过,我们看到上图中,底部的安全区域是留给 Home Indicator 的,高度为34pt,作用是替代双击Hone键! 把内容填充到底部会和《Human Interface Guidelines - iPhone X》的指导意见相违背,但是底部留出那么大一块区域,全面屏看起来也是怪怪的。
    还有,最近我们提交的上架审核,貌似苹果还没有针对应用对iPhoneX的适配情况进行审查,所以目前,竖屏状态下,去掉底部的安全距离视觉上很爽,但是不知道审核会不会遇到问题。现在有两种声音,一种是在底部安全区域不能加内容,另一种是在安全区域的内容不能交互,影响 Home Indicator 的使用。目前建议大家还是中规中距,毕竟iPhone X上市和普及是个漫长的过程,适配也是一个有很长时间的缓冲期,我们可以后续再看。 如果你等不及的话,可以参考一下iPhone X模拟器中系统应用的处理方式。

    再说一下,依照我的理解,这个安全区域,白话来讲,其实就是系统给你的一个指导的显示区域的!参考这个值适配会非常简单。当然,你也可以无视这个方法,手动自己适配,这个当然是绝对不推荐的了。

    我觉得安全区域目前最终的两个属性和一个方法是:

    • safeAreaInsets和safeAreaLayoutGuide
    • -(void)viewSafeAreaInsetsDidChange

    关于这两个属性和一个方法,网上已经有很多说明,下边是我适配过程中的几个宏,还在适配,还在完善:

    // UIScreen width.
    #define  LL_ScreenWidth   [UIScreen mainScreen].bounds.size.width
    
    // UIScreen height.
    #define  LL_ScreenHeight  [UIScreen mainScreen].bounds.size.height
    // iPhone X 
    #define  LL_iPhoneX (LL_ScreenWidth == 375.f && LL_ScreenHeight == 812.f ? YES : NO)
    
    // Status bar height.
    #define  LL_StatusBarHeight      (LL_iPhoneX ? 44.f : 20.f)
    
    // Navigation bar height.
    #define  LL_NavigationBarHeight  44.f
    
    // Tabbar height.
    #define  LL_TabbarHeight         (LL_iPhoneX ? (49.f+34.f) : 49.f)
    
    // Tabbar safe bottom margin.
    #define  LL_TabbarSafeBottomMargin         (LL_iPhoneX ? 34.f : 0.f)
    
    // Status bar & navigation bar height.
    #define  LL_StatusBarAndNavigationBarHeight  (LL_iPhoneX ? 88.f : 64.f)
    
    #define LL_ViewSafeAreInsets(view) ({UIEdgeInsets insets; if(@available(iOS 11.0, *)) {insets = view.safeAreaInsets;} else {insets = UIEdgeInsetsZero;} insets;})
    
    

    因为网上出的了很多资料,所以我只负责收集一下,觉得有价值的几篇文章,看完相信大家觉得适配iPhone X其实很简单(如果前期基类写的好的话,只需要在基类和在个别需要特别显示效果的页面修改就可以了! 凸显基类此时的重要性,你的项目有基类吧?):

    最近看到了美团点评技术团队的适配文章,昨天才发出来的,细节很足! 首推大家看下:
    《关于刘海打理这种事儿,美团点评的iOS工程师早就有经验》 第3, 第4篇也是大厂的适配方案, 但是出的比较早。剩下的文章就按照序号依次看就可以了。

    1. 《关于iPhone X 的适配》
      原作者博客地址:
      https://www.lee1994.com/guan-yu-iphone/

    2. 《iOS11 & iPhone X 适配指南》

    3. 《企鹅 FM-iOS 11 安全区域适配总结》

    4. 《简书App适配iOS 11》

    5. 《iOS11适配iPhoneX总结》

    6. 《适配iOS11&iPhoneX的一些坑》

    7. 《Human Interface Guidelines - iPhone X》

    8. 《Human Interface Guidelines - What's New in iOS 11》

    9. 《iOS11、iPhone X、Xcode9 适配指南》


    小细节:

    1. 《iOS11保存相册崩溃》

    另外,iOS程序犭袁, 简书写了一系列的针对iOS11新特性的文章,大家可以跟随关注下:

    这次升级并没有改太多的东西,主要问题是在安全区上。
    iOS11开发之有趣的新特性,第一波。
    整体 iOS 11 的适配工作量并不是很多,我就不讲了,讲一些有趣的东西,期初想起名叫“实用的”,虽然今天讲的大部分都是实用的,不过有一些还是“有趣但不太实用”,或者说会在相当长一段时间内不太实用。

    交流


    希望能和大家交流技术
    Blog:http://www.lilongcnc.cc


    相关文章

      网友评论

      • 直持小崔:这是我 见过最用心的 一篇了 走心了 老铁
      • yunFeng:《关于刘海打理这种事儿,美团点评的iOS工程师早就有经验》 这个链接好像挂了 麻烦楼主修复下。。。
        yunFeng:链接好像都失效了
      • 只懂搬砖的z_bl:请问个问题,好像在横屏下,LL_iPhoneX这个宏的判断应该是错的吧。。
        直持小崔:一般除了 游戏 或者特殊的应用 基本都是触屏吧 所以不影响
        只懂搬砖的z_bl:@春田花花幼儿园 因为我一开始也是这么判断的,后来有个横屏,就挂了!所以问一哈~:stuck_out_tongue_closed_eyes:
        春田花花幼儿园:@holiMoIng 不好意思哈, 这个是基于竖屏的.
      • footSInRoad:谢谢分享

      本文标题:34. 适配iOS11,适配iPhoneX,适配安全区的几个文章

      本文链接:https://www.haomeiwen.com/subject/czqxextx.html