iOS11中safeArea及iphoneX適配的示例分析-創(chuàng)新互聯(lián)

小編給大家分享一下iOS11中safeArea及iphoneX適配的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司于2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元富裕做網(wǎng)站,已為上家服務(wù),為富裕各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

現(xiàn)在對于iPhone X的適配，有一種常見的做法是給導航欄或tabbar增加一個固定的距離，比如頂部增加44pt，底部增加34pt。這種寫死距離的做法乍看上去挺簡單，其實并不好，理由如下

1. 不適合多機型的適配，如果以后出了一種帶劉海的iPad，需要預(yù)留出來的距離就未必是現(xiàn)在寫死的距離

2. 不適合需要支持橫豎屏的app，橫屏頂部不需要增加距離，反而是左右各有44pt，底部的距離也和豎屏不同

3. 不夠動態(tài)。還是舉個例子，假如有電話打進來了，導航欄應(yīng)該會下移，這時候view可能還是會被擋住

這里我想探討一下如何使用safeAreaLayoutGuide和safeAreaInsets，以一種動態(tài)的方式，一勞永逸地解決iPhone X甚至后續(xù)所有機型的適配問題。

safeAreaLayoutGuide

首先我們看看什么是safeAreaLayoutGuide

看起來復(fù)雜，其實很簡單，我歸納一下有幾點：

1. 它是UIView的一個只讀屬性，意味著所有UIView對象都有并且是系統(tǒng)幫我們創(chuàng)建好的

2. 它繼承UILayoutGuide，有l(wèi)ayoutFrame意味著它能代表一塊區(qū)域

3. 它代表的區(qū)域避開了諸如導航欄、tabbar或者其他有可能擋住你這個UIView對象顯示的所有父view，意味著你的view對象只要相對另一個view的safeLayoutGuide做布局就不用擔心她被奇奇怪怪的東西擋住

4. 對于控制器的view的safeAreaLayoutGuide，他的區(qū)域同樣避開了statusbar或其他有可能擋住view顯示的東西，我們甚至可以用控制器的additionalSafeAreaInsets屬性，來額外指定inset

5. 如果view完全在父view的安全區(qū)域內(nèi)，或者view不在視圖層級或屏幕上，那么view的safeAreaLayoutGuide區(qū)域其實和view自身是一樣大的

safeAreaLayoutGuide是一個相對抽象的概念，為了便于理解，我們可以把safeAreaLayoutGuide看成是一個“view”，這個“view”系統(tǒng)自動幫我們調(diào)整它的bounds，讓它不會被各種奇奇怪怪的東西擋住，包括iPhone X的劉海區(qū)域和底部的一道杠區(qū)域，可以認為在這個“view”上一定能完整顯示所有內(nèi)容。

以下綠色部分就是當前控制器view的safeAreaLayoutGuide區(qū)域

iphone X豎屏safeAreaLayoutGuide的bounds.png

iPhone X橫屏safeAreaLayoutGuide的bounds.png

截圖來自https://developer.apple.com/videos/play/fall2017/801/

不過需要銘記的一點是這個“view”并不會顯示在我們的視圖層級上。
UILayoutGuides will not show up in the view hierarchy, but may be used as items in an NSLayoutConstraint and represent a rectangle in the layout engine.

在我看來，他大的作用是作為參照物，讓view可以相對某個view的safeAreaLayoutGuide做布局，從而保證view能正常、安全地顯示（相對的那個view不一定要是父view）

在一種常見的使用場景里，以前我的某個view是相對于控制器的view做布局，現(xiàn)在是相對控制器view的safeAreaLayoutGuide做布局了

以前是這樣寫
[NSLayoutConstraint constraintWithItem:someView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.vc.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];

現(xiàn)在是這樣
[NSLayoutConstraint constraintWithItem:someView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.vc.view.safeAreaLayoutGuide attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];

適配前后的效果

適配前.png

改成相對于view的safeAreaLayoutGuide后-豎屏.png

改成相對于view的safeAreaLayoutGuide后-橫屏.png

