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

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

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

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

彼得潘的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