iOS适配刘海屏，看我避免踩坑
终生程序员小松哥关注
0.9892018.12.31 17:03:52字数 1,092阅读 3,262
为什么要写这篇文章呢？在上搜索了几篇刘海屏适配的技术方案，按惯例看了下排名和查看次数在前面的几篇文章。顺着这些文章的方案我妥妥的入坑了。为避免后来再有人入坑，就把我的适配方案整理了下。
典型误导做法1：
#define kStatusBarHeight ([[UIApplication sharedApplication] statusBarFrame].size.height)
#define kIS_IPHONE_X (kStatusBarHeight >= 44.0f)
典型误导做法2：
//屏幕宽度#defineSCREEN_WIDTH ([UIScreen mainScreen].bounds.size.width)//屏幕高度#defineSCREEN_HEIGHT ([UIScreen mainScreen].bounds.size.height)//屏幕分辨率#defineSCREEN_RESOLUTION (SCREEN_WIDTH * SCREEN_HEIGHT * ([UIScreen mainScreen].scale))//iPhone X系列判断#defineIS_iPhoneX (CGSizeEqualToSize(CGSizeMake(375.f, 812.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(812.f, 375.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(414.f, 896.f), [UIScreen mainScreen].bounds.size) || CGSizeEqualToSize(CGSizeMake(896.f, 414.f), [UIScreen mainScreen].bounds.size))//状态栏高度#defineStatusBarHeight (IS_iPhoneX ? 44.f : 20.f)//导航栏高度#defineNavBarHeight (44.f+StatusBarHeight)//底部标签栏高度#defineTabBarHeight (IS_iPhoneX ? (49.f+34.f) : 49.f)//安全区域高度#defineTabbarSafeBottomMargin (IS_iPhoneX ? 34.f : 0.f)
典型误导做法3：
#define INTERFACE_IS_IPHONEX (@available(iOS 11.0,*) && ([UIApplication
sharedApplication].keyWindow.safeAreaInsets.bottom > 0)?YES:NO)
顺着这三种做法来适配的话，你会像我一样妥妥入坑了。
做法1的问题在于，他是通过statusBarFrame的高度来确定是否是iPhoneX系列。那么是不是所有iPhoneX的statusBarFrame一定都是44.0呢？如果这条假设不成立，那么后面的结论就是有问题了。我看到的结果，iPhoneX的statusBarFrame高度在某些情况下不是44.0；这个某些情况就是，手机处于横屏状态的时候。
做法2的原理在于他是通过屏幕尺寸来判定IPHONEX。目前来看没啥大问题。可是如果苹果明年再出现一种屏幕的话，那代码就得重写了。所以第2种做法的问题在于适用性不高。
做法3应该说很巧妙，作者还是思考过各种情况后，决定使用safeAreaInsets.bottom作为判定是否为刘海屏的依据。那他的问题在哪里？问题在于好麻烦，既要判断机型（iPhone X），又要判断iOS版本@available(iOS 11.0,*)。
在介绍我的解决方案前，先带大家看看，竖屏和横屏状态下safeAreaInsets的top，bottom，left，right的值各什么。
1，竖屏情况下：top: 44.000000, bottom:34.000000, left:0.000000, right:0.000000
2，横屏情况下：top: 0.000000, bottom:21.000000, left:44.000000, right:44.000000
对于横盘情况下safeAreaInsets引起了我很大兴趣。
1，为什么横屏时bottom从34.0变为了21.0。在创建的测试工程了试了下，明白了原因。因为底部有条用来替代原来home按键的黑线。
2，为什么横屏时top变为了0.0。因为左右边框都往里靠了44.0，完美的避开了圆角；而且也没刘海遮挡；所以不用往下偏移。
我的方案
我的方案嘛，其实很简单就是依靠Masonry开源布局SDK + iOS11上新出的safeArea。好消息是，最新的Masonry已经支持了safeArea。样例代码如下：
[view mas_makeConstraints:^(MASConstraintMaker *make) {
if (@available(iOS 11.0, *)) {
make.left.equalTo(self.view.mas_safeAreaLayoutGuideLeft);
make.right.equalTo(self.view.mas_safeAreaLayoutGuideRight);
make.top.equalTo(self.view.mas_safeAreaLayoutGuideTop);
make.bottom.equalTo(self.view.mas_safeAreaLayoutGuideBottom);
} else {
make.leading.trailing.top.bottom.equalTo(self.view);
}
}];
也是说代码里只要针对iOS11版本前或后，进行不同处理即可。相比上面的第3种方案少了些周折。
个人体会
1，搜索排名在前的解决方案未必是正确的，包括上结果。
2，克服对新东西的恐惧就是尽快了解它。老实说开始要去适配刘海屏，心里多少有点发怵。但真正花点时间去了解，发现也就那么回事。
3，尽快放弃用xib和storyboard的布局。手动代码布局更方便管理样式和多人合作。迁移的陈本，就是花半天实践下Masonry。相信我，非常值得。
样例代码
GitHub下载