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

博客迁移

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

聊天系统中的UGUI布局

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

UGUI之布局实战——聊天系统_第2张图片

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

先简单分析一下:
这里分为三个预制件:
(1)整个对话框作为一个预制件a
(2)玩家自己的气泡作为一个预制件b
(3)其余玩家的气泡作为一个预制件c
然后预制件a对气泡用了垂直布局;预制件b和c做法类似,大小一致;预制件b和c中的气泡背景图片要随着文字内容变化而自动缩放,因此背景图片身上挂上一个Vertical Layout Group组件和Content Size Fitter组件,相关设置如下:
UGUI之布局实战——聊天系统_第3张图片
然后将文字内容物体作为背景图片的子物体,并添加组件Content Size Fitter
相关设置如下:
UGUI之布局实战——聊天系统_第4张图片

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

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

然后聊天框还支持滚动翻阅浏览前面的聊天记录,因此还需要Scroll Rect、Mask等组件
UGUI之布局实战——聊天系统_第5张图片

UGUI之布局实战——聊天系统_第6张图片

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

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

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


更新:
Demo示意图如下:
UGUI之布局实战——聊天系统_第7张图片

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

UGUI之布局实战——聊天系统_第8张图片

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

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

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

你可能感兴趣的:(UGUI)