美文网首页iOS新手学习iOS 适配iOS开发技术
兼容 - 纯代码完美适配 iPhoneX

兼容 - 纯代码完美适配 iPhoneX

作者: 進无尽 | 来源:发表于2018-01-05 18:56 被阅读2017次

    前言

    本文主要针对适配 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上会出现变形,我们以宽的缩放比为正比缩放比,这样不管以后屏幕高度如何变化,都不会出现变形的情形。

    #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)
    

    适配中遇到的其他问题

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

    相关文章

      网友评论

      本文标题:兼容 - 纯代码完美适配 iPhoneX

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