首先，我們介紹內(nèi)容大小適配器 (Content Size Fitter)組件。

我們新建一個(gè)“SampleScene6.unity”場景，然后添加一個(gè)Text UI元素，讓其居中顯示，并且尺寸設(shè)置為50*30。

?

由于我們設(shè)置Text的尺寸在水平方向上面太小，也就是Width值太小，里面的內(nèi)容“New Text”無法全部顯示。當(dāng)然，我們可以增加Width值來解決這個(gè)問題。這樣會(huì)帶來一個(gè)新的問題，當(dāng)我們不知道文本內(nèi)容有多長的時(shí)候，我們?nèi)绾卧O(shè)置這個(gè)Width數(shù)值呢？顯然，最好的方式就是Text按照自身的內(nèi)容來自動(dòng)調(diào)整Width值。這就是我們要介紹的內(nèi)容大小適配器 (Content Size Fitter)組件，接下來，我們就給Text添加這個(gè)組件。

Content Size Fitter 組件主要是用來設(shè)置UI元素的長寬。該組件只有兩個(gè)屬性，分別是Horizontal Fit和Vertical Fit，他們分別是從分別從“水平”和“垂直”兩個(gè)方向來控制UI元素的寬和高，有三個(gè)值可選：

Unconstrained：手動(dòng)修改UI元素長寬的值，這是默認(rèn)值。

MinSize：根據(jù)UI元素的最小值來調(diào)整，不能手動(dòng)修改長寬的值。

PreferredSize：根據(jù)UI元素的內(nèi)容來調(diào)整，不能手動(dòng)修改長寬的值。

非常明顯，這里的PreferredSize正好就能解決我們上面的問題。因此，我們將Horizontal Fit設(shè)置為PreferredSize。如下所示

?

修改完畢后，Text里面的內(nèi)容就顯示完整了。

接下來，我們來介紹寬高比適配器 (Aspect Ratio Fitter)組件，該組件也是用來控制UI元素的長和寬。接下來，我們繼續(xù)創(chuàng)建一個(gè)Text2 UI元素，設(shè)置它的尺寸為160*30，然后為其添加Aspect Ratio Fitter組件，如下所示

?

該組件下?lián)碛幸粋€(gè)Aspect Mode 縱橫比模式的屬性，默認(rèn)為None，其他值為：

None??????????????????????????? 不使用適合寬高比。

Width Controls Height?? 寬度控制高度，也就是高度會(huì)根據(jù)寬度自動(dòng)調(diào)整。

Height Controls Width?? 高度控制寬度，也就是寬度根據(jù)高度自動(dòng)調(diào)整。

Fit In Parent? ? ? ? ? ? ? ? ? ?適應(yīng)父對象寬度和高度。

Envelope Parent??????????? 覆蓋父對象寬度和高度。

當(dāng)我們選擇其中一項(xiàng)（不是None）的時(shí)候，就會(huì)增加Aspect Ratio寬高比的屬性。

很明顯，這個(gè)就是寬高比率值。如果我們選擇的是Width Controls Height的話，高度會(huì)根據(jù)寬度自動(dòng)調(diào)整，調(diào)整的參數(shù)就是 高度 = 寬度 / Aspect Ratio (5.333333)。我們初始化Text的寬度為160，那么高度就應(yīng)該是 160 / 5.333333 = 30（正好對應(yīng)初始化高度值）。那么，我們就修改這個(gè)Aspect Ratio 為 2.0 試試，那么推算Text的高度應(yīng)該變成 80

?

很明顯，Text的高度已經(jīng)改變了。關(guān)于Fit In Parent和Envelope Parent 兩個(gè)的區(qū)別，我們也說明一下吧。當(dāng)然，這個(gè)需要為我們的Text添加一個(gè)父類UI元素。例如，我們首先添加一個(gè)Panel的父類UI對象，設(shè)置它的尺寸為200*100，然后添加子對象Text3（默認(rèn)160*30）。

我們將Text3的軸心放置到左上角，然后錨點(diǎn)也設(shè)置到左上角，然后設(shè)置PosX和PosY的值為零，那么Text3就會(huì)被放置到父類Panel的左上角位置。

?

?

接下來，我們就給Text3添加Aspect Ratio Fitter組件。然后我們將Aspect Mode修改為Fit In Parent，同時(shí)將Aspect Ratio值修改為1，也就是讓寬和高一樣。如下所示

那么顯示的效果如下

我們父類Panel的尺寸為200*100，并且Text3的寬高比為1。如果要讓Text3根據(jù)1:1?的比率來適應(yīng)父類Panel的話，那么Text3的尺寸應(yīng)該有兩種可能，一個(gè)是200*200，另一個(gè)是100*100。很明顯Fit In Parent就是100*100，也就是Text3會(huì)適應(yīng)父類Panel，但不會(huì)超出父類Panel的區(qū)域。如果我們將Aspect Mode修改為Envelope Parent的話，如下所示

很明顯，Text3的尺寸就是200*200，也就是從高度上來講，它將超出父類Panel的區(qū)域。

這就是Fit In Parent和Envelope Parent的區(qū)別。

本課程涉及的內(nèi)容已經(jīng)共享到百度網(wǎng)盤：https://pan.baidu.com/s/1e1jClK3MnN66GlxBmqoJWA?pwd=b2id文章來源地址http://www.zghlxwxcb.cn/news/detail-442149.html

到了這里，關(guān)于第四十九章 Unity UI適配器組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！