兼容 - 纯代码完美适配 iPhoneX

前言

本文主要针对适配 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、iPhoneXS 5.8吋 375x812 @3x 1125 × 2436 0.4618
iPhoneXR 6.1吋 414x896 @2x 828 × 1792
iPhoneXS Mac 6.5吋 414x896 @3x 1242 × 2688

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

#define NEWX                     [UIScreen mainScreen].bounds.size.width/375
#define NEWY                     NEWX

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

 非iPhone X :
 StatusBar 高20px,NavigationBar 高44px,底部TabBar高49px
iPhone X:
StatusBar 高44px,NavigationBar 高44px,底部TabBar高83px

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

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

一行代码适配iPhoneX及有安全区域的机型的底部边距

@interface UIView (MKUtility)

//适配 iphoneX、iphoneXS、iphoneXS Mac、iphoneXR
- (void)adaptBottowMarginForIphoneX;

@end

- (void)adaptBottowMarginForIphoneX {
  if (((UIScreen.mainScreen.bounds.size.width == 375) && (UIScreen.mainScreen.bounds.size.height == 812)) || ((UIScreen.mainScreen.bounds.size.width == 414) && (UIScreen.mainScreen.bounds.size.height == 896)) ) {
    [self mas_updateConstraints:^(MASConstraintMaker *make) {
      make.bottom.mas_equalTo(self.superview).offset(-34);
    }];
  }
}

适配中遇到的其他问题

  • 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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容