可以看到，相同的布局下，橫屏在沒有statusbar時，距離頂部是0，左邊是44，如果有statusbar，距離頂部就是20。反正不管怎么弄，只要我們相對safeAreaLayoutGuide做布局，我們的view就能夠安全完整地顯示出來

那么非iOS11怎么辦？

非iOS11 還是只能對view做布局，就要寫兩套布局代碼，稍后會介紹

這樣是不是就足夠應(yīng)對所有情況了呢？

并不是

我們自定義的view有一邊需要緊挨著屏幕邊緣，比如我項目里是自定義的導航欄，它的頂部是挨著屏幕頂部的，那么導航欄就不能相對view的safeAreaLayoutGuide布局，否則頂部會空出來一截子

frame布局

這時就輪到safeAreaInsets來發(fā)揮作用啦

safeAreaInsets

先看一下safeAreaInsets的官方解釋

有沒有覺得和safeAreaLayoutGuide很像？safeAreaLayoutGuide可能就是根據(jù)safeAreaInsets來調(diào)整自己的bounds的

iPhone X豎屏時占滿整個屏幕的控制器的view的safeAreaInsets是（44，0，34，0），橫屏是（0，44，21，44），inset后的區(qū)域正好是safeAreaLayoutGuide區(qū)域

既然如此，對于自定義的頂部導航欄來說，我們可以給導航欄的高度加上一個vc.view.safeAreaInsets.top，讓他變高一點就可以了，這樣在X上，豎屏時top = 44， 橫屏時top = 0，導航欄的高度能響應(yīng)改變

需要注意的是，無論safeAreaLayoutGuide還是safeAreaInsets都是iOS11才能使用的。
對于safeAreaInsets，我們可以把版本判斷寫在一個函數(shù)里

我們可以這樣寫

static inline UIEdgeInsets sgm_safeAreaInset(UIView *view) {
 if (@available(iOS 11.0, *)) {
  return view.safeAreaInsets;
 }
 return UIEdgeInsetsZero;
}

UIEdgeInsets safeAreaInsets = sgm_safeAreaInset(self.view);
CGFloat height = kDefaultTopViewHeight; // 導航欄原本的高度，通常是44.0
height += safeAreaInsets.top > 0 ? safeAreaInsets.top : 20.0; // 20.0是statusbar的高度

問題又來了，這段代碼放在什么地方合適呢？前面官方文檔提到過，如果view不在屏幕上或顯示層級里，view的safeAreaInsets = UIEdgeInsetsZero，所以我們需要明確知道safeAreaInsets改變的時機

實際上系統(tǒng)已經(jīng)提供了回調(diào)

對于UIViewController

復(fù)制代碼 代碼如下:

-(void)viewSafeAreaInsetsDidChange NS_REQUIRES_SUPER API_AVAILABLE(ios(11.0), tvos(11.0));

對于UIView

-(void)safeAreaInsetsDidChange API_AVAILABLE(ios(11.0),tvos(11.0));

這里主要探討controller的回調(diào)，view的回調(diào)是類似的。只要controller的view的safeAreaInsets改變，系統(tǒng)就會調(diào)用viewSafeAreaInsetsDidChange。自然而然，我們會想把以上代碼放在這里，然而這里有個大坑，你會發(fā)現(xiàn)，當這個控制器以動畫的方式push進來時，導航欄的高度也會動畫地變高，產(chǎn)生了不必要的多余動畫，這種體驗很糟糕

那么究竟應(yīng)該放在哪里？我們很有必要看一下新的viewController調(diào)用時序

以下是從“rootVC” push 到 “pushVC”控制臺輸出的調(diào)用時序以及對應(yīng)控制器的view的safeAreaInsets

