游戲中需要用做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;來獲取!
重要參考:
- https://answers.unity.com/questions/1142728/cant-get-width-height-of-content-size-fitter-rectt.html
- https://forum.unity.com/threads/c-grid-layout-group-cells-have-another-sizes.445509