随着iOS11正式版的推送和iPhoneX的即将到来，是时候为我们的App做新一轮的适配，下面我来总结下我们项目中遇到的一些问题。



导航栏
导航栏高度的变化
iOS11之前导航栏默认高度为64pt(这里高度指statusBar + NavigationBar)，iOS11之后如果设置了prefersLargeTitles = YES则为96pt，默认情况下还是64pt，但在iPhoneX上由于刘海的出现statusBar由以前的20pt变成了44pt，所以iPhoneX上高度变为88pt，如果项目里隐藏了导航栏加了自定义按钮之类的，这里需要注意适配一下。
导航栏图层及对titleView布局的影响
iOS11之前导航栏的title是添加在UINavigationItemView上面，而navigationBarButton则直接添加在UINavigationBar上面，如果设置了titleView，则titleView也是直接添加在UINavigationBar上面。iOS11之后，大概因为largeTitle的原因，视图层级发生了变化，如果没有给titleView赋值，则titleView会直接添加在_UINavigationBarContentView上面，如果赋值了titleView，则会把titleView添加在_UITAMICAdaptorView上，而navigationBarButton被加在了_UIButtonBarStackView上，然后他们都被加在了_UINavigationBarContentView上，如图：



图1



所以如果你的项目是自定义的navigationBar，那么在iOS11上运行就可能出现布局错乱的bug，解决办法是重写UINavigationBar的layoutSubviews方法，调整布局，上代码：
- (void)layoutSubviews {
    [super layoutSubviews];
    
    //注意导航栏及状态栏高度适配
    self.frame = CGRectMake(0, 0, CGRectGetWidth(self.frame), naviBarHeight);
    for (UIView *view in self.subviews) {
        if([NSStringFromClass([view class]) containsString:@"Background"]) {
            view.frame = self.bounds;
        }
        else if ([NSStringFromClass([view class]) containsString:@"ContentView"]) {
            CGRect frame = view.frame;
            frame.origin.y = statusBarHeight;
            frame.size.height = self.bounds.size.height - frame.origin.y;
            view.frame = frame;
        }
    }
}

再补充一点，看了简书App适配iOS11发现titleView支持autolayout，这要求titleView必须是能够自撑开的或实现了- intrinsicContentSize方法
- (CGSize)intrinsicContentSize {
    return UILayoutFittingExpandedSize;
}



UIScrollView、UITableView、UICollectionView


大家在iOS11设备上运行出现最多问题应该就是tableview莫名奇妙的偏移20pt或者64pt了。。原因是iOS11弃用了automaticallyAdjustsScrollViewInsets属性，取而代之的是UIScrollView新增了contentInsetAdjustmentBehavior属性，这一切的罪魁祸首都是新引入的safeArea，关于safeArea适配这篇文章iOS
 11 安全区域适配总结讲的很详细，感兴趣的可以看下，我直接贴适配代码，因为低版本直接用contentInsetAdjustmentBehavior会报警告，所有定义了如下的宏：
#define  adjustsScrollViewInsets(scrollView)\
do {\
_Pragma("clang diagnostic push")\
_Pragma("clang diagnostic ignored \"-Warc-performSelector-leaks\"")\
if ([scrollView respondsToSelector:NSSelectorFromString(@"setContentInsetAdjustmentBehavior:")]) {\
    NSMethodSignature *signature = [UIScrollView instanceMethodSignatureForSelector:@selector(setContentInsetAdjustmentBehavior:)];\
    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];\
    NSInteger argument = 2;\
    invocation.target = scrollView;\
    invocation.selector = @selector(setContentInsetAdjustmentBehavior:);\
    [invocation setArgument:&argument atIndex:2];\
    [invocation retainArguments];\
    [invocation invoke];\
}\
_Pragma("clang diagnostic pop")\
} while (0)



还有的发现某些界面tableView的sectionHeader、sectionFooter高度与设置不符的问题，在iOS11中如果不实现
-tableView: viewForHeaderInSection:和-tableView: viewForFooterInSection: ，则-tableView: heightForHeaderInSection:和- tableView: heightForFooterInSection:不会被调用，导致它们都变成了默认高度，这是因为tableView在iOS11默认使用Self-Sizing，tableView的estimatedRowHeight、estimatedSectionHeaderHeight、
estimatedSectionFooterHeight三个高度估算属性由默认的0变成了UITableViewAutomaticDimension，解决办法简单粗暴，就是实现对应方法或把这三个属性设为0。
如果你使用了Masonry，那么你需要适配safeArea


