App界面適配iOS11(包括iPhoneX的奇葩尺寸)

公司的App是居于iOS8以上的午阵,頁面顯示在iOS8~iOS10都沒有問題,但是浑娜,iOS11beta版顯示出現(xiàn)各種問題佑力,真是顧客虐你千百遍,你待顧客如初戀筋遭,蘋果搞事打颤,我們也只能暗暗的承受。??

搞事一:導(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)航欄多了一個LargeTitleView畅形,專門顯示大字標(biāo)題用的养距,整個導(dǎo)航欄的高度達到了96p,這不包括狀態(tài)欄的高度日熬,也就是說棍厌,整個app頂部高度達到了116p,其中statusbar=20竖席,title=44耘纱,largetitle=52,不過默認(rèn)是64p毕荐;當(dāng)然束析,iPhoneX的高度會更高點,如果不顯示大字標(biāo)題憎亚,頂部的高度也達到了88员寇,statusbar=44,title=44第美,如果顯示大字標(biāo)題蝶锋,則高度變成了140,statusbar=44什往,title=44扳缕,largetitle=52,也就是說,iPhoneX的劉海高度為24p躯舔,大字標(biāo)題如下圖:

iPhoneX之前的機型.png
iPhoneX.png

2.導(dǎo)航欄的圖層變化

iOS11之前導(dǎo)航欄的title是添加在UINavigationItemView上面驴剔,而navigationBarButton則直接添加在navigationBar上面;如果設(shè)置了titleView粥庄,則titleView也是直接添加在navigationBar上面丧失,如圖5:

圖5.png

在iOS11之后,蘋果添加了新的類來管理飒赃,navigationBar會添加在_UIButtonBarStackView上面利花,而_UIButtonBarStackView則添加在_UINavigationBarContentView上面;如果沒有給titleView賦值载佳,則titleView會直接添加在_UINavigationBarContentView上面,如果賦值給了titleView臀栈,則會新生成_UITAMICAdaptorView蔫慧,把titleView添加在這個類上面,這個類會添加在_UINavigationBarContentView上面权薯,如下圖6姑躲、7:

圖6.png
圖7.png

3.導(dǎo)航欄的邊距變化

在iOS11對導(dǎo)航欄里面的item的邊距也做了調(diào)整:

(1)如果只是設(shè)置了titleView,沒有設(shè)置barbutton盟蚣,把titleview的寬度設(shè)置為屏幕寬度黍析,則titleview距離屏幕的邊距,iOS11之前屎开,在iPhone6p上是20p阐枣,在iPhone6p之前是16p;iOS11之后奄抽,在iPhone6p上是12p蔼两,在iPhone6p之前是8p。
(2)如果只是設(shè)置了barbutton逞度,沒有設(shè)置titleview额划,則在iOS11里,barButton距離屏幕的邊距是20p和16p档泽;在iOS11之前俊戳,barButton距離屏幕的邊距也是20p和16p。
(3)如果同時設(shè)置了titleView和barButton馆匿,則在iOS11之前抑胎,titleview和barbutton之間的間距是6p,在iOS11上titleview和barbutton之間無間距甜熔,如下圖8圆恤、9:
圖8.png
圖9.png

4.App需要實現(xiàn)導(dǎo)航欄左右按鈕邊距為0

在iOS11之前,可以設(shè)置一個width為負的navigationBarButton,將按鈕擠到邊緣盆昙,變相實現(xiàn)0邊距的導(dǎo)航欄按鈕羽历,但是,這招在iOS11失效了淡喜,原因在于_UIButtonBarStackView秕磷,這個iOS9之后出來的,用來相對布局的組件炼团,限制了子view的布局澎嚣。那怎么搞呢?

想到的方法有幾個:
(1)在viewWillAppear里面瘟芝,將_UIButtonBarStackView取出來易桃,直接設(shè)置它的x坐標(biāo)。
(2)設(shè)置titleView锌俱,然后將button添加在titleView上面晤郑,根據(jù)不同的邊距做偏移。

方法一:
遇到的問題贸宏,在viewDidLoad造寝,viewWillAppear,viewWillLayoutSubviews吭练,viewDidLayoutSubviews里面都取不到_UIButtonBarStackView诫龙,只有在viewDidAppear里才能取到值,這樣就會在頁面顯示了之后才開始移動navigationBarButton鲫咽,顯然這樣體驗不好签赃,所以,暫時pass掉浑侥。

方法二:
這個做法完全可以做到0邊距姊舵,但是,問題來了寓落,就是點擊區(qū)域的問題括丁。因為左右navigationBarButton的點擊區(qū)域是超出父view的,所以伶选,點擊不到史飞。這好辦,重寫titleView的hitTest方法就好仰税。嘿嘿嘿构资,問題沒有那么簡單。之前在iOS11的圖層結(jié)構(gòu)就解釋過陨簇,titleView會被添加在_UITAMICAdaptorView上面吐绵,而重點是,這個view也有邊距,所以己单,單單重寫titleView的hitTest方法還不夠唉窃,那怎么解決呢?我的辦法就是寫一個view的類別纹笼,hook所有view的hitTest方法纹份,在里面判斷是否是iOS11以上,是否是_UITAMICAdaptorView類廷痘,如果都滿足條件蔓涧,則可以搞事了。??Demo

