美文网首页iOSUI
iPhoneX xib刘海屏 适配导航栏

iPhoneX xib刘海屏 适配导航栏

作者: iOS坚持者 | 来源:发表于2018-12-13 12:01 被阅读47次

众所周知,苹果从去年开始退出了刘海屏,导致现在市场上一堆的刘海屏幕,不管是Apple还是其他手机厂商的。在这里真是向吐槽一下国产品牌,特别是某两款手机,如果不开机不看 logo 的话很难识别是苹果还是某 po、某 vo 手机。闲话不多说,接下来我们讲讲怎么在 xib 中适配导航栏。

刘海屏推出的同时,iOS 系统也同步更新到了11.0,这个版本改动还是比较大的,毕竟是要为了刘海屏做些相应的改变。这其中个人认为最大的特点就是推出了安全区域 SafeArea概念,至于这个安全区域 SafeArea是什么,简单来说就是视图上不被其他视图所遮挡的区域,网上有很多这类的资料,在这就不详舒了。xcode 在 ios11及之后系统这个safeAreaInsets才为(20,0,0,0)或者(44.0.34.0),否则都是(0,0,0,0);

注意

在开发过程中我发现用iPhoneX 之前的手机中并且系统是 iOS12之前的系统时,safeAreaInsets会一直为(0,0,0,0)。不知道你们是不是也是这样的情况。

刘海屏幕的推出导致 iPhoneX 系列的手机状态栏从20变成44,状态栏从64变成88,获取导航栏高度可以看我这片博客,https://www.jianshu.com/p/4f9d750702ec

如果你的项目中有这类需求:

  • 不隐藏状态栏
  • 自定义导航栏
  • xib 来布局
    可以参考接下来我的做法,定义一个优先级高的距离self.view.top 至少64高度的约束A,再定义一个优先级低的相对于Safe Area.top距离44的约束 B,这样就能兼容Safe Area.top为0的情况了。
    如果你有类似的问题没有解决,也可以在简书上私信我。
    WX20181213-115632@2x.png
WX20181213-115721@2x.png WX20181213-115753@2x.png

相关文章

  • iPhoneX xib刘海屏 适配导航栏

    众所周知,苹果从去年开始退出了刘海屏,导致现在市场上一堆的刘海屏幕,不管是Apple还是其他手机厂商的。在这里真是...

  • ReactNative SafeAreaView修改IOS上下安

    Reactnative 使用SafeAreaView适配IOS iphonex 刘海屏 状态栏和底部背景色 最新新...

  • iOS 导航栏+状态栏 背景颜色渐变

    导航栏渐变完美适配ipone - x 齐刘海

  • iOS11及iPhoneX适配

    iOS11及iPhoneX适配 navigation bar适配 1. navigation bar 导航栏的高度...

  • iPhoneX适配(UI)

    1.相关宏 2.动态宽高的适配 iPhoneX之前:状态栏:20 导航栏:20+44iPhoneX之后:状态栏:4...

  • 屏幕适配【刘海屏适配】

    Android官方9.0刘海屏适配策略 如果非全屏(有状态栏),则app不受刘海屏的影响,刘海屏的高就是状态栏的高...

  • iPhoneX适配小记

    竖屏 我们都知道在iPhoneX之前机型: 状态栏(statusBar) + 导航栏(navigationBar)...

  • 安卓屏幕适配—刘海屏

    1、安卓官方9.0刘海屏适配策略 - 如果非全屏模式(有状态栏),则app不受刘海屏的影响,刘海屏的高就是状态栏的...

  • 刘海屏适配方案

    首先要清楚的是哪些界面需要适配刘海屏: 「有状态栏的界面」:刘海区域会显示状态栏,无需适配 「全屏界面」:刘海区域...

  • 安卓适配

    ------刘海屏------屏幕适配 | Android 刘海屏适配总结Android刘海屏适配方案Androi...

网友评论

    本文标题:iPhoneX xib刘海屏 适配导航栏

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