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

 

 

重要参考：

 

 

　　

posted @ 2018-09-07 16:27  霍莉雪特  阅读(10046)  评论(1)  编辑  收藏  举报