iOS頁面布局:UIScrollView的布局問題

一惫撰、簡述

在iOS11以后的系統(tǒng)中UIViewControllerautomaticallyAdjustsScrollViewInsets這個屬性過期棄用了不再建議使用了凉翻。系統(tǒng)推薦我們使用UIScrollViewcontentInsetAdjustmentBehavior屬性替代它囊卜。如果項目之前使用了self. automaticallyAdjustsScrollViewInsets = YES,并且設置scrollView.contentInset的值,此時升級到iOS11以上的系統(tǒng)時頁面就會出現(xiàn)布局問題籍嘹。下面簡單的寫下關于contentInsetAdjustmentBehavior這個屬性的理解。關于這個屬性提供了四種設置值弯院。

備注:當UIScrollViewframe超出安全區(qū)域時辱士,contentInsetAdjustmentBehavior決定了adjustContentInset的計算方式是否會受到safeAreaInset安全區(qū)域值的影響,進而影響了adjustContentInset的最終值听绳。最終影響到UIScrollView的content的內(nèi)邊距颂碘。

typedef NS_ENUM(NSInteger, UIScrollViewContentInsetAdjustmentBehavior) {
    UIScrollViewContentInsetAdjustmentAutomatic, 
    UIScrollViewContentInsetAdjustmentScrollableAxes, 
    UIScrollViewContentInsetAdjustmentNever, 
    UIScrollViewContentInsetAdjustmentAlways,
} 

二、UIScrollViewContentInsetAdjustmentBehavior 和 adjustContentInset

1. UIScrollViewContentInsetAdjustmentAutomatic
默認值椅挣,scrollView會根據(jù)頁面的安全區(qū)域的值自動調(diào)整計算头岔,系統(tǒng)在計算content的edgeInset時會考慮到安全區(qū)域自動計算和適應頂部和底部的內(nèi)邊距塔拳。即使UIScrollView不可滾動,也會自動設置content的內(nèi)邊距峡竣。其他情況下行為與UIScrollViewContentInsetAdjustmentScrollableAxes相同蝙斜。

  • 如何計算adjustContentInset值:

adjustContentInset = safeAreaInset + contentInset

2. UIScrollViewContentInsetAdjustmentScrollableAxes
也是自動調(diào)整計算,但是會考慮滾動方向澎胡,系統(tǒng)會根據(jù)UIScrollView的滾動方向進行判斷內(nèi)容的內(nèi)邊距是否要考慮安全區(qū)域孕荠,依賴于scrollEnabled和alwaysBounceHorizontal / vertical = YES。
eg. 如果是一個橫向滾動的UIScrollView攻谁,及便布局起點和高度值超過了頁面的安全區(qū)稚伍,那么系統(tǒng)也不會調(diào)整。

  • 如何計算adjustContentInset值:

可滾動方向:
adjustContentInset = safeAreaInset + contentInset
不可滾動方向:
adjustContentInset = contentInset

3. UIScrollViewContentInsetAdjustmentNever
內(nèi)容的內(nèi)邊距從不考慮安全區(qū)域戚宦,當contentInsetAdjustmentBehavior設置為Never的時候个曙,adjustContentInset值不受SafeAreaInset值的影響。
eg. 就算UIScrollView超出了safeAreaInsets受楼,系統(tǒng)不會對你的scrollView.adjustedContentInset做任何事情垦搬,即不作任何調(diào)整。

  • 如何計算adjustContentInset值:

adjustContentInset = contentInset

4. UIScrollViewContentInsetAdjustmentAlways
內(nèi)容的內(nèi)邊距總是考慮安全區(qū)域艳汽,只要UIScrollViewframe超出安全區(qū)域就調(diào)整相應top&bottom的超出值猴贰,調(diào)整的最大值不會超過安全區(qū)相應方向的距離的最大值。

  • 如何計算adjustContentInset值:

adjustContentInset = safeAreaInset + contentInset

三河狐、測試

  • 測試一: 默認設置 contentInsetAdjustmentBehaviorAutomatic米绕,頁面延伸布局為整個屏幕,從屏幕頂端開始計算馋艺;
    圖1

由圖1可見栅干,在默認配置下UITableView的內(nèi)容顯示正常,其內(nèi)容的內(nèi)邊距計算考慮到了安全距離捐祠。

