對于 UI 設計師而言，日常工作 20% 的時間用來設計内容，剩下的 80% 大多都是做一些重複性的工作，比如說文案調整會導緻闆塊的尺寸發生變化，或頁面中的元素需要調整大小，影響到其他元素的位置，這些都需要設計師逐一手動調整。但是如果掌握了 MasterGo 的“自動布局”的話，将會節省大量重複的工作時間。今天小編就先帶大家了解一下 MasterGo “自動布局”功能。
首先，我們要知道什麼是自動布局。簡單來說，就是彈性布局在設計上的可視化應用，讓元素變得可以自适應。它的好處就是，如果修改子級内容的話，父級也可以按照我們的設定來自動适應變化；相反，更改父級内容，内部子級的排版也會根據自動布局的設定進行調整，大大減少了後續修改頁面所需要的時間。
現在就在 MasterGo 中帶大家了解一下“自動布局”。首先需要建立幾個元素，選中它們，可以直接點選右側的“自動布局”，當然，使用快捷鍵“Shift+A”也可以快速建立自動布局。如果想解除自動布局，同樣點選右側的“-”就可以解除自動布局，其實通過左側圖層關系不難看出，自動布局理論上是将選中控件建立特殊容器，是以通過“Command+Shift+G”也可以解除自動布局。
建立自動布局以後，帶大家認識“自動布局”的功能面闆：
在“自動布局”的功能面闆中，可以看到兩個切換圖示，它的功能是更改自動布局的排列方向，通過圖示也可以快速了解“橫向布局”與“縱向布局”的差別，并且修改完成之後，左側圖層中的圖示也會相應發生變化，非常直覺。
旁邊還有一個功能是“調整元素子級的間距”，如果自動布局的容器中有多個子級時，可以通過調整這裡的數值來修改間距，就算後期加入其他元素，也會按照設定好的間距進行排列。這裡需要注意，一層自動布局隻能設定一種間距，如果想要不同間距，需要建立多層嵌套。
同時，MasterGo 還提供了“分布式間距”，當選擇幾個元素，開啟“分布式間距”後，修改容器的大小，元素會在容器内平均分布，自動計算間距，一般在我們控制等距元素的響應時會用到這個功能，比如說我們常見的底部 Tab 欄。
接下來我們介紹兩個調整内部間距的功能，簡單來說就是調整子級到父級的間距。需要注意的是，無論子級有多少個，都被視為一個整體，這裡更改的是子級整體與父級容器的間距，可以修改它上下間距與左右間距兩種數值，在同一個輸入框内，兩個數值可以通過逗号隔開。當你想設定頂部間距為 16，底部間距為 24 ，隻需要在上下間距輸入框内輸入“16，24”即可完成上下邊距的對應設定。
MasterGo 除了“上下”、“左右”這兩個快捷邊距調整外，還提供了“展開邊距”功能，該功能可以更加直覺地調整上、下、左、右對應邊距，用來适應更多場景與需求。
接着我們來看“自動布局設定”功能，這裡包含了兩個内容，分别是“自動布局描邊設定”與“自動布局堆疊設定”。當你給自己元素添加一個描邊，設定中選擇“不包含”，描邊無論粗細是多少，都不被包含在自動布局的設定内，選擇“包含”描邊的粗細将影響自動布局的數值調整，當然我們也可以通過“預覽”視窗更加直覺地看到對應效果。
堆疊設定也非常好了解，以我們常用的使用者頭像為例，我們調整間距為負值，将會産生堆疊效果，這裡的設定可以修改堆疊方式為“正向堆疊”與“反向堆疊”兩種。
最後介紹的子產品是“分布方式”，MasterGo 為我們提供了 9 種不同的分布方式，通過點選縮略圖中的分布方式，子級元素也會固定在容器的某一位置，當将子級固定在右上角，無論怎麼拉伸容器，子級的位置都不會發生改變。
以上就是關于 MasterGo “自動布局”的介紹了，希望能幫助到大家。未來，MasterGo 團隊還會持續優化産品功能，滿足不同使用者的使用需求，讓設計師擁有更流暢、優質的設計體驗。