if (@available(iOS 11.0, *)) {
    make.edges.equalTo()(self.view.safeAreaInsets)
} else {
    make.edges.equalTo()(self.view)
}



iPhoneX
LaunchImage
关于iPhoneX(我就不吐槽刘海了...)，如果你的APP在iPhoneX上运行发现没有充满屏幕，上下有黑色区域，那么你应该也像我一样LaunchImage没有用storyboard而是用的Assets，解决办法如图，启动图的尺寸为1125x2436，or you can
iOS开发时如何使用 Launch Screen Storyboard。



图2

TabBarController
因为我们的项目用了第三方的TabBarController，在iPhoneX运行，tabBar看起来怪怪的...估计作者要等到猴年马月才适配iPhoneX，项目又着急上线，就自己修改了第三方，主要是tabBar高度及tabBarItem偏移适配，iPhoneX由于底部安全区的原因UITabBar高度由49pt变成了83pt，可以通过判断机型来修改相关界面代码，方式有两种，通过分辨率判断：
#define kDevice_Is_iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)

通过设备名称判断：

@"iPhone10,1" : @"iPhone 8",

@"iPhone10,4" : @"iPhone 8",

@"iPhone10,2" : @"iPhone 8 Plus",

@"iPhone10,5" : @"iPhone 8 Plus",

@"iPhone10,3" : @"iPhone X",

@"iPhone10,6" : @"iPhone X",

这里推荐使用UIDeviceIdentifier。
目前遇到的就这些问题，后续再遇到会继续补充~

NAVIHEIGHT:(iPhoneX ? 88 : 64)、 TABBARHEIGHT: (iPhoneX ? 83 : 49)

新的iPhone、iPhone12发布后，我第一件想做的事就是如何适配新iPhone，新的iPhone都是刘海屏幕

先看下各个尺寸






于是我就做了下面的宏定义（ScreenHeight就省略了）：

#define iPhoneX ：(ScreenHeight == 812.0f || ScreenHeight == 896.0f || ScreenHeight == 844.0f || ScreenHeight == 926.0f)

#define AdaptNaviHeight      (iPhoneX ? 24 : 0) //状态栏高度

#define AdaptTabHeight       (iPhoneX ? 34 : 0) //Tab bar 圆角部分高度

#define NAVIHEIGHT           (iPhoneX ? 88 : 64) //导航

#define TABBARHEIGHT         (iPhoneX ? 83 : 49) // 分栏

除了上面的方法外，官方的iPhone型号对照已更新，我们可以根据对照表，找到具体的手机型号。

具体方法及枚举如下

+ (NSString *)getDeviceSystemName {
    static dispatch_once_t one;
    static NSString *name;
    dispatch_once(&one, ^{
        NSString *model = [[UIDevice currentDevice] machineModel];
        if (!model) return;
        NSDictionary *dic = @{
                              @"iPhone7,2" : @"iPhone 6",
                              @"iPhone7,1" : @"iPhone 6 Plus",
                              @"iPhone8,1" : @"iPhone 6s",
                              @"iPhone8,2" : @"iPhone 6s Plus",
                              @"iPhone8,4" : @"iPhone SE",
                              @"iPhone9,1" : @"iPhone 7",
                              @"iPhone9,2" : @"iPhone 7 Plus",
                              @"iPhone9,3" : @"iPhone 7",
                              @"iPhone9,4" : @"iPhone 7 Plus",
                              @"iPhone10,1" : @"iPhone 8",
                              @"iPhone10,4" : @"iPhone 8",
                              @"iPhone10,2" : @"iPhone 8 Plus",
                              @"iPhone10,5" : @"iPhone 8 Plus",
                              @"iPhone10,3" : @"iPhone X",
                              @"iPhone10,6" : @"iPhone X",
                              @"iPhone11,2" : @"iPhone XS",
                              @"iPhone11,4" : @"iPhone XS Max",
                              @"iPhone11,6" : @"iPhone XS Max",
                              @"iPhone11,8" : @"iPhone XR",
                              };
        name = dic[model];
    });
    return name;
    
}

tips：

