App界面適配iOS11（包括iPhoneX的奇葩尺寸）
2017.08.15 11:15*字?jǐn)?shù) 1533閱讀 27517評(píng)論 65喜歡 102
公司的App是居于iOS8以上的，頁(yè)面顯示在iOS8~iOS10都沒(méi)有問(wèn)題，但是，iOS11beta版顯示出現(xiàn)各種問(wèn)題，真是顧客虐你千百遍，你待顧客如初戀，蘋(píng)果搞事，我們也只能暗暗的承受。??
搞事一：導(dǎo)航欄
1.導(dǎo)航欄高度變化
導(dǎo)航欄在iOS10之前都是默認(rèn)的64p，但是，到了iOS10就不單單是64p了，可以看一下系統(tǒng)的信息App，在iOS11添加了大標(biāo)題，效果如下圖1：
圖1.png
navigationBar的結(jié)構(gòu)，看圖2、3、4:
圖2.png
圖3.png
圖4.png
在上面三幅圖可以知道，在iOS11導(dǎo)航欄多了一個(gè)LargeTitleView，專(zhuān)門(mén)顯示大字標(biāo)題用的，整個(gè)導(dǎo)航欄的高度達(dá)到了96p，這不包括狀態(tài)欄的高度，也就是說(shuō)，整個(gè)app頂部高度達(dá)到了116p，其中statusbar=20，title=44，largetitle=52，不過(guò)默認(rèn)是64p；當(dāng)然，iPhoneX的高度會(huì)更高點(diǎn)，如果不顯示大字標(biāo)題，頂部的高度也達(dá)到了88，statusbar=44，title=44，如果顯示大字標(biāo)題，則高度變成了140，statusbar=44，title=44，largetitle=52，也就是說(shuō)，iPhoneX的劉海高度為24p，大字標(biāo)題如下圖：
iPhoneX之前的機(jī)型.png
iPhoneX.png
2.導(dǎo)航欄的圖層變化
iOS11之前導(dǎo)航欄的title是添加在UINavigationItemView上面，而navigationBarButton則直接添加在navigationBar上面；如果設(shè)置了titleView，則titleView也是直接添加在navigationBar上面，如圖5:
圖5.png
在iOS11之后，蘋(píng)果添加了新的類(lèi)來(lái)管理，navigationBar會(huì)添加在_UIButtonBarStackView上面，而_UIButtonBarStackView則添加在_UINavigationBarContentView上面；如果沒(méi)有給titleView賦值，則titleView會(huì)直接添加在_UINavigationBarContentView上面，如果賦值給了titleView，則會(huì)新生成_UITAMICAdaptorView，把titleView添加在這個(gè)類(lèi)上面，這個(gè)類(lèi)會(huì)添加在_UINavigationBarContentView上面，如下圖6、7:
圖6.png
圖7.png
3.導(dǎo)航欄的邊距變化
在iOS11對(duì)導(dǎo)航欄里面的item的邊距也做了調(diào)整：
（1）如果只是設(shè)置了titleView，沒(méi)有設(shè)置barbutton，把titleview的寬度設(shè)置為屏幕寬度，則titleview距離屏幕的邊距，iOS11之前，在iPhone6p上是20p，在iPhone6p之前是16p；iOS11之后，在iPhone6p上是12p，在iPhone6p之前是8p。
（2）如果只是設(shè)置了barbutton，沒(méi)有設(shè)置titleview，則在iOS11里，barButton距離屏幕的邊距是20p和16p；在iOS11之前，barButton距離屏幕的邊距也是20p和16p。
（3）如果同時(shí)設(shè)置了titleView和barButton，則在iOS11之前，titleview和barbutton之間的間距是6p，在iOS11上titleview和barbutton之間無(wú)間距，如下圖8、9:
圖8.png
圖9.png
4.App需要實(shí)現(xiàn)導(dǎo)航欄左右按鈕邊距為0
在iOS11之前，可以設(shè)置一個(gè)width為負(fù)的navigationBarButton，將按鈕擠到邊緣，變相實(shí)現(xiàn)0邊距的導(dǎo)航欄按鈕，但是，這招在iOS11失效了，原因在于_UIButtonBarStackView，這個(gè)iOS9之后出來(lái)的，用來(lái)相對(duì)布局的組件，限制了子view的布局。那怎么搞呢？
想到的方法有幾個(gè)：
（1）在viewWillAppear里面，將_UIButtonBarStackView取出來(lái)，直接設(shè)置它的x坐標(biāo)。
（2）設(shè)置titleView，然后將button添加在titleView上面，根據(jù)不同的邊距做偏移。
方法一：
遇到的問(wèn)題，在viewDidLoad，viewWillAppear，viewWillLayoutSubviews，viewDidLayoutSubviews里面都取不到_UIButtonBarStackView，只有在viewDidAppear里才能取到值，這樣就會(huì)在頁(yè)面顯示了之后才開(kāi)始移動(dòng)navigationBarButton，顯然這樣體驗(yàn)不好，所以，暫時(shí)pass掉。
方法二：
這個(gè)做法完全可以做到0邊距，但是，問(wèn)題來(lái)了，就是點(diǎn)擊區(qū)域的問(wèn)題。因?yàn)樽笥襫avigationBarButton的點(diǎn)擊區(qū)域是超出父view的，所以，點(diǎn)擊不到。這好辦，重寫(xiě)titleView的hitTest方法就好。嘿嘿嘿，問(wèn)題沒(méi)有那么簡(jiǎn)單。之前在iOS11的圖層結(jié)構(gòu)就解釋過(guò)，titleView會(huì)被添加在_UITAMICAdaptorView上面，而重點(diǎn)是，這個(gè)view也有邊距，所以，單單重寫(xiě)titleView的hitTest方法還不夠，那怎么解決呢？我的辦法就是寫(xiě)一個(gè)view的類(lèi)別，hook所有view的hitTest方法，在里面判斷是否是iOS11以上，是否是_UITAMICAdaptorView類(lèi)，如果都滿足條件，則可以搞事了。??Demo
搞事二：列表的變化
1.automaticallyAdjustsScrollViewInsets
在iOS11之前，如果想要scrollView不偏移64p，則需設(shè)置automaticallyAdjustsScrollViewInsets=NO，但是這個(gè)屬性在iOS11直接被遺棄了??：
@property(nonatomic,assign) BOOL automaticallyAdjustsScrollViewInsets
API_DEPRECATED_WITH_REPLACEMENT("Use UIScrollView's contentInsetAdjustmentBehavior instead", ios(7.0,11.0),tvos(7.0,11.0));
所以，看一下contentInsetAdjustmentBehavior是何方神圣：
typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
UIScrollViewContentInsetAdjustmentAutomatic, // Similar to .scrollableAxes, but will also adjust the top & bottom contentInset when the scroll view is owned by a view controller with automaticallyAdjustsScrollViewContentInset = YES inside a navigation controller, regardless of whether the scroll view is scrollable
UIScrollViewContentInsetAdjustmentScrollableAxes, // Edges for scrollable axes are adjusted (i.e., contentSize.width/height > frame.size.width/height or alwaysBounceHorizontal/Vertical = YES)
UIScrollViewContentInsetAdjustmentNever, // contentInset is not adjusted
UIScrollViewContentInsetAdjustmentAlways, // contentInset is always adjusted by the scroll view's safeAreaInsets
} API_AVAILABLE(ios(11.0),tvos(11.0));
/* Configure the behavior of adjustedContentInset.
Default is UIScrollViewContentInsetAdjustmentAutomatic.
*/
@property(nonatomic) UIScrollViewContentInsetAdjustmentBehavior contentInsetAdjustmentBehavior API_AVAILABLE(ios(11.0),tvos(11.0));
看起來(lái)這和iOS11搞的safeArea有關(guān)，這個(gè)先放一遍，看看怎么適配：
#define? adjustsScrollViewInsets_NO(scrollView,vc)\
do { \
_Pragma("clang diagnostic push") \
_Pragma("clang diagnostic ignored \"-Warc-performSelector-leaks\"") \
if ([UIScrollView instancesRespondToSelector:NSSelectorFromString(@"setContentInsetAdjustmentBehavior:")]) {\
[scrollView? performSelector:NSSelectorFromString(@"setContentInsetAdjustmentBehavior:") withObject:@(2)];\
} else {\
vc.automaticallyAdjustsScrollViewInsets = NO;\
}\
_Pragma("clang diagnostic pop") \
} while (0)
上面是公司里面一個(gè)大神寫(xiě)的，這樣就可以在Xcode8上面跑了。
2.tableView默認(rèn)使用Self-Sizing
這個(gè)配合estimatedRowHeight、estimatedSectionFooterHeight、estimatedSectionHeaderHeight使用，可以預(yù)估高度。之前，設(shè)置高度為0時(shí)，需要設(shè)置height=0.1，才會(huì)起作用，如果直接設(shè)置為0，則會(huì)使用默認(rèn)高度，由于自動(dòng)使用預(yù)估高度，所以，忽略了設(shè)置的高度，使原來(lái)的高度增大了。只要把這幾個(gè)屬性設(shè)置為0就可以解決。
搞事三：iPhoneX底部tabbar的高度改變
iPhoneX不止多了劉海，底部還有一個(gè)半角的矩形，使得tabbar多出來(lái)了34p的高度，不過(guò)不管導(dǎo)航欄和tabbar一般系統(tǒng)都會(huì)自動(dòng)適配safeArea。
iPhoneX tabbar.png
總結(jié)：
iOS11系統(tǒng)改變還是比較大的，某些地方需要注意適配，不然會(huì)出現(xiàn)很奇怪的現(xiàn)象。暫時(shí)，在iOS11遇到這么多坑，以后遇到會(huì)繼續(xù)分享的。
參考：
