UGUI之布局实战——聊天系统

博客迁移

个人博客站点，欢迎访问，www.jiingfengji.tech

聊天系统中的UGUI布局

常用的聊天系统内容包括以下几点：
1、发言内容；
2、发言人头像
3、发言人名称
4、语言聊天（本文不考虑该功能，与布局无关）
5、表情（本文暂不考虑该功能，后续补充）
（4.1）表情与文字混排，比如：PC端的QQ聊天
（4.2）表情与文字分开，比如：移动端的QQ
6、聊天模式：文本模式、气泡模式
（5.1）文本模式：参与聊天的所有人均在左边
（5.2）气泡模式：自己的气泡在左边，其余玩家的气泡在右边，如下图：

这里以气泡模式为例进行讲解：
先上类似效果图：

先简单分析一下：
这里分为三个预制件：
（1）整个对话框作为一个预制件a
（2）玩家自己的气泡作为一个预制件b
（3）其余玩家的气泡作为一个预制件c
然后预制件a对气泡用了垂直布局；预制件b和c做法类似，大小一致；预制件b和c中的气泡背景图片要随着文字内容变化而自动缩放，因此背景图片身上挂上一个Vertical Layout Group组件和Content Size Fitter组件，相关设置如下：

然后将文字内容物体作为背景图片的子物体，并添加组件Content Size Fitter
相关设置如下：

预制件b和c还有一点区别就是b（玩家自己）的Pivot为（1,1），预制件c（其他玩家）的Pivot为（0,1）

这样描述可能不太好理解，最后会直接给大家提供一个工程下载地址。

然后聊天框还支持滚动翻阅浏览前面的聊天记录，因此还需要Scroll Rect、Mask等组件

由于聊天窗口下方几个按钮和输入框不是布局的重点，这里就不做介绍，如有需要，后续给大家提供一个工程下载地址。

那么，布局实战——聊天系统就介绍到这里。

以上知识分享，如有错误，欢迎指出，共同学习，共同进步。

---

更新：
Demo示意图如下：

此时图中是空的聊天窗口，每发送或者收到一条聊天记录，只需要生成一个相应 的预制件并作为Content的子物体

关于聊天系统的布局呢，根据设计不同布局也就不同，这里是将我工作中的一个聊天系统讲解给大家，具体详情如有兴趣欢迎点击链接：http://pan.baidu.com/s/1hrMxwf6 密码：6bss 下载工程

我用的unity版本是5.3.7，工程所用美术资源非本人原创，请不要商用，仅限学习使用，如因此出现版权问题，与本人无关。

以上知识分享，如有错误，欢迎指出，共同学习，共同进步。