所以，按鈕文字作為唯一的、沒(méi)有兒子的子級(jí)，選定它時(shí)理應(yīng)不該出現(xiàn)Hug contents這個(gè)劇本。

但讓我頗為意外的是，它作為子級(jí)時(shí)偏偏就有這選項(xiàng)。而我們把文字替換成其他圖層（比如形狀）時(shí)卻沒(méi)有出現(xiàn)。

其實(shí)，這是因?yàn)槲淖謭D層本身也有類似Resizing的屬性，所以允許文字型子級(jí)有Hug contents功能。

文字的Resizing，也就是我們熟知的文本框三屬性：自動(dòng)寬度，自動(dòng)高度和固定尺寸。

而這三個(gè)屬性，和自動(dòng)布局中的Resizing異曲同工，之間也存在著一對(duì)一或者一對(duì)多的對(duì)應(yīng)關(guān)系。

比如你將其屬性定義為自動(dòng)寬度，那么你會(huì)發(fā)現(xiàn)橫、縱向的劇本都是用了Hug contents，但如果你把橫向改成了Fixed width，你會(huì)發(fā)現(xiàn)文本框?qū)傩宰兂闪俗詣?dòng)高度。

而這種橫向定寬、縱向自適應(yīng)的特點(diǎn)，則正好對(duì)應(yīng)了這種屬性。

2. Fill container

Fill container（填充容器）這個(gè)劇本和上面的完全相反，它的別稱是《你爹還是你爹》，主線是「兒子聽(tīng)父親的」，即子級(jí)尺寸跟隨父級(jí)的變化而變化。它的主角是兒子。

繼續(xù)用這個(gè)按鈕案例，我們?cè)谧詣?dòng)布局時(shí)已事先設(shè)定了上下8px、左右24px的padding值（內(nèi)間距）。

然后橫向上，將子級(jí)設(shè)定Fill container。然后改變父級(jí)的寬度，你會(huì)發(fā)現(xiàn)，不論父級(jí)什么尺寸，子級(jí)寬度將始終基于所設(shè)定的padding值，跟隨響應(yīng)變化。

先說(shuō)結(jié)論：作為主角的子級(jí)。所謂的子級(jí)，就是有父級(jí)（frame、group等）包裹的對(duì)象，因?yàn)橹挥羞@樣才能讓子級(jí)跟隨。

所以我們選定的對(duì)象，如果沒(méi)被父級(jí)包裹時(shí)（比如直接放在畫布上的top frame畫板），F(xiàn)ill container劇本是沒(méi)有的。

3. Fixed size

上面?zhèn)z劇本，總得有一方必須聽(tīng)另一方的。

Resizing大佬覺(jué)得人物關(guān)系不夠?qū)α?，不夠吸引眼球，因此又?chuàng)作了第三個(gè)劇本Fixed size，主線就是「兒子和老子反目成仇，誰(shuí)也不服誰(shuí)」。

我們固定元素的橫向或縱向尺寸后，其尺寸都不會(huì)跟隨父級(jí)或者子級(jí)的變化而變化。表面上還像以前那么親密，但早已貌合神離、形同陌路。

比如這個(gè)按鈕，我們固定子級(jí)的寬度（fix width），在改變父級(jí)（按鈕容器）或者子級(jí)的寬度后，子級(jí)寬度將始終保持固定，并沒(méi)有像fill container那樣跟隨變化。

然后，我們?cè)俟潭ㄆ涓叨龋╢ix height）。改變父級(jí)或子級(jí)的尺寸，子級(jí)高度同樣未跟隨變化。

子級(jí)搞完，我們?cè)賮?lái)嘗試下父級(jí)。

我們又回到最初的起點(diǎn)，將子級(jí)設(shè)定Hug contents，父級(jí)固定其寬高。那么增加文字后，可以發(fā)現(xiàn)不論子級(jí)怎么變化，父級(jí)自身的寬高都維持不變。

四、實(shí)戰(zhàn)（fight）

這里繼續(xù)沿用咱們上篇文章所制作的自動(dòng)布局化的卡片。

