UGUI之布局实战——聊天系统
来源:互联网 发布:李强强 linux 编辑:程序博客网 时间:2024/06/05 12:41
聊天系统中的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,工程所用美术资源非本人原创,请不要商用,仅限学习使用,如因此出现版权问题,与本人无关。
以上知识分享,如有错误,欢迎指出,共同学习,共同进步。
- UGUI之布局实战——聊天系统
- Unity——UGUI之界面布局
- 聊天系统实战记录
- 微信小程序开发—项目实战之聊天机器人
- 微信小程序开发—项目实战之聊天机器人
- UGUI研究院之LayoutGroup布局
- [Unity实战]结合UGUI制作技能系统
- Unity3D——UGUI实现背包系统
- UGUI技术之LayoutGroup布局实现详解
- UGUI布局
- 【UGUI】UGUI 常用布局组件
- UGUI系统学习之Text控件
- UGUI--背包系统之二--------Inventory
- UGUI--背包系统之三--------Slot
- UGUI--背包系统之四--------Item
- UGUI--背包系统之五--------Tootip
- 程序动态设置实现——UGUI事件系统
- Unity3D自学笔记——UGUI系统介绍
- Disruptor使用入门
- redis-infq——将infQ集成到redis
- Ubuntu安装caffe指南(cpu only)
- ImageMagick使用for java(im4java)
- Xcode8.1 安装插件后进行编辑会崩溃的解决办法
- UGUI之布局实战——聊天系统
- 坐标系转换
- 解决mac中Lauchpad图标重复
- EXP-00003: 未找到段 (0,0) 的存储定义
- 省市县自关联表的数据封装
- 基于retrofit的网络框架的终极封装(一):第一层(参数组装层)的API设计
- XGBoost解决多分类问题
- 内存抖动和内存泄漏
- Netty websocket server压力测试