iPhoneX適配

覺得不錯請點擊下方【喜歡】，為了微博認證也是無賴!還差1660個??

屏幕尺寸相關變化

1. 高度增加了145pt，變成812pt.
2. 狀態欄高度由20pt變成44pt，留意這個距離就能避開“劉海”的尷尬，相應的導航欄以上變化64->88。
3. 底部工具欄需要為home indicator留出34pt邊距。
4. 物理分辨率為1125px * 2436px.

啟動圖的適配

一、 如果在iPhoneX上啟動App并沒有占滿整個屏幕,而是在中心保持原有高度，需要修改啟動圖。

未修改前張這個鬼樣：

001.png

1. 通過LaunchScreen.storyboard方式啟動

2. 如果啟動圖原來使用的Assets中的LaunchImage，如下圖：

002.png

• 給Brand Assets添加一張1125*2436大小的圖片

  • 打開Assets.xcassets文件夾，找到Brand Assets
  • 右鍵Show in Finder
  • 添加一張1125*2436大小的圖片

• 修改Contents.json文件,添加如下內容

  {
  "extent" : "full-screen",
  "idiom" : "iphone",
  "subtype" : "2436h",
  "filename" : "1125_2436.png",
  "minimum-system-version" : "11.0",
  "orientation" : "portrait",
  "scale" : "3x"
  }
  

再次啟動App就可以看到全屏顯示了

003.png

App內部樣式適配

在適配之前先介紹下viewSafeAreaInsetsDidChange的調用順序：

• viewDidLoad

• viewWillAppear

• viewSafeAreaInsetsDidChange

  ? UIEdgeInsets
    - top : 44.0
    - left : 0.0
    - bottom : 34.0
    - right : 0.0
  

• viewWillLayoutSubviews

• viewDidAppear

只有在調用viewSafeAreaInsetsDidChange及以后的方法才能獲得view和Controller的UIEdgeInsets。所以在viewDidLoad中根據Safe Area設置界面會有問題。

自定義導航欄的情況

先來看看隱藏系統導航欄，自定義NavigationBar不適配時iPhoneX下是什么樣子。下圖是不適配時效果圖和約束。

004.png

005.png

006.png

會發現原來設置64高度的自定義Bar離劉海很近。原因就是iPhoneX下狀態欄高度由20變成了44。

解決方法有三種：

1. 在Storyboard中使用Safe Area LayoutGuides,這樣有個弊端是在Storyboard使用Safe Area最低只支持iOS9，iOS8的用戶就要放棄了，這樣老板肯定不同意。

   解決思路就是，去除自定義Bar的64像素高度約束，設置TableView的頂部距離Safe Area的垂直距離為44。

   • 選擇viewcontroller所在的storyboard，在File inspector中勾選Use Safe Area Layout Guides.

007.png

008.png

• 從選中TableView，按住control鍵,按住鼠標左鍵拉到Safe Area上，選擇Vertical Spacing。

009.png

• 選中剛添加的約束，在Size Inspector中修改Second Item為Safe Area.Top ,Constant = 44

010.png

011.png

2. 用代碼來布局，弊端是原來用Storyboard布局的改成純代碼，累死程序員不償命。方法就是在viewSafeAreaInsetsDidChange設置自定義bar的高度。

    @available(iOS 11.0, *)
     override func viewSafeAreaInsetsDidChange() {
         navigationBarH = view.safeAreaInsets.top + 44
     }
   

3. 當然還有第三種方式了，既能使用Storyboard又能適配iPhoneX。

思路：在Storyboard中按照非iPhoneX設置自定義導航欄的高度為64，然后把高度約束作為屬性在源碼中修改為view.safeAreaInsets.top + 44。

• 把自定義導航欄的高度拖到Controller作為屬性

012.png

• 在viewSafeAreaInsetsDidChange中修改導航欄的高度

    @available(iOS 11.0, *)
    override func viewSafeAreaInsetsDidChange() {
        customNaviBarHightConstraint.constant = view.safeAreaInsets.top + 44
    }
  

TableView、WebView、CollectionView等繼承ScrollView的適配

原來的老項目中包含TableView、CollettionView的頁面如果是使用Storyboard設置的約束，在iPhoneX中可能會有34像素的安全區域，scrollview劃不到底部，如下圖：

013.png

出現這個區域的原因是：原來設置底部約束是tableview底部到Bottom Layout Guide.Top的距離。

014.png

解決辦法：
修改約束的Bottom Layout Guide.Top為Superview.Bottom。

修改前

修改后

修改完后TableView就可以滾到到底部了。

016.png

以下兩個是iOS11造成的和iPhoneX沒關系

UIBarButtonItem的適配

自定義rightBarButtonItem時Item會有偏移：

1004.png

解決辦法，添加一個偏移。原來代碼如下：

func setNavigationRightTextButton(_ title: String,textColor:UIColor? = ColorTheme.NormalNavigationBarTitle, action: @escaping () -> Void) {
        let button = NavigationBackButton(type: .custom)
        button.setTitle(title, for: UIControlState())
        button.setTitleColor(textColor, for: UIControlState())
        let font = UIFont.systemFont(ofSize: 15)
        button.titleLabel?.font = font
        let attributes = [NSFontAttributeName: font];
        let size = title.toNSString.size(attributes: attributes)
        button.frame = CGRect(x: 0, y: 0, w: size.width + 15, h: 44)
        button.reactive.controlEvents(.touchUpInside).observeValues { button in
            action()
        }
        let buttonItem = UIBarButtonItem(customView: button)
        self.navigationItem.rightBarButtonItem = buttonItem
    }

添加以下代碼

 if #available(iOS 11.0, *) {
      button.frame = CGRect(x: 0, y: 0, w: size.width + 30, h: 44)
      button.contentEdgeInsets = UIEdgeInsetsMake(10,0 , -10, 0)
 }

以上只是我們自己的項目在適配iPhoneX時遇到的幾個小問題，可能還會有其他問題，歡迎在討論區討論。

更多iOS、Swift、iOS逆向最新文章請關注微信公眾賬號：樂Coding，或者微信掃描下方二維碼關注

lecoding

icon.jpg