【Unity】UGUI聊天消息氣泡 隨文本內容自適應


游戲中需要用做UGUI做聊天界面。其中聊天氣泡ChatItem的UI要求能隨着聊天內容文本的長度自適應的。

網上搜了一下聊天氣泡的UI,發現都不太符合咱的需求,具體來說是文本寬度不足一行時,文本寬度自增;文本寬度大於一行時,文本高度自增。效果如下圖:

實現方法:

1、(UGUI)Scroll View/Viewport/Content是掛氣泡Item的節點,給它添加Content Size Fitter和Vertical Layout Group組件,注意設置Vertical Fit為Preferred Size。

2、氣泡Item預制體(或者Sample游戲物體)結構如下,給它添加上Layout Element組件,並勾上Preferred Height。

3、由於氣泡Item中的消息文本Text會動態變寬變高,也要給它加上Content Size Fitter組件。剛開始輸入文本時,文本寬度不足一行,所以默認是設置寬度優先的。

4、接下來的操作是重點,也是其他博客沒有提及的點。上面文本Text對象的Content Size Fitter組件設置是當消息內容不足一行的寬度時的情況(也就是剛開始輸入文本時的狀態),此時是水平Preferred Size,垂直Unconstrained。當消息內容大於一行寬度時,需要在腳本中動態修改為水平Unconstrained,垂直Preferred Size!!!

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

在Content物體同時掛Vertical Layout Group和Content Size Fitter組件后,就不需手動計算子物體UI增加的高度了,Content下面的子物體高度會自動計算並調整。

注意,在Content Size Fitter組件的控制下,UI的寬高不能通過物體UI自身的RectTransform獲得,要用gameObject.GetComponent<Text>().preferredHeight;來獲取!

 


 

重要參考:

 

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM