iPhone X適配指南之Safe Area

前言

Safe areas的作用是幫助我們將views放置在整個(gè)視圖中可見(jiàn)的正確的位置昆婿。UIKit定義下的View controllers中常常會(huì)有一部分特殊的views會(huì)被放置在最上方跑揉。例如:導(dǎo)航控制器NavigationController的NavigationBar就被放置在視圖的最頂部。即使有些時(shí)候這些放置在最頂部的views是透明的或者部分透明的蛮原,但是它仍然會(huì)遮蓋住在此位置的其他內(nèi)容仰剿。(注:此處最頂部不是指Y軸坐標(biāo)為0的頂部创淡,而是視圖層級(jí)的頂部,導(dǎo)航欄的位置永遠(yuǎn)在視圖最頂部不會(huì)被其他view遮蓋啄纤薄)

使用Safe areas來(lái)幫助我們布置我們的內(nèi)容琳彩。每個(gè)view都包含一個(gè)自身的layout guide(這一部分可以參考 safeAreaLayoutGuide
),我們可以用它來(lái)創(chuàng)建對(duì)view 的約束部凑,如果你并沒(méi)有使用 Auto Layout 來(lái)定位你的view露乏,我們可以通過(guò) safeAreaInsets
屬性來(lái)獲得內(nèi)部的值加以處理達(dá)到我們的目的。

圖1

圖1展示了日歷App的兩個(gè)頁(yè)面涂邀,并且解釋了這兩個(gè)不同的頁(yè)面下關(guān)聯(lián)的Safe area的部分瘟仿。

擴(kuò)展安全區(qū)域并包括自定義的views

我們可以定義一個(gè)容器視圖控制器container viewcontroller并通過(guò)添加子控制器child viewcontroller來(lái)將子控制器的視圖展示出來(lái)(注:這一部分的容器控制器其實(shí)代表的是諸如:NavigationController、TabbarController之類的視圖控制器)比勉。之后劳较,更新child viewcontroller的safe area來(lái)排除被container viewcontroller視圖遮蓋的部分。UIKit下的container viewcontroller已經(jīng)自動(dòng)調(diào)整了child viewcontroller的安全區(qū)域以便正確布局浩聋。例如:NavigationController 會(huì)自動(dòng)調(diào)整其之下的child viewcontroller的safe area以便放置NavigationBar观蜗。如果我們想要調(diào)整一個(gè)child viewcontroller的safe area可以通過(guò)修改additionalSafeAreaInsets屬性。

假設(shè)我們定義了一個(gè)container controller并在屏幕底部和邊緣放置了我們自定義的views衣洁,如圖2

圖2

因?yàn)檫@兩個(gè)custom view將會(huì)遮蓋child viewcontroller 中的內(nèi)容墓捻。所以我們必須調(diào)整child viewcontroller的safe area以便正確布局。
下面的代碼是container view controller中的 viewDidAppear(_:)
方法坊夫,這個(gè)方法的作用就是調(diào)整child viewcontroller中的safe area砖第。在這個(gè)方法中修改safe area的原因是在視圖被添加到view hierarchy之前撤卢,safeAreaInsets這個(gè)值都是不準(zhǔn)確的。

override func viewDidAppear(_ animated: Bool) {
   var newSafeArea = view.safeAreaInsets

   // Adjust the safe area to accommodate 
   //  the width of the side view.
   if let sideViewWidth = sideView?.bounds.size.width {
      newSafeArea.right += sideViewWidth
   }

   // Adjust the safe area to accommodate 
   //  the height of the bottom view.
   if let bottomViewHeight = bottomView?.bounds.size.height {
      newSafeArea.bottom += bottomViewHeight
   }

   // Adjust the safe area insets of the 
   //  embedded child view controller.
   let child = self.childViewControllers[0]
   child.additionalSafeAreaInsets = newSafeArea
}

官方文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末厂画,一起剝皮案震驚了整個(gè)濱河市凸丸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌袱院,老刑警劉巖屎慢,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異忽洛,居然都是意外死亡腻惠,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門欲虚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)集灌,“玉大人,你說(shuō)我怎么就攤上這事复哆⌒佬” “怎么了?”我有些...
    開封第一講書人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵梯找,是天一觀的道長(zhǎng)唆阿。 經(jīng)常有香客問(wèn)我,道長(zhǎng)锈锤,這世上最難降的妖魔是什么驯鳖? 我笑而不...
    開封第一講書人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮久免,結(jié)果婚禮上浅辙,老公的妹妹穿的比我還像新娘。我一直安慰自己阎姥,他們只是感情好记舆,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丁寄,像睡著了一般氨淌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上伊磺,一...
    開封第一講書人閱讀 49,144評(píng)論 1 285
  • 那天,我揣著相機(jī)與錄音删咱,去河邊找鬼屑埋。 笑死,一個(gè)胖子當(dāng)著我的面吹牛痰滋,可吹牛的內(nèi)容都是我干的摘能。 我是一名探鬼主播续崖,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼团搞!你這毒婦竟也來(lái)了严望?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤逻恐,失蹤者是張志新(化名)和其女友劉穎像吻,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體复隆,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡拨匆,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了挽拂。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惭每。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖亏栈,靈堂內(nèi)的尸體忽然破棺而出台腥,到底是詐尸還是另有隱情,我是刑警寧澤绒北,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布黎侈,位于F島的核電站,受9級(jí)特大地震影響镇饮,放射性物質(zhì)發(fā)生泄漏蜓竹。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一储藐、第九天 我趴在偏房一處隱蔽的房頂上張望俱济。 院中可真熱鬧,春花似錦钙勃、人聲如沸蛛碌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蔚携。三九已至,卻和暖如春克饶,著一層夾襖步出監(jiān)牢的瞬間酝蜒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工矾湃, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留亡脑,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像霉咨,于是被迫代替她去往敵國(guó)和親蛙紫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

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

  • iPhone X已經(jīng)發(fā)布有一段時(shí)間了途戒,最近我負(fù)責(zé)把公司的產(chǎn)品Cisco Spark適配iPhone X坑傅。雖然還沒(méi)有...
    小胡昵稱已被占用閱讀 600評(píng)論 0 0
  • iOS 7 之后蘋果給 UIViewController 引入了 topLayoutGuide 和 bottomL...
    IOSCoderYummy閱讀 774評(píng)論 0 0
  • /* UIViewController is a generic controller base class th...
    DanDanC閱讀 1,793評(píng)論 0 2
  • 原文出自我在團(tuán)隊(duì)技術(shù)公眾號(hào)發(fā)表的 《隨手記在iPhone X上的真機(jī)適配實(shí)踐總結(jié)》 Intro 前幾天,隨手記提交...
    JOJOTOV閱讀 2,202評(píng)論 1 16
  • 莫名地心情不爽喷斋。 睡覺(jué)前唁毒,看見(jiàn)余蕓的信息,不知名地想起继准。 感動(dòng)成了狗枉证。
    try2閱讀 180評(píng)論 0 0