2017-10-04 16:59:59.594811+0800 XXX[15662:803767] Begin pushViewController to [<_TtCC8XXXTests27ContainerViewControllerTest20MockUIViewController: 0x7f9c07b643b0>]
viewDidLoad()---Optional("pushVC")---UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
willMove(toParentViewController:)---Optional("pushVC")---UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
viewWillDisappear---Optional("rootVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewWillAppear---Optional("pushVC")---UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
viewSafeAreaInsetsDidChange()---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewWillLayoutSubviews()---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewDidLayoutSubviews()---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewWillLayoutSubviews()---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewDidLayoutSubviews()---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewDidAppear---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
viewDidDisappear---Optional("rootVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
didMove(toParentViewController:)---Optional("pushVC")---UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)
2017-10-04 16:59:59.604563+0800 XXX[15662:803767] Did PushViewController [<_TtCC8XXXTests27ContainerViewControllerTest20MockUIViewController: 0x7f9c0790d170>]->[<_TtCC8XXXTests27ContainerViewControllerTest20MockUIViewController: 0x7f9c07b643b0>] time = [0.009772]

可以看到，viewSafeAreaInsetsDidChange調(diào)用時機很早，在viewWillAppear后，這是為什么出現(xiàn)多余動畫的原因。并且“pushVC”的safeAreaInsets直到viewSafeAreaInsetsDidChange調(diào)用前，都是UIEdgeInsetsZero，之后才是正確的UIEdgeInsets(top: 44.0, left: 0.0, bottom: 34.0, right: 0.0)

并且viewSafeAreaInsetsDidChange后面會調(diào)用兩次viewDidLayoutSubviews，所以我們應(yīng)該把改變高度或布局的代碼都寫在viewDidLayoutSubviews里，這樣就不會有多余的動畫效果了。需要注意viewDidLayoutSubviews可能會由別的操作頻繁觸發(fā)，所以如果調(diào)整safeArea布局的代碼比較耗時，可以考慮加上一個狀態(tài)標記，只在didChange后執(zhí)行一次布局調(diào)整

最后的代碼應(yīng)該長這樣

- (void)viewDidLayoutSubviews {
 [super viewDidLayoutSubviews];
 UIEdgeInsets safeAreaInsets = sgm_safeAreaInset(self.view);
 CGFloat height = 44.0; // 導航欄原本的高度，通常是44.0
 height += safeAreaInsets.top > 0 ? safeAreaInsets.top : 20.0; // 20.0是statusbar的高度，這里假設(shè)statusbar不消失
 if (_navigationbar && _navigationbar.height != height) {
  _navigationbar.height = height;
 }

適配前后的效果

適配前

適配后

這樣對于frame布局和autolayout布局的各種情況，有了一個動態(tài)的適配方案，就是分別使用safeAreaLayoutGuide和safeAreaInsets來靈活處理布局，相比寫死一個固定距離，當前和未來的各種機型都能一套代碼適配，擴展性更好。我們項目目前也是采用這種做法，如果你的項目需要適配橫豎屏或UI控件布局相對復(fù)雜，真的應(yīng)該考慮使用safeArea

順便提一下，VFL似乎已經(jīng)廢了，因為|只能表示父view的邊緣，并沒有一個符號來表示父view的safeAreaLayoutGuide的邊緣，以前我們寫的VFL代碼，好多得改，改起來也特別麻煩，建議別再用VFL了

最后一個版本判斷的問題，safeAreaInsets和safeAreaLayoutGuide都是iOS11的API，如果不做封裝，直接在代碼里寫，勢必會出現(xiàn)大量@available這種版本判斷語句，代碼里到處是@available，看起來很崩潰，破壞代碼可讀性。

因為我之前寫了一個自動布局框架，這次就將safeAreaLayoutGuide和版本判斷都順便封裝在里面了，個人覺得這套框架比NSLayoutAnchor好用，主要作用是簡化布局代碼書寫，以下是生成一個NSLayoutConstraint的對比

// 需求是topLeftView的top等于self.view的safeAreaLayoutGuide的top
// 使用系統(tǒng)API
if (@available(iOS 11.0, *)) {
  [NSLayoutConstraint constraintWithItem:self.topLeftView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
 } else {
  [NSLayoutConstraint constraintWithItem:self.topLeftView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0];
 }

// 使用NSLayoutConstraint-SSLayout
self.topLeftView.top_attr = self.view.top_attr_safe

以上是“iOS11中safeArea及iphoneX適配的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當前標題：iOS11中safeArea及iphoneX適配的示例分析-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://bm7419.com/article38/hsjpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、域名注冊、網(wǎng)站策劃、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)