NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框
NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框
写在前面:
本文将使用 Vertical Scroll Bar ,创建一个聊天界面,如下图所示:
欢迎大家纠错、拍砖!原创很辛苦,如有转载,请注明出处。
Scroll Bar -- 滚动条
滚动条这个东西,跟基本控件有点区别。它是控制其他控件的,所以要配合其他控件,才能正常工作。
■ 创建滚动条
在NGUI 3.5中,创建控件都可以通过【搜索】,然后【拖拽】实现(也是NGUI推荐的方法)。
(1)在Project面板中,【搜索】“Control”,也就是搜索控件。之后,会发现NGUI的一堆控件。
(2)找到“ Control - Simple Vertical Scroll Bar ”,也就是垂直滚动条,【拖拽】到层级面板下面。我这里把它直接拖拽到UI Root下面了(不知道怎么创建UI Root 的同学请看前面的教程)。
■ 控件详解:
在检视面板中,可以看到,Vertical Scroll Bar 默认有5个组件:
(1)Transform 作为Unity最基本的组件,这里不再做解释。
(2)UIScript (Script) 是NGUI默认挂载在Scroll上的脚本,主要是指定图集(Atlas)、深度、控件大小等操作。
(3)UIButton(Script) 是NGUI默认挂载在Scroll上的脚本,关联按钮状态。比如普通(Normal)、悬停(也称徘徊、经过,Hover)、按下(Pressed)、禁用(Disabled)。
(4)Box Collider 是默认挂在按钮上的一个盒碰撞器。其作用是使Button控件具有碰撞属性。NGUI中事件的触发都需要对象具有碰撞属性。
(5)UIScroll Bar(Script) 是NGUI默认挂载在Scroll上的脚本,关联滚动条状态。Scroll Bar 脚本参数如下:
---- Value(0-1)为0时,滑块在上面;为1时,滑块在下面
---- Size (0-1) 为0时,滑块最小;为1时,滑块最大
---- Alpha(0-1)为0时,滚动条全透明;为1时,滚动条不透明
控件的综合运用:利用 Scroll Bar 搭建聊天界面
■(一)创建控件
一般的聊天界面,都有如下几个基本元素:
1,信息显示区域。用NGUI控件:Control - Simple Text Box
2,滚动条。用NGUI控件:Control - Simple Vertical Scroll Bar
3,输入框。用NGUI控件:Control - Simple Input Field
4,发送按钮。用NGUI控件:Control - Simple Button
这些控件都可以使用【搜索】--【拖拽】的方式创建。创建之后如下:
*附注:在实际项目中,应该改名,并断开预制连接。这里为了方便大家阅读,没有改名。
■(二)设置控件
1,在信息显示区域控件 Control - Simple Text Box 里,加入Text List脚本组件:(点击Add component,然后搜索Text List)
之后,删除 UIInput 组件(否则该面板可以产生输入,并且无法使用字体变色)。
------------------------------------------------------------------
在选中Control - Simple Text Box 的状态下,然后:
把 Control - Simple Text Box 的子物体Label,重命名为Show_info,然后拖拽给 Text Label属性。
把 Control - Simple Vertical Scroll Bar,拖拽给 Scroll Bar属性。
更改Style属性为Chat。
更改Paragraph History(历史信息数量)为20。
2,在信息输入控件 Control - Simple Input Field 里,加入Chat Input脚本组件:(点击Add component,然后搜索chat)
选中Control - Simple Input Field,把 Control - Simple Text Box 拖拽给Text List属性。
3,创建Send_Btn.cs脚本文件,并将其拖拽到 Control - Simple Button上。
![](https://code.csdn.net/assets/CODE_ico.png)
- using UnityEngine;
- using System.Collections;
- public class Send_Btn : MonoBehaviour {
- public UITextList textList;
- // Use this for initialization
- void Start () {
- }
- // Update is called once per frame
- void Update () {
- if (Input.GetKeyDown (KeyCode.Return)) {
- this.OnClick();
- }
- }
- void OnClick() {
- GameObject input_Label = GameObject.Find ("Input_Label");
- string text_str = "[8bddfc]Some say:[-] " + input_Label.GetComponent<UILabel> ().text;
- textList.Add(text_str);
- }
- }
选中Control - Simple Button,把Control - Simple Text Box拖拽给Text List属性。
把Control - Simple Input Field 的子物体Label,重命名为 Input_Label,以便Send_Btn.cs脚本里可以Find 到。
然后,运行,输入点文字,试试效果吧!
NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框相关推荐
- JavaFX UI控件教程(十)之Scroll Bar
翻译自 Scroll Bar 本章介绍如何使用滚动条控件创建可滚动窗格. 本ScrollBar类可以在应用程序中创建滚动窗格和意见.图9-1显示了滚动条的三个区域:拇指,右侧和左侧按钮(或向下和向 ...
- Div Scroll Bar (用层模拟滚动条)
对Div的盒模型以及Css控制定位都不熟,所以遇到了不少BT问题--好在最终突破了种种困难,基本实现了自己想要的效果. 说明: 最大的突破是通过了 xhtml1-transitional.dtd 验证 ...
- NGUI全面实践教程(大学霸内部资料)
NGUI全面实践教程(大学霸内部资料) 试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国内N ...
- Selenium - IWebDriver 控制scroll bar到底部
有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户是否阅读的标准是:滚动条是否拉 ...
- java 滚动条的事件_[Java教程]jquery如何判断滚动条滚到页面底部并执行事件
[Java教程]jquery如何判断滚动条滚到页面底部并执行事件 0 2016-04-27 10:00:13 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素, ...
- java滚动条下拉_[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载
[Java教程]相对漂亮的滚动条slimscroll可以实现下拉加载 0 2016-03-23 16:00:05 在之前的开发中遇到过下拉加载想要漂亮点的滚动条,但是最初引入的mCustomScrol ...
- 【分享送书】NGUI全面实践教程V3.8.2 活动开始了!!
[分享送书]NGUI全面实践教程V3.8.2 活动开始了!! 活动奖品: 活动地址:http://dwz.cn/JHdlu
- html select滚动轴,javascript - html select scroll bar - Stack Overflow
how do you add a scroll bar to the html select box? is there any javascript library that emulate thi ...
- MongoDB 教程八(结语): 一网打尽当下NoSQL类型、适用场景及使用公司
在过去几年,关系型数据库一直是数据持久化的唯一选择,数据工作者考虑的也只是在这 些传统数据库中做筛选,比如SQL Server.Oracle或者是MySQL.甚至是做一些默认的选择,比如使用.NET的 ...
最新文章
- java ef 引用问题_配置使用EF常见的一些问题及解决方案
- 图森未来完成2.15亿美元D轮融资,将拓展无人驾驶运输服务
- 目标定位--Deep Self-Taught Learning for Weakly Supervised Object Localization
- Replication--镜像+复制
- 专访盖茨:我的梦想是实现生命价值平等[转]
- 相对于oracle数据库的作用 类似于,郑州大学软件技术学院Oracle试卷
- 八类网线和七类网线的区别_什么是七类网线?七类网线水晶头如何制作?
- wordpress数据库表详解
- python,时间加减,时间计算,时间格式化,时间提取汇总
- table固定表头滚动
- 经典面试题(28):以下代码将输出的结果是什么?
- 30G 超大数据文件,如何用一周时间导入生产数据库?
- python实战1.1——根据1.0做词云图
- h710阵列卡支持最大硬盘_ORICO推爆品五盘位硬盘柜,一拖五最大支持80TB,你会买吗?...
- webgate 重构 工作进度计划
- 2.3、IPMP,PMP,PRINCE2
- ai语音系统智能AI机器人AI源码营销机器人电销机器人智能电话机器人拨号机器人语音机器人空号识别科大识别阿里识别语音识别语音翻译FreeSWITCH呼叫中心中间ipbxIPBX
- 远程服务器638,638是什么意思
- JS数据结构与算法-队列结构
- 运维学python用不上_作为运维你还在想要不要学Python,看完这篇文章再说!