關於iOS中的佈局嚮導(Layout Guide)和安全區域(Safe Area)

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

參考文獻

  1. 蘋果官方文檔《Positioning Content Relative to the Safe Area》:https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
  2. Safe Area Layout Guide:https://useyourloaf.com/blog/safe-area-layout-guide/
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章