iOS在默認情況下,豎屏會顯示狀態欄,橫屏自動隱藏狀態欄。而視圖控制器的主視圖默認位於屏幕頂端,在豎屏時會被頂部狀態欄遮擋。如果我們希望不被狀態欄遮擋,則需要先判斷橫豎屏,然後動態顯示隱藏狀態欄。如果界面中還存在導航欄、分頁欄,情況就更復雜一些。總之,自己處理是一件很麻煩的事情。
佈局嚮導
在iOS 7中,蘋果引入了Top Layout Guide(頂部佈局嚮導)和Bottom Layout Guide(底部佈局嚮導)的概念,它們是界面中的兩個隱藏視圖,分別指示當前界面中被頂部條形區域(如狀態欄StatusBar、導航欄NavigationBar)和被底部條形區域(如分頁欄TabBar)佔據的區域。
topLayoutGuide和bottomLayoutGuide是視圖控制器的兩個屬性(上圖中的self是當前的ViewController)。其中頂部佈局嚮導的底部爲頂部條形區域的最下方,即:
- 如果沒有狀態欄和導航欄,則爲屏幕頂端。
- 如果只有狀態欄,則爲狀態欄下方(20px)。
- 如果只有導航欄,則爲導航欄下方(44px)。
- 如果同時有狀態欄和導航欄,則爲導航欄下方(64px)。
同理,底部佈局嚮導的頂部爲下方條形區域的最上方。
這兩個佈局嚮導會根據界面的情況動態調整其高度。我們就可以參照這兩個佈局嚮導建立佈局約束,無需自己去判斷和實現了。
安全區域
iOS 11引入了Safe Area(安全區域)的概念,它指示當前界面中不被遮擋的區域,有如下特點:
- 它是一個不被頂部條形區域和底部條形區域遮擋的區域。
- 它不位於曲面屏邊緣區域(例如iPhone X)。
- 它能夠根據界面動態調整大小。
- 開發者能夠調整安全區域的大小。
下圖爲安全區域的示意圖。
同時,頂部和底部佈局嚮導被標記爲廢棄(Deprecated)不再推薦使用。如果你的項目是使用老版本Xcode創建,則新版本Xcode會將storyboard/xib文件中基於導航向導的約束自動轉換爲基於安全區域的約束。另外,儘管安全區域是iOS 11新增加的,但storyboard文件仍然兼容老的系統(iOS 8、9、10)。
參考文獻
- 蘋果官方文檔《Positioning Content Relative to the Safe Area》:https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
- Safe Area Layout Guide:https://useyourloaf.com/blog/safe-area-layout-guide/