編輯導語：自動布局在任何一個應用中都是關鍵，可以達到事半功倍的效果。本篇文章帶你深入了解自動布局，幫你掌握自動布局的進階玩法，一起來看看吧！
自動布局的初步玩法更多的聚焦在基礎和外在，真正的進階玩法我留到了這篇。
了解成本較高，是以我使用了一些講故事的方法，希望讓你更輕松得學習和掌握。
一、自動布局的本質（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）往内拆，直到拆到不能拆為止。可與看到，每一層的對象都是由嵌套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的設計筆記 授權釋出于人人都是産品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協定。