Rect Transform layout系統(tǒng)足夠靈活，可以處理許多不同類型的布局豪嚎，還允許以完全自由的方式放置元素搔驼。然而，有時(shí)需要一些更結(jié)構(gòu)化的東西侈询。

自動(dòng)布局系統(tǒng)提供了將元素放置在嵌套布局組(如水平組舌涨、垂直組或網(wǎng)格)中的方法。它還允許根據(jù)包含的內(nèi)容自動(dòng)調(diào)整元素的大小扔字。例如囊嘉，可以動(dòng)態(tài)調(diào)整按鈕的大小，使其完全適合其文本內(nèi)容和一些填充革为。

自動(dòng)布局系統(tǒng)是在矩形變換布局系統(tǒng)的基礎(chǔ)上建立起來的系統(tǒng)扭粱。它可以選擇性地用于某些或所有元素。

一震檩、理解布局元素(Layout Element)

自動(dòng)布局系統(tǒng)是基于布局元素(layout elements)和布局控制器(layout controllers)的概念琢蛤。布局元素是具有Rect Transform 和其他可選組件的游戲?qū)ο篁讯椤２季衷貙?duì)它應(yīng)該具有的大小有一定的了解。布局元素不會(huì)直接設(shè)置自己的大小博其，但是作為布局控制器的其他組件可以使用它們提供的信息來計(jì)算要使用的大小套才。

布局元素(layout element)具有定義其自身屬性的屬性：

• Minimum width:最小寬度
• Minimum height:最小的高度
• Preferred width:首選的寬度
• Preferred height:首選的高度
• Flexible width:靈活的寬度
• Flexible height:靈活的高度

使用布局元素提供的信息的布局控制器組件的例子有Content Size Fitter和各種Layout Group組件。

布局組中布局元素的大小的基本原則如下：

• 首先分配最小大小慕淡。
• 如果有足夠的可用空間背伴，則分配首選大小。
• 如果有額外的可用空間峰髓，則分配靈活的大小傻寂。

任何具有Rect Transform的游戲?qū)ο蠖伎梢宰鳛椴季衷亍ＤJ(rèn)情況下儿普，它們的最小崎逃、首選和靈活大小為0。某些組件在添加到游戲?qū)ο髸r(shí)眉孩，將更改這些布局屬性。

Image和Text組件是提供布局元素屬性的組件的兩個(gè)示例勒葱。它們更改首選的(preferred)寬度和高度以匹配精靈或文本內(nèi)容浪汪。

Layout Element Component

如果您想要重寫最小的、首選的或靈活的大小凛虽，您可以通過向游戲?qū)ο筇砑覮ayoutElement來實(shí)現(xiàn)死遭。

image

LayoutElement允許您覆蓋一個(gè)或多個(gè)布局屬性的值。為要覆蓋的屬性啟用復(fù)選框凯旋，然后指定要覆蓋的值呀潭。

Minimum尺寸和Preferred尺寸在常規(guī)單位中定義，而Flexible尺寸在相對(duì)單位中定義至非。

如果任何布局元素的Flexible大小都大于零钠署，這意味著所有可用空間都將被填滿。兄弟姐妹的相對(duì)Flexible大小值決定了每個(gè)兄弟姐妹填充的可用空間的比例荒椭。通常谐鼎，F(xiàn)lexible寬度和高度設(shè)置為0或1。

在某些情況下趣惠，指定Preferred大小和Flexible大小都是有意義的狸棍。只有在所有Preferred的大小被完全分配之后，才會(huì)分配Flexible的大小味悄。

因此草戈，指定了Flexible大小但沒有Preferred大小的布局元素將保持其最小大小，直到其他布局元素增長(zhǎng)到它們的全部Preferred大小侍瑟，然后才開始基于額外的可用空間增長(zhǎng)唐片。通過指定一個(gè)Flexible的大小，可以避免這種情況，元素可以與具有Preferred大小的其他布局元素一起增長(zhǎng)到其Preferred大小牵触，然后在分配了所有Flexible大小后進(jìn)一步增長(zhǎng)淮悼。

二、理解布局控制器(Layout Controllers)

布局控制器是控制一個(gè)或多個(gè)布局元素(也就是帶有RectTransform的游戲?qū)ο?的大小和可能的位置的組件揽思。布局控制器可以控制它自己的布局元素(與它在自己上的游戲?qū)ο笙嗤?袜腥，也可以控制子布局元素。

作為布局控制器的組件本身也可以同時(shí)作為布局元素钉汗。

1. Content Size Fitter內(nèi)容大小適配器

Content Size Fitter功能就像一個(gè)布局控制器羹令，控制自己布局元素的大小。大小由游戲?qū)ο笊喜季衷亟M件提供的最小或首選大小決定损痰。這種布局元素可以是圖像或文本組件福侈、布局組或布局元素組件。