1、关于每个控制器的适配，我采用了继承的方式，并且自定义了导航栏，所以导航栏的高度我在基控制器就做了控制，子控制器直接取自定义的导航，就可以做页面适配了。

2、关于自定义导航上的控件，每个按钮和标题都以导航的底部为参考，这样导航高度变了，也不会导致导航上控件的位置错误。

 

1、介绍图
2、不同屏幕、方向对应的类型 （wAny hAny 是所有类型）
2.1、iPhone4S/SE/6/X
2.2、iPhone6Plus
2.3、iPad（分全屏、split view）
3、如何选中各种类型
3.1、所有类型
        如下图，仅仅选了设备，没有选择Vary for Traits，这种类型就是 wAny hAny，在这种类型下做的操作是适配所有类型
3.2、wC hC类型（iPhone4S/SE/6/X 横屏）
3.2.1、选中设备和方向
        如下图，1 选中设备iPhoneSE，2 选中横屏，3 可以看到wC hC类型出来了，4 点击Vary for Traits 开始决定是否适配wC 或 hC
3.2.2、选择wC 或 hC
        如下图。Introduce Variations Based On: 如果只选中Width是 wC hAny类型，只选中Height是wAny hC类型，选中Width和Height是wC hC类型
3.2.3、进入类型模式
        如图展示，已经进入wC hC类型
3.2.4、退出类型模式
        操作完成后，必须点击Done Varying按钮，退出类型模式。如下图。
3.3、wC hR类型（iPhone所有设备竖屏、iPad部分Split View下一部分：可对照如上2知识点）
3.3.1、选择设备和方向
        如图，1 选中iPhoneSE，2 选中横屏，3 看到wC hR类型，4 点击Vary for Traits
3.3.2、选中wC 或 hR
        如下图。Introduce Variations Based On: 如果只选中Width是 wC hAny类型，只选中Height是wAny hR类型，选中Width和Height是wC hR类型 (文字似曾相识啊，哈哈，和wC hC都一样的)
3.3.3、进入类型模式、退出类型模式
        所有的类型模式进入和退出都是一样的，在这就不一一描述了。

3.4、wR hC类型 （iPhone6Plus/7Plus/8Plus）
        同上面类型选择

3.5、wR hR类型（iPad所有设备Full Screen）
        iPad和iPhone不同的是，iPad多了个选项adaptation，有Full Screen、Split View2/3、Split View1/3，是iPad特有的分屏模式，其他操作和前面的类型操作一样。

4、一个控件适配不同类型（wC hC、wC hR、wR hC、wR hR）
4.0、在wAny hAny类型下添加一个控件
4.1、wC hC 类型下添加约束
        首先切换到wC hC类型，就是选中iPhoneSE横屏的 Width和Height，然后添加约束上面10，左边0，如下图
4.2、wC hR类型下添加约束
        首先取消wC hC类型，再切换到wC hR类型，就是选中iPhoneSE竖屏的 Width和Height，然后添加约束上面20，左边50，如下图
4.3、wR hC类型和wR hR类型
        和前面两个类型都是一样操作的。

        iPhoneSE横竖屏适配效果：

5、在不同类型添加控件
        跟上面的操作大致相同，不同的是需要先切换到对应的类型下再添加控件。
        例：在wC hR下添加一个UILabel，在wC hC下添加一个UIButton

        效果图：

转载链接：https://www.jianshu.com/p/0b91341fead4

参考文献：
iOS8--关于regular和compact的理解
autolayout Compact,Regular,Any 解析
iOS 8 AutoLayout与Size Class自悟

前言
        苹果近日发布了全新的iPhone X全面屏手机，这也是首款采用OLED屏幕的iPhone手机，它的正面设计被更多人吐槽，之前被戏称为“刘海”的凹槽现在有了更多其他名称，“眉毛”、“头帘”等等。对于用户而言，iPhone
 X 的刘海可能是让人又爱又恨的设计。
        爱的是，这一刘海像司马昭之心一样传达着「我在使用 iPhone X」这一个事实，正如 iPhone 7 的亮黑色一般。当然，包括 Face ID 以及 Animoji 等在内的新颖功能也会让人爱不释手。恨的原因，也很明显，这个刘海让屏幕不再方正圆润，就像一块膏药般永远的贴在你的屏幕上。看视频、看照片亦或其他，当你使用大部分应用时，它可能都会很显眼。
        这几天被iPhone X一顿刷屏，标题写着“iPhone
 X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子，与设计图无关的内容通通不提，开始。

