美文网首页
iOS适配刘海屏,看我避免踩坑

iOS适配刘海屏,看我避免踩坑

作者: 终生程序员小松哥 | 来源:发表于2018-12-31 17:03 被阅读137次

    为什么要写这篇文章呢?在简书上搜索了几篇刘海屏适配的技术方案,按惯例看了下排名和查看次数在前面的几篇文章。顺着这些文章的方案我妥妥的入坑了。为避免后来再有人入坑,就把我的适配方案整理了下。

    典型误导做法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下载

    相关文章

      网友评论

          本文标题:iOS适配刘海屏,看我避免踩坑

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