設定元件和 App 畫面上邊界的間距

當我們設定元件距離畫面上邊界的間距條件時,Xcode 總自作聰明地認定我們喜歡 Top Layout Guide,預設我們想設定元件到 Top Layout Guide 的間距。如以下例子,設定上方間距 0 後,長出了代表彼得潘著作的 image view 上邊界和 Top Layout Guide 下邊界的間距。 ( book.top = Top Layout Guide.bottom )

讓我們再加上 image view 的寬高條件,以及水平置中的條件,見證最後的神聖結果吧。

彼得潘的著作上邊界剛好平貼 status bar的下邊界,因為此時 status bar 代表著 Top Layout Guide。

彼得潘希望著作能平貼 App 畫面的上邊界,就算被 status bar 遮到也在所不惜,小小的 status bar 是遮蔽不了彼得潘著作的光芒的 !

實現的方法很簡單,步驟如下:

1 從 image view 拉線連到 controller 的 view 後放開觸碰版,顯示連線選單。

2 按住 option ,顯示另一種連線選單,選擇 Top Space to Container Margin。( Container 代表 image view 的 superview,也就是 controller 的 view )

3 將剛剛產生的條件的 constant 設為 0。
由於 controller 的 view 的 top margin 預設為 0,不會造成任何影響,因此我們已經大功告成,實現 image view 平貼 App 畫面的上邊界。

彼得潘的iOS App程式設計入門,文組生的iOS App程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store