一、设计尺寸

 
       发布的iPhone 8属于常规升级，屏幕与以往的iPhone6、6S、7系列相同。在发布的新机中，只有iPhone X的分辨率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去我们熟知的iPhone 4.7''、iPhone 5.5'' 放大模式宽度相同。通俗的说，iPhone X可看做是iPhone 4.7'' 的加长版



然而，事情并不是设计图加长这么简单。


二、交互设计
        过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域Safe
 Area，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南，从中可以看出，Apple 希望开发者将这个刘海毫无遮掩地呈现在 iPhone X 的「脑袋上」。

指南一：当为 iPhone X 适配应用时，请确保布局填充整个屏幕，同时不被设备的圆角、传感器和下方的 Home 条所遮挡。


在使用图片时，请注意长宽比差异。iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhone
 X上全屏显示时会出现裁剪。同样，全屏iPhone X图片在其它iPhone也会出现裁剪，所以请注意两种设备适配。

指南二：不要尝试去隐藏设备的圆角、刘海或 Home 条，比如故意在屏幕顶部和底部使用黑色素材。


参考iOS 原生应用可看出 Apple 的意思：刘海上下不要放任何内容。
  
       大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X！Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。如果app使用自定义控件或非标准布局，要在iPhone X上运行良好需要一点修改。

苹果给出的安全区域如下



页面内容不能超出安全区域（Safe
 Area）

避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。（底部横条是Home键）



 
       iPhone X 状态栏高度更高，在电话和定位等后台任务时，高度不会变化（就是打电话和导航时，原先顶部增加的彩色带，现在变成时间信息底部的彩色气泡，见下图）







        值得注意的是，iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部操作栏也有放大讲完竖屏，再说横屏。和竖屏一样，横屏的内容也要放置在Safe
 Area中



 
       避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里，用户操作起来也很费劲，尽量在用户手指可及区域内设计功能



底部虚拟Home指示条
        作为去除实体Home按键后的衍生物，底部将出现一个虚拟的Home指示条，用以实现常用的交互功能，锁屏状态下向上滑动解锁，应用内向上滑动回到主屏，向上滑动并停止片刻进入多任务切换窗口，虚拟Home指示条大多数情况下将会存在于屏幕的下方，而这个虚拟Home指示条只有黑、白两种颜色。
        在底部有导航栏的app中，将会形成屏幕内的双下巴，部分应用如果具备从底部上滑的操作，为了和底部上滑回到主屏相区分，苹果提供了一个边缘保护的方案，第一次上滑是唤醒Home指示条，第二次才会激活原功能。而对于最受关注的全屏状态，虚拟Home指示条则会自动隐藏，不过尴尬的是，如果这时候是横屏状态，虚拟Home指示条也会跟随转动，而安卓虚拟按键则会始终存在于屏幕下方。全屏状态下点击屏幕后，虚拟Home指示条才会显示。

        最后说下最核心的问题，Safe Area 范围有多大？比对了官网上所有与iPhone X相关的界面，可以确定，Safe Area区间如下：




        对于习惯用750x1334作图的设计师而言，iPhone
 X的到来并不会带来太大影响，iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异
















        iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point（134 px，@2x）

对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。









        由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调。如果应用程序需要隐藏状态栏，请重新考虑iPhone
 X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度，状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。






三、图标设计
 
       底部导航栏图标，过去的做法是当前激活模块的图标为剪影风格，其他图标为线性风格。设计师需要做两套图标。分别是一套剪影，一套线性。而现在统一为剪影，而当前激活模块的图标使用平铺色代表激活。


四、系统色系增强
 
       iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验！




免责声明
       本文以翻译《designing for iPhone X》为主，借鉴参考文献并结和自己的工作经验整理而来，仅供各位设计师工作参考，非商业用途，对文中有争议或侵权行为，请及时联系我调整。谢谢你们的阅读！




参考文档：

1、《designing for iPhone X》

2、三分钟弄懂iPhoneX设计尺寸和适配


3、iPhone X的全面屏 让设计师操碎了心


4、iPhoneX设计规范




阅读拓展：

1、设计师如何设计iPhoneX视觉稿