我們的目標(biāo)是：通過(guò)Resizing這個(gè)功能來(lái)實(shí)現(xiàn)這個(gè)卡片的動(dòng)態(tài)響應(yīng)。最后的效果應(yīng)該是下面這樣：

首先，從目標(biāo)回推，要想實(shí)現(xiàn)這樣的效果，也就是讓內(nèi)部的子級(jí)跟隨這一整個(gè)卡片父級(jí)。所以我們選擇兒子聽(tīng)父親的劇本-Fill container，將其應(yīng)用到我們的子級(jí)-上下兩個(gè)嵌套的自動(dòng)布局frame。

應(yīng)用后，作者單元的尺寸因?yàn)橐S父級(jí)，所以進(jìn)行了拉伸。

但是！我們改變卡片尺寸時(shí)并沒(méi)有任何反應(yīng)。

這是因?yàn)椋篎ill container只能決定子級(jí)跟隨當(dāng)前層的父級(jí)。如果存在多個(gè)嵌套層，那么每一層的子級(jí)都得去應(yīng)用這個(gè)劇本，彼此聯(lián)動(dòng)才能生效。

比如這個(gè)卡片，我們只把劇本應(yīng)用到一級(jí)拆分下的倆frame，那么子級(jí)跟隨父級(jí)變化的規(guī)則僅在這一層生效。但更細(xì)分下的子級(jí)并沒(méi)有生效，那么整體卡片就無(wú)法正常響應(yīng)。

這就好像表盤里的那些齒輪，任意一個(gè)齒輪的齒口沒(méi)有銜接上，那么整個(gè)鐘表就無(wú)法運(yùn)行。

因此，我們需要把劇本應(yīng)用到所有內(nèi)嵌的子級(jí)，才能使整個(gè)卡片動(dòng)態(tài)響應(yīng)。

這里我用一張圖來(lái)示意這個(gè)拆解的過(guò)程。我們從最外層的卡片（top frame）往內(nèi)拆，直到拆到不能拆為止。可與看到，每一層的對(duì)象都是由嵌套frame（nested frame）和唯一子級(jí)（chidlren）構(gòu)成。

這些便是可以應(yīng)用劇本的對(duì)象。當(dāng)然，劇本需要根據(jù)場(chǎng)景來(lái)選擇。我希望頭像保持固定，所以安排fix size固定其寬高。而其他的對(duì)象，我希望能全部跟隨父級(jí)變化，所以統(tǒng)一安排Fill container。

最后，表演一下，完美。

五、最后

咱們一起盤下本篇的知識(shí)點(diǎn)——

1. 自動(dòng)布局的Resizing幫助你實(shí)現(xiàn)父子級(jí)動(dòng)態(tài)關(guān)系，它有三個(gè)劇本：Hug contents、Fill container和Fixed size；
2. Hug contents：父級(jí)跟隨子級(jí)。它是自動(dòng)布局的默認(rèn)劇本；
3. Fill container：子級(jí)跟隨父級(jí)。這個(gè)功能可實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)布局；
4. Fixed size：誰(shuí)也不跟誰(shuí)。常用于需固定尺寸的對(duì)象（比如頭像）
5. Fill container只能決定子級(jí)跟隨當(dāng)前層的父級(jí)，所以存在多層嵌套結(jié)構(gòu)時(shí)，每一層都得考慮。

原創(chuàng)不易，如果這篇文章對(duì)你產(chǎn)生了些許幫助，歡迎點(diǎn)個(gè)「在看」，支持我原創(chuàng)的同時(shí)也讓它幫助到更多的小伙伴。

我是Andrew，一個(gè)將寫作當(dāng)成事業(yè)的設(shè)計(jì)師。

下期見(jiàn)。

作者：Andrew丞；公眾號(hào)：Andrew的設(shè)計(jì)筆記

原文鏈接：https://mp.weixin.qq.com/s/Q_KCBPOhdOzoQ4p67qC9OQ

本文由 @Andrew的設(shè)計(jì)筆記 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。