起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識
編輯導語：自動布局在任何一個應用中都是關鍵，可以達到事半功倍的效果。本篇文章帶你深入了解自動布局，幫你掌握自動布局的進階玩法，一起來看看吧！
自動布局的初步玩法更多的聚焦在基礎和外在，真正的進階玩法我留到了這篇。
理解成本較高，所以我使用了一些講故事的方法，希望讓你更輕松得學習和掌握。
一、自動布局的本質（core）
自動布局的本質，在于父子級動態關系的把控。
大猩猩在SD12集和櫻木說過：能夠掌控籃板球，就能掌控比賽。（對，我又祭出這張圖了）
我認為，能掌控父子級動態關系，就能掌控自動布局。
而在自動布局中，能具體去實現這種動態關系的是Resizing功能。
看到這里你可能會很懵逼，啥是父子級動態關系？啥是Resizing？別急，下面都會講。
二、Rezising是啥（what）
如果你創建了一個自動布局，那么你會發現，在auto layout面板下面，會多出這么一個玩意兒，它就是Resizing。
它的中文翻譯「調整大小」讓人一言難盡，文不表意還容易誤導，所以我只叫它英文。
先看下官方對它的描述：當一個對象的父級或者子級發生尺寸改變時，你可以通過Resizing來控制其如何跟隨適應。
可能會有些晦澀難懂，所以我打了個比方：
現在，《導演請指教》欄目組發現了你無與倫比的導演才華，邀你去節目組競（chao）演（zuo），而此次的電影主題是「父子情」。
現在你的麾下有Resizing這么一個編劇，他寫好了三個和父子情相關的劇本。
而你要做的，就是發揮你的絕妙才智確定一個合適的劇本，來在不同的場景下確定父親和兒子關系的走向，以此干翻你的對手。
這里父親和兒子關系的走向，就是我上面所說的父子級動態關系。
而這三個劇本，分別叫Hug contents、Fill container和Fixed size。你可以在Resizing右側的兩個下拉框里發現它們。這兩個下拉框，分別代表了子級或者父級的橫向和縱向。
左側的圖標又是啥？
這里引用下草帽老師的觀點，Resizing容易給你整懵的很大一部分原因，在于左側的圖標。看上去唬人，但其實，左側圖標和右側下拉框實現的是一個功能。
因為圖標非常難用，我的建議是，只通過右側的下拉框去選擇劇本就行。
三、Rezising的三個劇本（juben）
下面，我為你簡單講下這三個劇本。懂這三個劇本，你的自動布局基本就不成問題。（注意，下面涉及到父子級關系，如果對這些概念不了解的小伙伴，強烈建議看完【6000字超干干貨】沒搞定這個概念，figma就真的白用了！→中的對象關系、frame多合一優勢這兩節內容~）
1. Hug contents
Hug contents（適應內容）這個劇本，主線就是「父親聽兒子的」——即父級的尺寸跟隨子級的尺寸而變化。這個劇本的主角是父親。
舉個例子，下面這個按鈕就是父級，按鈕內部的文字就是子級。
我們將主角（父級）的Resizing設定成Hug contents，接下來的劇情就按這個劇本走——不論子級什么長度，按鈕這個父級的尺寸始終跟隨子級變化。
因為這種劇本的使用場景最多，所以它也是所有自動布局默認的劇本。
先說結論：所有的父級和文字子級。（以下分析過程有些繞，可直接跳過，不影響Resizing的掌握）
Hug contents是父級跟隨子級，所以我們選定的這個對象，必須得有子級讓我們去跟。這就好比主角想聽兒子的話，前提是他得有一個兒子才行。
所以，按鈕文字作為唯一的、沒有兒子的子級，選定它時理應不該出現Hug contents這個劇本。
但讓我頗為意外的是，它作為子級時偏偏就有這選項。而我們把文字替換成其他圖層（比如形狀）時卻沒有出現。
其實，這是因為文字圖層本身也有類似Resizing的屬性，所以允許文字型子級有Hug contents功能。
文字的Resizing，也就是我們熟知的文本框三屬性：自動寬度，自動高度和固定尺寸。
而這三個屬性，和自動布局中的Resizing異曲同工，之間也存在著一對一或者一對多的對應關系。
比如你將其屬性定義為自動寬度，那么你會發現橫、縱向的劇本都是用了Hug contents，但如果你把橫向改成了Fixed width，你會發現文本框屬性變成了自動高度。
而這種橫向定寬、縱向自適應的特點，則正好對應了這種屬性。
2. Fill container
Fill container（填充容器）這個劇本和上面的完全相反，它的別稱是《你爹還是你爹》，主線是「兒子聽父親的」，即子級尺寸跟隨父級的變化而變化。它的主角是兒子。
繼續用這個按鈕案例，我們在自動布局時已事先設定了上下8px、左右24px的padding值（內間距）。
然后橫向上，將子級設定Fill container。然后改變父級的寬度，你會發現，不論父級什么尺寸，子級寬度將始終基于所設定的padding值，跟隨響應變化。
先說結論：作為主角的子級。所謂的子級，就是有父級（frame、group等）包裹的對象，因為只有這樣才能讓子級跟隨。
所以我們選定的對象，如果沒被父級包裹時（比如直接放在畫布上的top frame畫板），Fill container劇本是沒有的。
3. Fixed size
上面倆劇本，總得有一方必須聽另一方的。
Resizing大佬覺得人物關系不夠對立，不夠吸引眼球，因此又創作了第三個劇本Fixed size，主線就是「兒子和老子反目成仇，誰也不服誰」。
我們固定元素的橫向或縱向尺寸后，其尺寸都不會跟隨父級或者子級的變化而變化。表面上還像以前那么親密，但早已貌合神離、形同陌路。
比如這個按鈕，我們固定子級的寬度（fix width），在改變父級（按鈕容器）或者子級的寬度后，子級寬度將始終保持固定，并沒有像fill container那樣跟隨變化。
然后，我們再固定其高度（fix height）。改變父級或子級的尺寸，子級高度同樣未跟隨變化。
子級搞完，我們再來嘗試下父級。
我們又回到最初的起點，將子級設定Hug contents，父級固定其寬高。那么增加文字后，可以發現不論子級怎么變化，父級自身的寬高都維持不變。
四、實戰（fight）
這里繼續沿用咱們上篇文章所制作的自動布局化的卡片。
我們的目標是：通過Resizing這個功能來實現這個卡片的動態響應。最后的效果應該是下面這樣：
首先，從目標回推，要想實現這樣的效果，也就是讓內部的子級跟隨這一整個卡片父級。所以我們選擇兒子聽父親的劇本-Fill container，將其應用到我們的子級-上下兩個嵌套的自動布局frame。
應用后，作者單元的尺寸因為要跟隨父級，所以進行了拉伸。
但是！我們改變卡片尺寸時并沒有任何反應。
這是因為：Fill container只能決定子級跟隨當前層的父級。如果存在多個嵌套層，那么每一層的子級都得去應用這個劇本，彼此聯動才能生效。
比如這個卡片，我們只把劇本應用到一級拆分下的倆frame，那么子級跟隨父級變化的規則僅在這一層生效。但更細分下的子級并沒有生效，那么整體卡片就無法正常響應。
這就好像表盤里的那些齒輪，任意一個齒輪的齒口沒有銜接上，那么整個鐘表就無法運行。
因此，我們需要把劇本應用到所有內嵌的子級，才能使整個卡片動態響應。
這里我用一張圖來示意這個拆解的過程。我們從最外層的卡片（top frame）往內拆，直到拆到不能拆為止?？膳c看到，每一層的對象都是由嵌套frame（nested frame）和唯一子級（chidlren）構成。
這些便是可以應用劇本的對象。當然，劇本需要根據場景來選擇。我希望頭像保持固定，所以安排fix size固定其寬高。而其他的對象，我希望能全部跟隨父級變化，所以統一安排Fill container。
最后，表演一下，完美。
五、最后
咱們一起盤下本篇的知識點——
- 自動布局的Resizing幫助你實現父子級動態關系，它有三個劇本：Hug contents、Fill container和Fixed size；
- Hug contents：父級跟隨子級。它是自動布局的默認劇本；
- Fill container：子級跟隨父級。這個功能可實現動態響應布局；
- Fixed size：誰也不跟誰。常用于需固定尺寸的對象（比如頭像）
- Fill container只能決定子級跟隨當前層的父級，所以存在多層嵌套結構時，每一層都得考慮。
原創不易，如果這篇文章對你產生了些許幫助，歡迎點個「在看」，支持我原創的同時也讓它幫助到更多的小伙伴。
我是Andrew，一個將寫作當成事業的設計師。
下期見。
作者：Andrew丞；公眾號：Andrew的設計筆記
原文鏈接：https://mp.weixin.qq.com/s/Q_KCBPOhdOzoQ4p67qC9OQ
本文由 @Andrew的設計筆記 授權發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
很詳細，感謝
透
就像文章標題說的，手把手教你如何進行自動布局設計，知識點滿滿。
非常好