游戲中需要用做UGUI做聊天界面。其中聊天氣泡ChatItem的UI要求能隨著聊天內(nèi)容文本的長(zhǎng)度自適應(yīng)的。

網(wǎng)上搜了一下聊天氣泡的UI，發(fā)現(xiàn)都不太符合咱的需求，具體來(lái)說(shuō)是文本寬度不足一行時(shí)，文本寬度自增；文本寬度大于一行時(shí)，文本高度自增。效果如下圖：

實(shí)現(xiàn)方法：

1、（UGUI）Scroll View/Viewport/Content是掛氣泡Item的節(jié)點(diǎn)，給它添加Content Size Fitter和Vertical Layout Group組件，注意設(shè)置Vertical Fit為Preferred Size。

2、氣泡Item預(yù)制體（或者Sample游戲物體）結(jié)構(gòu)如下，給它添加上Layout Element組件，并勾上Preferred Height。

3、由于氣泡Item中的消息文本Text會(huì)動(dòng)態(tài)變寬變高，也要給它加上Content Size Fitter組件。剛開(kāi)始輸入文本時(shí)，文本寬度不足一行，所以默認(rèn)是設(shè)置寬度優(yōu)先的。

4、接下來(lái)的操作是重點(diǎn)，也是其他博客沒(méi)有提及的點(diǎn)。上面文本Text對(duì)象的Content Size Fitter組件設(shè)置是當(dāng)消息內(nèi)容不足一行的寬度時(shí)的情況（也就是剛開(kāi)始輸入文本時(shí)的狀態(tài)），此時(shí)是水平Preferred Size，垂直Unconstrained。當(dāng)消息內(nèi)容大于一行寬度時(shí)，需要在腳本中動(dòng)態(tài)修改為水平Unconstrained，垂直P(pán)referred Size?。。?/p>

float curTextWidth = textObj.GetComponent<Text>().preferredWidth;
if (curTextWidth >= chatItemTextMaxWidth)
{
    // Text控件的Content Size Fitter由水平Preferred Size改為垂直P(pán)referred Size
    textObj.GetComponent<ContentSizeFitter>().horizontalFit = ContentSizeFitter.FitMode.Unconstrained;
    textObj.GetComponent<ContentSizeFitter>().verticalFit = ContentSizeFitter.FitMode.PreferredSize;
}

在Content物體同時(shí)掛Vertical Layout Group和Content Size Fitter組件后，就不需手動(dòng)計(jì)算子物體UI增加的高度了，Content下面的子物體高度會(huì)自動(dòng)計(jì)算并調(diào)整。

注意，在Content Size Fitter組件的控制下，UI的寬高不能通過(guò)物體UI自身的RectTransform獲得，要用gameObject.GetComponent<Text>().preferredHeight;來(lái)獲??！

重要參考：

• https://answers./questions/1142728/cant-get-width-height-of-content-size-fitter-rectt.html
• https://forum./threads/c-grid-layout-group-cells-have-another-sizes.445509