view.safeAreaInsets = {88, 0, 83, 0}
tableView.contentInset = {0, 0, 0, 0}
tableView.adjustedContentInset = {88, 0, 83, 0}
  • 測試二: 默認設置 contentInsetAdjustmentBehaviorAutomatic碱鳞,頁面延伸布局為整個屏幕,從屏幕頂端開始計算踱蛀,并且設置UITableViewcontentInset的值為UIEdgeInsetsMake(40, 0, 0, 0)窿给;
    圖2

由圖2可見,在此配置下UITableView的內(nèi)容顯示不正常星岗,UITableView的內(nèi)容的內(nèi)邊距向下偏移了40

view.safeAreaInsets = {88, 0, 83, 0}
tableView.contentInset = {40, 0, 0, 0}
tableView.adjustedContentInset = {128, 0, 83, 0}
  • 測試三: 默認設置 contentInsetAdjustmentBehaviorAutomatic填大,頁面延伸布局為整個屏幕戒洼,從屏幕頂端開始計算俏橘,并且設置UITableView的frame的y值為50;
圖3
view.safeAreaInsets = {88, 0, 83, 0}
tableView.contentInset = {0, 0, 0, 0}
tableView.adjustedContentInset = {38, 0, 83, 0}
  • 測試四: 默認設置 contentInsetAdjustmentBehaviorAutomatic圈浇,頁面延伸布局為整個屏幕寥掐,從屏幕頂端開始計算靴寂,并且設置UITableView的frame的y值為-50;
圖4
view.safeAreaInsets = {88, 0, 83, 0}
tableView.contentInset = {0, 0, 0, 0}
tableView.adjustedContentInset = {88, 0, 83, 0}

由圖3可見召耘,在UITableView的頂部偏移父view的頂端50像素百炬,下移,在此配置下UITableView的內(nèi)容顯示正常污它,并且調(diào)整值小于安全區(qū)域垂直方向的最大值;
由圖4可見剖踊,在UITableView的頂部偏移父view的頂端-50像素,上移衫贬,在此配置下UITableView的內(nèi)容顯示不正常德澈,并且調(diào)整值為安全區(qū)域垂直方向的最大值;

結合圖3和圖4,可證明調(diào)整的最大值不會超過安全區(qū)相應方向的距離的最大值固惯。

  • 測試五: 設置 contentInsetAdjustmentBehaviorNever梆造,頁面延伸布局為整個屏幕,從屏幕頂端開始計算葬毫;
圖五
view.safeAreaInsets = {88, 0, 83, 0}
tableView.contentInset = {0, 0, 0, 0}
tableView.adjustedContentInset = {0, 0, 0, 0}

由圖5可見镇辉,在設置為Never時,UITableView的內(nèi)容內(nèi)邊距不會再考慮安全區(qū)域贴捡,因此系統(tǒng)計算adjustedContentInset的調(diào)整至為0忽肛,頁面布局顯示異常,此時adjustedContentInset = contentInset烂斋。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末麻裁,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子源祈,更是在濱河造成了極大的恐慌煎源,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件香缺,死亡現(xiàn)場離奇詭異手销,居然都是意外死亡,警方通過查閱死者的電腦和手機图张,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門锋拖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人祸轮,你說我怎么就攤上這事兽埃。” “怎么了适袜?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵柄错,是天一觀的道長。 經(jīng)常有香客問我,道長售貌,這世上最難降的妖魔是什么给猾? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮颂跨,結果婚禮上敢伸,老公的妹妹穿的比我還像新娘。我一直安慰自己恒削,他們只是感情好池颈,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钓丰,像睡著了一般饶辙。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上斑粱,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天弃揽,我揣著相機與錄音,去河邊找鬼则北。 笑死矿微,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的尚揣。 我是一名探鬼主播涌矢,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼快骗!你這毒婦竟也來了娜庇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤方篮,失蹤者是張志新(化名)和其女友劉穎名秀,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體藕溅,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡匕得,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了巾表。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片汁掠。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖集币,靈堂內(nèi)的尸體忽然破棺而出考阱,到底是詐尸還是另有隱情,我是刑警寧澤鞠苟,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布乞榨,位于F島的核電站秽之,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏姜凄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一趾访、第九天 我趴在偏房一處隱蔽的房頂上張望态秧。 院中可真熱鬧,春花似錦扼鞋、人聲如沸申鱼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捐友。三九已至,卻和暖如春溃槐,著一層夾襖步出監(jiān)牢的瞬間匣砖,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工昏滴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留猴鲫,地道東北人。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓谣殊,卻偏偏與公主長得像拂共,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子姻几,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

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