查看自動(dòng)布局系統(tǒng)運(yùn)行的最簡(jiǎn)單方法是向帶有文本組件的游戲?qū)ο笾刑砑覥ontent Size Fitter 組件卢未。

image

屬性：

• Unconstrained：不要基于布局元素驅(qū)動(dòng)寬度肪凛。
• Min Size：根據(jù)布局元素的最小寬度驅(qū)動(dòng)寬度辽社。
• Preferred Size：根據(jù)布局元素的Preferred寬度驅(qū)動(dòng)寬度伟墙。

如果您將Horizontal Fit或Vertical Fit設(shè)置為Preferred，RectTransform將調(diào)整其寬度和/或高度以適合文本內(nèi)容滴铅。

值得記住的是戳葵，當(dāng)RectTransform被調(diào)整大小時(shí)——無論是通過Content Size Fitter還是其他什么——調(diào)整大小都是圍繞pivot進(jìn)行的。這意味著調(diào)整的方向可以用pivot來控制汉匙。

例如拱烁，當(dāng)pivot位于中心時(shí)，Content Size Fitter將向各個(gè)方向均勻地展開Rect Transform噩翠。當(dāng)pivot位于左上角時(shí)戏自，Content Size Fitter將把Rect Transform向下展開并向右展開。

2. Aspect Ratio Fitter長(zhǎng)寬比適配器

Aspect Ratio Fitter功能就像一個(gè)布局控制器绎秒，控制自己布局元素的大小浦妄。

image

它可以調(diào)整高度以適應(yīng)寬度，反之亦然见芹，或者它可以使元素適合于它的父元素或封裝它的父元素剂娄。The Aspect Ratio Fitter不考慮布局信息，如最小尺寸和首選尺寸玄呛。

屬性：

• Aspect Mode：是如何調(diào)整矩形大小以加強(qiáng)長(zhǎng)寬比的阅懦。

• None：不要使矩形與長(zhǎng)寬比相匹配。

• Width Controls Height：高度根據(jù)寬度自動(dòng)調(diào)整徘铝。

  -** Height Controls Width**：寬度會(huì)根據(jù)高度自動(dòng)調(diào)整耳胎。

• Fit In Parent：寬度惯吕，高度，位置怕午，和錨是自動(dòng)調(diào)整废登，使矩形適應(yīng)于父母的矩形，同時(shí)保持長(zhǎng)寬比郁惜。(保持縱橫比的縮放該UI堡距，使其上下或者左右與父物體對(duì)其且在父物體內(nèi)部)

image

• Envelope Parent：寬度、高度兆蕉、位置和錨點(diǎn)會(huì)自動(dòng)調(diào)整羽戒，使矩形覆蓋整個(gè)父節(jié)點(diǎn)的區(qū)域，同時(shí)保持長(zhǎng)寬比虎韵。此矩形可以比父矩形擴(kuò)展得更遠(yuǎn)易稠。(跟上類似，只是上是限制在父物體內(nèi)部包蓝，而這個(gè)卻超出父物體驶社，覆蓋整個(gè)父物體)

image

• Aspect Ratio：執(zhí)行長(zhǎng)寬比。這是寬度除以高度养晋。

3/ Layout Groups###

布局組充當(dāng)布局控制器衬吆，控制子布局元素的大小和位置。例如绳泉，水平布局組將其子元素放在一起，網(wǎng)格布局組將其子元素放在網(wǎng)格中姆泻。

布局組不控制自己的大小零酪。相反，它的功能是布局元素本身拇勃，可以由其他布局控制器控制或手動(dòng)設(shè)置四苇。

無論布局組的大小是多少，在大多數(shù)情況下，它都會(huì)根據(jù)所報(bào)告的最小、首選和靈活的大小為每個(gè)子布局元素分配適當(dāng)?shù)目臻g缀辩。布局組也可以這樣任意嵌套劲件。

Horizontal/Vertical Layout Group###

image

屬性：

• Padding：布局組邊緣內(nèi)的填充(留空作偏移)。
• Spacing：布局元素之間的間距棠涮。
• Child Alignment：如果子布局元素沒有填滿所有可用空間，則使用的對(duì)齊方式。
• Child Controls Size：布局組是否控制其子元素的寬度和高度妓肢。
• Child Force Expand：是否強(qiáng)迫孩子們擴(kuò)大空間以填補(bǔ)額外的可用空間。

水平布局組組件將其子布局元素并排放置在一起苫纤。它們的寬度由它們各自的最小寬度碉钠、首選寬度和靈活寬度根據(jù)以下模型確定：

將所有子布局元素的最小寬度添加到一起纲缓，并添加它們之間的間距。結(jié)果是水平布局組的mimimum寬度喊废。

