前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >兼容 - 纯代码完美适配 iPhoneX

兼容 - 纯代码完美适配 iPhoneX

作者头像
進无尽
发布2018-09-12 18:00:52
4.4K0
发布2018-09-12 18:00:52
举报
文章被收录于专栏:進无尽的文章進无尽的文章

前言

本文主要针对适配 iPhoneX列出一些关键点,仔细阅读可完美适配 iPhoneX,其中还有一些是适配 iOS11的, 话不多少,开始正餐。

iPhoneX概况一览

从图中我们可以看出:

status bar 从20 变成了 44 导航条高度依然是 44 顶部的总体高度变成 88 安全区域距离页面底部需要保留 34pt,系统自带的 Tabbar已经适配好了,但是自己的页面书写代码就要注意了,以前可以触底的,现在要保留34pt 距离了。

没有适配 iPhoneX的触底页面

旧工程如何在iphoneX全屏显示

只需要在LaunchImage中添加一个尺寸为1125 × 2436的启动图,并且工程使用LaunchImage加载启动图的,而不是使用 LaunchImage.storeBorad.

portrait是人像模式,也就是竖屏。landscape是风景模式,也就是横屏

看一下各种iPhone尺寸屏幕的分辨率和宽高比

设备

屏幕尺寸

分辨率(pt)

Reader

分辨率(px)

宽高比

iPhone 3GS

3.5吋

320x480

@1x

320x480

0.666

iPhone 4/4s

3.5吋

320x480

@2x

640x960

0.666

iPhone 5/5s/5c

4.0吋

320x568

@2x

640x1136

0.563

iPhone 6、7、8

4.7吋

375x667

@2x

750x1334

0.562

iPhone 6Plus、 7Plus、 8Plus

5.5吋

414x736

@3x

1242x2208

0.5625

iPhoneX

5.8吋

375x812

@3x

1125 × 2436

0.4618

如何做到完美适配,使图片等内容不变形呢? 不做处理的话, iponeX上会出现变形,我们以宽的缩放比为正比缩放比,这样不管以后屏幕高度如何变化,都不会出现变形的情形。

代码语言:javascript
复制
#define NEWX                     [UIScreen mainScreen].bounds.size.width/375
#define NEWY                     NEWX

iPhone X 变化最大的是头部 & 底部

代码语言:javascript
复制
 非iPhone X :
 StatusBar 高20px,NavigationBar 高44px,底部TabBar高49px
iPhone X:
StatusBar 高44px,NavigationBar 高44px,底部TabBar高83px

所以,之前项目里写死的 ±49 ±64 都要出问题,下面几个宏挺管用的

代码语言:javascript
复制
  #define kStatusBarHeight [[UIApplication sharedApplication] statusBarFrame].size.height
  #define kNavBarHeight 44.0
  //注意:请直接获取系统的tabbar高度,若没有用系统tabbar,建议判断屏幕高度;之前判断  状态栏高度的方法不妥,如果正在通话状态栏会变高,导致判断异常,下面只是一个例子,请勿直接使用!
  #define kTopHeight (kStatusBarHeight + kNavBarHeight)

适配中遇到的其他问题

  • Pushde的时候列表/页面发生向下偏移 这是一个 iOS11适配的问题,如下设置即可。 if (@available(iOS 11.0, *)){ [[UIScrollView appearance] setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever]; }else{ self.automaticallyAdjustsScrollViewInsets = NO; }
  • iPhone X push的时候TabBar上移 系统原生的Tabbar在push的时候会上移 在UINavigationController的基类重写pushViewController代理方法,在Push的时候修正一下TabBar的frame @interface MyNavigationController : UINavigationController @end @implementation MyNavigationController - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated { if (self.viewControllers.count > 0) { viewController.hidesBottomBarWhenPushed = YES; } [super pushViewController:viewController animated:animated]; // 修改tabBra的frame CGRect frame = self.tabBarController.tabBar.frame; frame.origin.y = [UIScreen mainScreen].bounds.size.height - frame.size.height; self.tabBarController.tabBar.frame = frame; } 在自定义的TabBarViewController @implementation MainTabBarViewController MyNavigationController *nav1=[[MyNavigationController alloc] initWithRootViewController:vc1]; MyNavigationController *nav3=[[MyNavigationController alloc] initWithRootViewController:vc3]; self.viewControllers=@[nav1,nav3];
  • 注意iPhone X的屏幕素质比较好,所以它需要加载较高像素的图片,我们要提供必要的@3x资源。
  • 另外由于iPhone X极高的长宽比,我们用作背景的图片都需要重新设计,以保证比例适合,内容被裁切后效果仍然ok。
  • 关于状态栏另外两个需要注意的地方: 不要在iPhone X下隐藏状态栏,一个原因是显示内容足够高了,另一个是这样内容会被刘海切割。

现在通话或者其它状态下,状态栏高度不会变化了,程序不需要去做兼容。

  • 横屏 在横屏状态下,不能因为刘海的原因将内容向左或者向右便宜,要保证内容的中心对称:
  • 定位 在IOS11,未在plist文件中配置NSLocationAlwaysAndWhenInUseUsageDeion,系统框不会弹出。 <!-- 位置 --> <key>NSLocationUsageDescription</key> <string>获取地理位置,精准推送服务</string> <!-- 在使用期间访问位置 --> <key>NSLocationWhenInUseUsageDescription</key> <string>获取地理位置,精准推送服务</string> <!-- 始终访问位置 --> <key>NSLocationAlwaysUsageDescription</key> <string>App需要您的同意,才能始终访问位置</string> <!-- iOS 11访问位置 --> <key>NSLocationAlwaysAndWhenInUseUsageDeion</key> <string>App需要您的同意,才能始终访问位置</string>
  • 如何实现在工程任何地方修改状态栏颜色的设置 info.plist中添加下面三项 <key>UIStatusBarHidden</key> <false/> <key>UIStatusBarStyle</key> <string>UIStatusBarStyleLightContent</string> <key>UIViewControllerBasedStatusBarAppearance</key> <false/>

自己项目的适配效果

值得注意的是:我这个项目中使用的是系统自带的导航栏、Tabbar。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.01.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • iPhoneX概况一览
  • 旧工程如何在iphoneX全屏显示
  • 看一下各种iPhone尺寸屏幕的分辨率和宽高比
    • 适配中遇到的其他问题
    • 自己项目的适配效果
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档