iT邦幫忙

第 11 屆 iThome 鐵人賽
DAY 8
0
自我挑戰組

Swift!從新手到微上手系列 第 8 篇

Swift-自動佈局 (Auto Layout)

11th鐵人賽 swift autolayout
1190 瀏覽

  • 分享至 

  • xImage
    •  

Auto Layout是基本約束佈局的系統，使開發人員能夠創建響應屏幕大小和設備方向變化的界面。

右下角從左到右不同功能

  • Update Frames - 更新到設定好的佈局位置
  • Embed In - 嵌入堆疊視圖
  • Align - 建立元件的對齊條件
  • Add New Constraints - 建立元件的約束條件，約束每個元件的距離
  • Resolve Auto Layout issue - 解決佈局問題

實作Auto Layout功能

  1. 在中間放一個View，並改成藍色。設定他的長寬為30

  1. 使用Align 把兩個打勾後，會水平與垂直置中在畫面裡

  1. 再放一個View在藍色的右邊並設定長寬為40，與左邊的view間距為20

  1. 接下來會報錯，因為灰色的View沒有y軸的相對位置

  1. 我們再幫他加上垂直置中的限制條件

  1. 這時我們簡單的Auto Layout就完成了。不管現在是哪種機型或者橫向縱向，都可以按照約束條件的相對位置去做Layout


上一篇
Swift-App生命週期 (Life Cycle)
下一篇
Swift-TextField & TextView
系列文
Swift!從新手到微上手 共 30 篇
  1. 26
    Swift-GCD (Grand Central Dispatch)
  2. 27
    Swift-MVC
  3. 28
    Swift-Notification
  4. 29
    Swift-Frame&Bound
  5. 30
    Swift-Singleton
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