适配iPhone X后的一点经验教训

作者: Lol刀妹 | 来源:发表于2017-10-14 18:14 被阅读1479次

    适配iPhone X虽然没什么难度但是很繁琐,因为导航栏高度一变基本上就影响到了所有页面。
    如果项目是用的自动布局,适配起来应该会很快,但是很遗憾我这个项目没有使用自动布局😭。(13年的老古董貌似也不存在自动布局这种说法😳,后面我重构也没有全面使用自动布局。。。)

    曾经偷的懒在iPhone X出现的这天一一偿还。

    之所以觉得适配繁琐的原因就是:界面搭建写死了。

    比如说导航栏,项目中的导航栏都是自定义view,初始化的时候基本是这样的:

    self.naviView = [[CQShopCartNaviView alloc] 
        initWithFrame:CGRectMake(0, 0, screenWidth, 64)];
    

    没有使用自动布局就算了还把高度写死了。。。

    类似的还有tabBar,高度写死的49,不过整个项目也就一个tabBar,所以修改也很快。

    适配iPhone X说白了就是修改控件的高度。。。

    这次适配iPhone X我的一点经验教训就是:

    1.一定要合理运用自动布局

    自动布局的特点是:它是活的,能够根据结构的变化而变化。

    相对于frame绝对布局,自动布局的优势还是很明显的,不只是这次适配iPhone X,之前适配热点被接入时状态栏高度发生改变我就深有体会了,如果用的自动布局,根本不需要适配,因为本来就是动态变化的,如果是绝对布局,你要接收状态栏高度改变的通知,然后一个一个页面调整。。。

    还有,我迭代开发一年多的体会是:自动布局面对多变的需求能更好应对。

    2. 通用全局常量一定要用宏定义

    这样可以一处修改,全部修改。
    说白了就是不要写死,比如说导航栏高度,直接写64直接洗白。

    适配iPhone X用到的宏有:

    // 判断是否是iPhone X
    #define iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)
    // 状态栏高度
    #define STATUS_BAR_HEIGHT (iPhoneX ? 44.f : 20.f)
    // 导航栏高度
    #define NAVIGATION_BAR_HEIGHT (iPhoneX ? 88.f : 64.f)
    // tabBar高度
    #define TAB_BAR_HEIGHT (iPhoneX ? (49.f+34.f) : 49.f)
    // home indicator
    #define HOME_INDICATOR_HEIGHT (iPhoneX ? 34.f : 0.f)
    

    3.最顶部的控件向下靠,最底部的控件向上靠

    • 比如说自定义的导航栏:

    导航栏中的控件的约束应该以底部为基准。
    • 再比如说自定义的tabBar:

    tabbar中的控件的约束应该以顶部为基准。

    这样设置约束不管将来导航栏或tabbar的高度怎么变都不虚。

    实际项目中最顶部的不一定的是导航栏,最底部的也不一定是tabbar,不管是什么view,只要我们设置的约束都是向中间靠的,将来控件的高度怎么改变都不会导致布局错乱。

    总结

    1. 编程,一定要灵活,要稍微考虑长远点,我当初就是想当然的认为状态栏、导航栏和tabbar这些控件的高度是肯定不会变的,所以就直接写死了,导致现在不得不一一修改。
    2. 一定要紧跟潮流,如果当时我重构的时候就全部使用自动布局现在也不用那么麻烦了。

    相关文章

      网友评论

      • b2f70a645712:曾经偷的懒在iPhone X出现的这天一一偿还。:sob:
        Lol刀妹:@默认不存在 是这样的
      • benlue:对比适配iPhoneX我更加知道你的图片标签是如何做和如何定位的
        benlue:@无夜之星辰 是框架做的? 还是绘制上去的?
        benlue:@无夜之星辰 不是, 是你的图片上的标签是怎么准确摆放到对应的位置的?
        Lol刀妹:定位?用的高德地图SDK
      • csqingyang:问一下, tabBar 往上调整之后, 怎么去除下面的那条横线? 我的项目中, 使用的是继承的 UITabbarController, 在做控制器的 push 操作时, 在 X 上, 会有 tabbar 向上抖动的 bug 出现. 能问一下对应的问题有人遇到过吗?
        Lol刀妹:@风吹柳絮如花落 调整tabbar的高度可以不?我的是自定义的view,适配iPhone X就调整下tabbar的高度
        Lol刀妹:@csqingyang 额,我没遇到这个问题

      本文标题:适配iPhone X后的一点经验教训

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