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常见加密解密方法(RSA、DES 、AES、MD5)

    ios常见加密解密方法(RSA、DES 、AES、MD5)

    本篇文章主要介绍了ios常见加密解密方法(RSA、DES 、AES、MD5),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • iOS实现可拖动的浮动菜单

    iOS实现可拖动的浮动菜单

    这篇文章主要为大家详细介绍了iOS实现可拖动的浮动菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • IOS开发中使用writeToFile时的注意事项

    IOS开发中使用writeToFile时的注意事项

    本篇文章主要介绍了开发中使用writeToFile时的注意事项,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • IOS MenuViewController实现弹出菜单效果

    IOS MenuViewController实现弹出菜单效果

    这篇文章主要介绍了IOS MenuViewController实现弹出菜单效果,实现一个从下移动上来的弹出菜单,背景逐渐变深,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 快速上手IOS UIBezierPath(贝塞尔曲线)

    快速上手IOS UIBezierPath(贝塞尔曲线)

    本文主要介绍了IOS 贝塞尔曲线(UIBezierPath)的基础知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • iOS实现逐帧动画做loading视图

    iOS实现逐帧动画做loading视图

    这篇文章主要为大家详细介绍了iOS实现逐帧动画做loading视图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 总结IOS关闭键盘/退出键盘的五种方式

    总结IOS关闭键盘/退出键盘的五种方式

    IOS开发中经常要用到输入框,默认情况下点击输入框就会弹出键盘,但是必须要实现输入框return的委托方法才能取消键盘的显示,对于用户体验来说很不友好,我们可以实现例如点击键盘以外的空白区域来将键盘关闭的功能,以下是我总结出的几种关闭键盘的方法。
    2016-08-08
  • iOS自定义日期选择器

    iOS自定义日期选择器

    这篇文章主要为大家详细介绍了iOS自定义日期选择器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • IOS代码笔记之勾选

    IOS代码笔记之勾选"记住密码"整体button

    这篇文章主要为大家详细介绍了IOS实现勾选"记住密码"整体button效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 110.iOS10新特性适配教程XCode8新特性解析

    110.iOS10新特性适配教程XCode8新特性解析

    这篇文章主要介绍了110.iOS10新特性适配教程XCode8新特性解析的相关资料,需要的朋友可以参考下
    2016-10-10

最新评论