脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iPhoneX 序列适配

iPhoneX 序列适配方案(小结)

 更新时间：2018年09月25日 10:23:11   作者：蓝光95  
这篇文章主要介绍了iPhoneX 序列适配方案(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

和往常一样，苹果发布新产品，我们作为开发者都需要对系统和UI布局进行适配，今年也是一样。从去年发布的 iphoneX开始，iPhone 手机加入了刘海设计，而且针对于iphone的刘海，需要特殊的适配。今年新出的3款iphone都带有刘海，自然也不例外。

在iphonex以前iphone的顶部导航栏高度都是统一的64，底部导航栏是统一的49；从iphonex的刘海屏开始，出了一个SafeArea的概念，带刘海设计的iphone，顶部导航的高度由原来的64，变成了88，因为状态栏的高度由原来的20变成了44；底部导航栏的高度由原来的49，变成了83。

所以对于iphonex序列的手机的适配，都需要针对顶部导航&底部导航进行适配。只不过原来判断iphonex的方法，已经不能完全判断新的iphonex新机型。要么继续加if{}else{}进行判断，要么就是寻找新的方法，还好iphonex序列的机型的宽高比是有规律的。

从网上看到了别人的帖子列出了iphonex序列机型的宽高&比例：

//iphoneX 序列机型的屏幕高宽
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333

iphonex序列iOS原生的适配

#define SCREEN_HEIGHTL [UIScreen mainScreen].bounds.size.height
#define SCREEN_WIDTHL [UIScreen mainScreen].bounds.size.width
#define KIsiPhoneX ((int)((SCREEN_HEIGHTL/SCREEN_WIDTHL)*100) == 216)?YES:NO
//判断是否为 iPhoneXS Max，iPhoneXS，iPhoneXR，iPhoneX

react-native针对于iphonex序列机型的适配

const {width, height} = Dimensions.get('window');
//iphoneX 序列机型的屏幕高宽
//XSM SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//XS SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333
//XR SCREEN_HEIGHTL = 896.000000,SCREEN_WIDTHL = 414.000000 2.1642512077
//X  SCREEN_HEIGHTL = 812.000000,SCREEN_WIDTHL = 375.000000 2.1653333333

//目前iPhone X序列手机的适配算法：高宽比先转换为字符串，截取前三位，转换为number类型 再乘以100
export const isIphoneX = (Platform.OS === 'ios' && (Number(((height/width)+"").substr(0,4)) * 100) === 216);

总结

无论是iOS原生还是react-native，只要判断出是iphonex序列机型，针对顶部导航栏和底部导航栏做特殊的处理即可。保证顶部导航和底部导航的UI正确显示，能够正确响应事件。（如果适配不好，会出现UI显示不正确和事件不能够响应的情况。）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • iOS中Swift UISearchController仿微信搜索框

    iOS中Swift UISearchController仿微信搜索框

    这篇文章主要介绍了iOS中Swift UISearchController仿微信搜索框效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • iOS实现淘宝上拉进入详情页交互效果

    iOS实现淘宝上拉进入详情页交互效果

    最近遇到一个项目，项目中某个新需求的交互要求仿照淘宝上拉从下往上弹出宝贝详情。所以死打开淘宝APP仔细看了看，然后自己写了写，现在感觉效果差不多了，记录一下分享给大家，方法自己和大家需要的时候查看借鉴，感兴趣的朋友们下面跟着小编一起来学习学习吧。
    2016-11-11
  • iOS中UIScrollView嵌套UITableView的实践教程

    iOS中UIScrollView嵌套UITableView的实践教程

    在UIScrollView嵌套UITableView的问题相信大家都遇到过，小编最近在工作中就遇到了这个问题，所以这篇文章主要介绍了iOS中UIScrollView嵌套UITableView的相关资料，文中介绍的方法是通过自己的实践所得来的，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • iOS 简约日历控件EBCalendarView的实现代码

    iOS 简约日历控件EBCalendarView的实现代码

    本篇文章主要介绍了iOS 简约日历控件EBCalendarView的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • iOS TabBarItem设置红点（未读消息）

    iOS TabBarItem设置红点（未读消息）

    本文主要介绍了iOS利用TabBarItem设置红点（未读消息）的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-04-04
  • iOS开发技巧之WeakSelf宏的进化详解

    iOS开发技巧之WeakSelf宏的进化详解

    在程序中我们经常用到Block，但写weak self 时会比较繁琐，下面这篇文章主要给大家介绍了关于iOS开发技巧之WeakSelf宏的进化的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们一起来看看吧
    2018-05-05
  • iOS 自定义返回按钮保留系统滑动返回功能

    iOS 自定义返回按钮保留系统滑动返回功能

    这篇文章主要介绍了iOS 自定义返回按钮,保留系统滑动返回功能，实现方法非常简单，具有参考借鉴价值，需要的朋友参考下吧
    2017-01-01
  • IOS 开发之PickerView文字和随机数的使用

    IOS 开发之PickerView文字和随机数的使用

    这篇文章主要介绍了IOS 开发之PickerView文字和随机数的使用的相关资料,这里提供实例帮助大家理解掌握这部分内容，需要的朋友可以参考下
    2017-08-08
  • iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码

    iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码

    这篇文章主要介绍了iOS开发之UITableView与UISearchController实现搜索及上拉加载，下拉刷新实例代码的相关资料,需要的朋友可以参考下
    2016-04-04
  • iOS 沙盒图片保存读取实例

    iOS 沙盒图片保存读取实例

    下面小编就为大家分享一篇iOS 沙盒图片保存读取实例，具有很的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12

最新评论