所有子布局元素的首選寬度被添加到一起祝高，它們之間的間距也被添加。結(jié)果是水平布局組的首選寬度污筷。

如果水平布局組的寬度小于或等于最小值工闺，則所有子布局元素的寬度也都是最小值。

水平布局組越接近其首選寬度颓屑，每個(gè)子布局元素也就越接近其首選寬度斤寂。

如果水平布局組比其首選寬度更寬，則它將根據(jù)其各自的靈活寬度按比例將額外可用空間分配給子布局元素揪惦。

Grid Layout Group

image

屬性：

• Padding：布局組邊緣內(nèi)的填充(留空作偏移)遍搞。
• Cell Size：用于組中每個(gè)布局元素的大小。
• Spacing：布局元素之間的間距器腋。
• Child Alignment：如果子布局元素沒有填滿所有可用空間溪猿，則使用的對(duì)齊方式。
• Child Controls Size：布局組是否控制其子元素的寬度和高度纫塌。
• Child Force Expand：是否強(qiáng)迫孩子們擴(kuò)大空間以填補(bǔ)額外的可用空間诊县。
• Start Corner：第一個(gè)元素所在的角落。
• Start Axis：放置元素的主軸措左。在新行開始之前依痊，Horizonal將填充整個(gè)行。在開始新列之前怎披，Vertical將填充整個(gè)列凉逛。
• Child Alignment:如果布局元素沒有填滿所有可用空間毫胜，則對(duì)其進(jìn)行對(duì)齊。
• Constraint：將網(wǎng)格限制為固定數(shù)量的行或列，以幫助自動(dòng)布局系統(tǒng)秘蛔。

與其他布局組不同，網(wǎng)格布局組忽略所包含布局元素的最小芭概、首選和靈活大小屬性，而是為所有這些元素分配一個(gè)固定的大小触机，這個(gè)大小由網(wǎng)格布局組本身的單元格大小屬性定義氛濒。

在使用網(wǎng)格布局組作為自動(dòng)布局設(shè)置的一部分時(shí)鄙皇，需要注意一些特殊的注意事項(xiàng)漱竖，例如使用它與 Content Size Fitter一起使用玛界。

自動(dòng)布局系統(tǒng)獨(dú)立計(jì)算水平和垂直尺寸慎框。這可能與網(wǎng)格布局組（行數(shù)取決于列數(shù)洲敢，反之亦然）不一致刨秆。

對(duì)于任意數(shù)量的單元格尸执，行計(jì)數(shù)和列計(jì)數(shù)的不同組合可以使網(wǎng)格適合其內(nèi)容。為了幫助布局系統(tǒng)缓醋，可以使用Constraint屬性指定表的列或行數(shù)是固定的如失。

以下是使用布局系統(tǒng)與Content Size Fitter的一些建議：

1）寬度靈活，高度固定

要設(shè)置一個(gè)具有靈活寬度和固定高度的網(wǎng)格送粱，其中隨著添加更多元素褪贵，網(wǎng)格水平擴(kuò)展，您可以將這些屬性設(shè)置為：

• Grid Layout Group Constraint：Fixed Row Count固定行數(shù)
• Content Size Fitter Horizontal Fit：Preferred Size
• Content Size Fitter Vertical Fit： Preferred Size or Unconstrained

如果使用unconstrained Vertical Fit抗俄，則由您決定網(wǎng)格的高度是否足夠大脆丁，以適合指定的單元格行數(shù)。

2）固定的寬度和靈活的高度

要設(shè)置一個(gè)固定寬度和靈活高度的網(wǎng)格动雹，其中隨著添加更多元素槽卫，網(wǎng)格垂直展開，您可以將這些屬性設(shè)置為：

• Grid Layout Group Constraint: Fixed Column Count
• Content Size Fitter Horizontal Fit: Preferred Size or Unconstrained
• Content Size Fitter Vertical Fit: Preferred Size

如果使用unconstrained Horizonal Fit胰蝠，則由您決定網(wǎng)格的寬度是否足夠大歼培，以適合指定的單元格列計(jì)數(shù)。

3）靈活的寬度和高度

如果您想要一個(gè)同時(shí)具有靈活寬度和高度的網(wǎng)格茸塞，您可以這樣做躲庄，但是您無法控制特定的行數(shù)和列數(shù)。網(wǎng)格將嘗試使行和列的計(jì)數(shù)近似相同钾虐。您可以按照以下方式設(shè)置這些屬性：

• Grid Layout Group Constraint: Flexible
• Content Size Fitter Horizontal Fit: Preferred Size
• Content Size Fitter Vertical Fit: Preferred Size

驅(qū)動(dòng)Rect Transform屬性

