兼容 - 純代碼完美適配 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。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容