【Unity】UGUI聊天消息气泡 随文本内容自适应

时间:2021-04-19 23:36:02

游戏中需要用做UGUI做聊天界面。其中聊天气泡ChatItem的UI要求能随着聊天内容文本的长度自适应的。

网上搜了一下聊天气泡的UI,发现都不太符合咱的需求,具体来说是文本宽度不足一行时,文本宽度自增;文本宽度大于一行时,文本高度自增。效果如下图:

【Unity】UGUI聊天消息气泡 随文本内容自适应

实现方法:

1、(UGUI)Scroll View/Viewport/Content是挂气泡Item的节点,给它添加Content Size Fitter和Vertical Layout Group组件,注意设置Vertical Fit为Preferred Size。

【Unity】UGUI聊天消息气泡 随文本内容自适应

2、气泡Item预制体(或者Sample游戏物体)结构如下,给它添加上Layout Element组件,并勾上Preferred Height。

【Unity】UGUI聊天消息气泡 随文本内容自适应

【Unity】UGUI聊天消息气泡 随文本内容自适应

3、由于气泡Item中的消息文本Text会动态变宽变高,也要给它加上Content Size Fitter组件。刚开始输入文本时,文本宽度不足一行,所以默认是设置宽度优先的。

【Unity】UGUI聊天消息气泡 随文本内容自适应

【Unity】UGUI聊天消息气泡 随文本内容自适应

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;来获取!


重要参考:

【Unity】UGUI聊天消息气泡 随文本内容自适应