由于自動(dòng)布局系統(tǒng)中的布局控制器可以自動(dòng)控制某些UI元素的大小和位置噪窘，所以這些大小和位置不應(yīng)該同時(shí)通過檢查器或場(chǎng)景視圖手動(dòng)編輯。無論如何效扫，這些更改后的值將由布局控制器在下一次布局計(jì)算中重置效览。

Rect Transform有一個(gè)driven properties(驅(qū)動(dòng)屬性)的概念來解決這個(gè)問題。例如荡短，將Horizontal Fit屬性設(shè)置為Minimum或Preferred的Content Size Fitter將驅(qū)動(dòng)同一游戲?qū)ο笊系腞ect Transform的寬度。寬度將顯示為只讀哆键，并且Rect Transform頂部的一個(gè)小信息框?qū)⑼ㄖ粋€(gè)或多個(gè)屬性由Conten Size Fitter驅(qū)動(dòng)掘托。

image

除了防止手工編輯之外，受驅(qū)動(dòng)的Rect Transform屬性還有其他原因籍嘹。布局可以通過改變游戲視圖的分辨率或大小來改變闪盔。這反過來又會(huì)改變布局元素的大小或位置弯院，從而改變驅(qū)動(dòng)屬性的值。但如果僅僅因?yàn)橛螒蛞晥D被調(diào)整了大小泪掀，場(chǎng)景就被標(biāo)記為有未保存的更改听绳，這是不可取的。為了防止這種情況發(fā)生异赫，驅(qū)動(dòng)屬性的值不會(huì)作為場(chǎng)景的一部分保存椅挣，對(duì)它們的更改不會(huì)將場(chǎng)景標(biāo)記為已更改。

技術(shù)細(xì)節(jié)

自動(dòng)布局系統(tǒng)內(nèi)置了某些組件塔拳，但也可以創(chuàng)建新的組件鼠证，以定制的方式控制布局。這是通過讓組件實(shí)現(xiàn)由自動(dòng)布局系統(tǒng)識(shí)別的特定接口來實(shí)現(xiàn)的靠抑。

界面布局

如果組件實(shí)現(xiàn)了接口ILayoutElement量九，則自動(dòng)布局系統(tǒng)將其視為布局元素。

如果組件實(shí)現(xiàn)了接口ILayoutGroup颂碧，那么它將驅(qū)動(dòng)其子組件的Rect Transform荠列。

如果組件實(shí)現(xiàn)了接口ILayoutSelfController，那么它應(yīng)該驅(qū)動(dòng)自己的RectTransform载城。

布局計(jì)算

自動(dòng)布局系統(tǒng)按照以下順序?qū)Σ季诌M(jìn)行評(píng)估和執(zhí)行：

通過在ILayoutElement組件上調(diào)用CalculateLayoutInputHorizontal()肌似、CalculateLayoutInputVertical()來計(jì)算布局元素的最小、優(yōu)先和靈活寬度个曙。這是按照自底向上的順序執(zhí)行的锈嫩，在此順序中，子女在其父母之前計(jì)算垦搬，以便父母可以在自己的計(jì)算中考慮子女的信息呼寸。

通過在ILayoutController組件上調(diào)用SetLayoutHorizontal()、SetLayoutVertical()來計(jì)算和設(shè)置布局元素的有效寬度猴贰。這是按照自頂向下的順序執(zhí)行的对雪，在這種順序中，子寬度的分配需要基于父級(jí)可用的全寬度米绕。在這一步之后瑟捣，布局元素的RectTransform有了新的寬度。（ILayoutGroup上層也是ILayoutController）

從上圖可以看出栅干，自動(dòng)布局系統(tǒng)首先對(duì)寬度進(jìn)行評(píng)估迈套，然后再對(duì)高度進(jìn)行評(píng)估。因此碱鳞，計(jì)算的高度可能取決于寬度桑李，但計(jì)算的寬度永遠(yuǎn)不可能取決于高度。

觸發(fā)布局重建

當(dāng)組件上的屬性發(fā)生變化，導(dǎo)致當(dāng)前布局不再有效時(shí)贵白，需要重新計(jì)算布局率拒。這可以通過調(diào)用：

LayoutRebuilder.MarkLayoutForRebuild(轉(zhuǎn)換為RectTransform);

重建不會(huì)立即發(fā)生，但是在當(dāng)前幀的末尾禁荒，在呈現(xiàn)發(fā)生之前猬膨。它不是即時(shí)的原因是，這可能會(huì)導(dǎo)致在同一幀中多次重新構(gòu)建布局呛伴，這將不利于性能勃痴。

何時(shí)應(yīng)該觸發(fā)重建的指導(dǎo)方針：

• 在可更改布局的屬性的setter中。
• 在這些回調(diào)函數(shù)：
• OnEnable
• OnDisable
• OnRectTransformDimensionsChange
• OnValidate(只在編輯器中需要磷蜀，在運(yùn)行時(shí)不需要)
• OnDidApplyAnimationProperties