搞事二:列表的變化

1.automaticallyAdjustsScrollViewInsets

在iOS11之前笋额,如果想要scrollView不偏移64p元暴,則需設(shè)置automaticallyAdjustsScrollViewInsets=NO,但是這個屬性在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));

看起來這和iOS11搞的safeArea有關(guān)昨寞,這個先放一遍,看看怎么適配:

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

上面是公司里面一個大神寫的厦滤,這樣就可以在Xcode8上面跑了。

2.tableView默認(rèn)使用Self-Sizing

這個配合estimatedRowHeight歼狼、estimatedSectionFooterHeight掏导、estimatedSectionHeaderHeight使用,可以預(yù)估高度羽峰。之前趟咆,設(shè)置header或者footer高度為0時,需要設(shè)置height=0.1梅屉,才會起作用值纱,如果直接設(shè)置為0,則會使用默認(rèn)高度坯汤。iOS11由于自動使用預(yù)估高度虐唠,所以,忽略了設(shè)置的高度惰聂,使原來的高度增大了疆偿。只要把這幾個屬性設(shè)置為0就可以解決。

搞事三:iPhoneX底部tabbar的高度改變

iPhoneX不止多了劉海搓幌,底部還有一個半角的矩形杆故,使得tabbar多出來了34p的高度,不過不管導(dǎo)航欄和tabbar一般系統(tǒng)都會自動適配safeArea溉愁。

iPhoneX tabbar.png

搞事四:iOS11 iPhoneX頁面push時tabbar位置變化

直接上圖:


iOS11 iPhoneX Tabbar.gif

可以看到在頁面push的時候处铛,tabbar的frame上移了,這個只有在iPhoneX上面才能看到(因為iPhoneX的TabBar的高度不一樣),有可能是模擬器的bug撤蟆,但是奕塑,具體要到真機出來才知道。下面說說修復(fù)的幾種辦法:

(1)將導(dǎo)航欄的代理設(shè)置為當(dāng)前的controller枫疆,然后在將要展示下個頁面的方法里修正TabBar的frame爵川。
- (void)navigationController:(UINavigationController *)navigationController willShowViewController:(UIViewController *)viewController animated:(BOOL)animated {
    if (![[[UIDevice currentDevice] modelName] isEqualToString: @"iPhone X"]) {
        return;
    }
    CGRect frame = self.tabBarController.tabBar.frame;
    if (frame.origin.y < ([UIScreen mainScreen].bounds.size.height - 83)) {
        frame.origin.y = [UIScreen mainScreen].bounds.size.height - 83;
        self.tabBarController.tabBar.frame = frame;
    }
}
(2)新建一個類,繼承UITabBar息楔,然后在setFrame:里面做判斷修正寝贡,將改類替換系統(tǒng)默認(rèn)的TabBar。
- (void)setFrame:(CGRect)frame {
    if ([[[UIDevice currentDevice] modelName] isEqualToString: @"iPhone X"]) {
        if (frame.origin.y < ([UIScreen mainScreen].bounds.size.height - 83)) {
            frame.origin.y = [UIScreen mainScreen].bounds.size.height - 83;
        }
    }
    [super setFrame: frame];
}
(3)其他方法值依。

總結(jié):

iOS11系統(tǒng)改變還是比較大的圃泡,某些地方需要注意適配,不然會出現(xiàn)很奇怪的現(xiàn)象。暫時坎藐,在iOS11遇到這么多坑撑蒜,以后遇到會繼續(xù)分享的。

參考:

你可能需要為你的 APP 適配 iOS 11

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末风秤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子扮叨,更是在濱河造成了極大的恐慌缤弦,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件彻磁,死亡現(xiàn)場離奇詭異碍沐,居然都是意外死亡,警方通過查閱死者的電腦和手機衷蜓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門累提,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人磁浇,你說我怎么就攤上這事斋陪。” “怎么了扯夭?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵鳍贾,是天一觀的道長。 經(jīng)常有香客問我交洗,道長骑科,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任构拳,我火速辦了婚禮咆爽,結(jié)果婚禮上梁棠,老公的妹妹穿的比我還像新娘。我一直安慰自己斗埂,他們只是感情好符糊,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著呛凶,像睡著了一般男娄。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上漾稀,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天模闲,我揣著相機與錄音,去河邊找鬼崭捍。 笑死尸折,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的殷蛇。 我是一名探鬼主播实夹,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼粒梦!你這毒婦竟也來了亮航?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤匀们,失蹤者是張志新(化名)和其女友劉穎塞赂,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昼蛀,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年圆存,在試婚紗的時候發(fā)現(xiàn)自己被綠了叼旋。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡沦辙,死狀恐怖夫植,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情油讯,我是刑警寧澤详民,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站陌兑,受9級特大地震影響沈跨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜兔综,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一饿凛、第九天 我趴在偏房一處隱蔽的房頂上張望狞玛。 院中可真熱鬧,春花似錦涧窒、人聲如沸心肪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽硬鞍。三九已至,卻和暖如春戴已,著一層夾襖步出監(jiān)牢的瞬間固该,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工恭陡, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蹬音,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓休玩,卻偏偏與公主長得像著淆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拴疤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內(nèi)容