NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/38387051

写在前面:

本文将使用 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上。

[csharp] view plaincopy

  1. using UnityEngine;
  2. using System.Collections;
  3. public class Send_Btn : MonoBehaviour {
  4. public UITextList textList;
  5. // Use this for initialization
  6. void Start () {
  7. }
  8. // Update is called once per frame
  9. void Update () {
  10. if (Input.GetKeyDown (KeyCode.Return)) {
  11. this.OnClick();
  12. }
  13. }
  14. void OnClick() {
  15. GameObject input_Label = GameObject.Find ("Input_Label");
  16. string text_str = "[8bddfc]Some say:[-] " + input_Label.GetComponent<UILabel> ().text;
  17. textList.Add(text_str);
  18. }
  19. }

选中Control - Simple Button,把Control - Simple Text Box拖拽给Text List属性。

把Control - Simple Input Field 的子物体Label,重命名为 Input_Label,以便Send_Btn.cs脚本里可以Find 到。

然后,运行,输入点文字,试试效果吧!

时间: 2024-11-05 16:39:49

NGUI 3.5教程(八)Scroll Bar 滚动条-制作聊天框的相关文章

VS2010-MFC(常用控件:滚动条控件Scroll Bar)

转自:http://www.jizhuomi.com/software/191.html 滚动条控件简介 滚动条大家也很熟悉了,Windows窗口中很多都有滚动条.前面讲的列表框和组合框设置了相应属性后,如果列表项显示不下也会出现滚动条.滚动条分为水平滚动条(Horizontal Scroll Bar)和垂直滚动条(Vertical Scroll Bar)两种.滚动条中有一个滚动块,用于标识滚动条当前滚动的位置.我们可以拖动滚动块,也可以用鼠标点击滚动条某一位置使滚动块移动. 从滚动条的创建形式

NGUI的textlist和Scroll bar的设计

用个纯粹的例子讲述一下: 首先建立一个Label,然后给他加个Textlist的脚本.这次不是右键点击加了,在图中右下角有个添加方式,然后找到Textlist添加上. 然后看到里面的属性,Text label和Scroll bar这两个是重点.把刚才建立的Label拖过去,然后建立一个Scroll bar 也拖过去. 下面说一下Scroll bar 如何建立. 建立一个sprite,命名为bg给他加上BOX COllider然后加个SCroll Bar Script如图:然后再建立一个sprit

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例

[Unity3D]事半功倍:界面插件NGUI的使用教程与实例 原文地址:http://www.tasharen.com/?page_id=185 NGUI下载地址:点我传送 NGUI教程:步骤1-Scene 1.创建一个新的场景(New Scene).2.选择并删除场景里的MainCamera.3.在NGUI菜单下选择Create a New UI,会打开UI创建向导. 4.在创建向导中你能更改UI的基本参数.现在我们选Default layer,点击Create Your UI 按钮.5.就这

NGUI全面实践教程(大学霸内部资料)

NGUI全面实践教程(大学霸内部资料)   试读文档下载地址:链接:http://pan.baidu.com/s/1jGosC9g 密码:8jq5 介绍:NGUI全面实践教程(大学霸内部资料)本书是国内NGUI最新教程,以全新的3.8.0为基础,讲解NGUI的使用.内容不仅全面该函NGUI的各个组件,还详细讲解各项高级功能,以及自带工具. 目  录 第1章  学习NGUI前的准备 1 1.1  NGUI的购买/下载和导入 1 1.1.1  找到并了解NGUI的相关信息 1 1.1.2  导入NG

scroll bar与document 宽度与js的关系

一个重要的细节 首先从浏览器模式来说 如果document有responsive meta,在普通模式下 scroll bar是附加在文档的最左边 而在device mode下 scroll bar 是漂浮在文档上面的 不获知这点,接下来便无从谈起 ---------------------------------------------------- 1.对window来说 只有innerWidth和outterWidth,没有width属性,没有offsetWidth属性 其中innerWi

Selenium - IWebDriver 控制scroll bar到底部

有时候我们需要控制页面滚动条上的滚动条,但滚动条并非页面上的元素,这个时候就需要借助js是来进行操作.一般用到操作滚动条的会两个场景: 注册时的法律条文需要阅读,判断用户是否阅读的标准是:滚动条是否拉到最下方.    要操作的页面元素不在吸视范围,无法进行操作,需要拖动滚动条 其实,实现这个功能只要一行代码,但由于不懂js ,所以花了不小力气找到这种方法. 用于标识滚动条位置的代码 <body onload= "document.body.scrollTop=0 "> &l

[Selenium]Turn Page By Scroll Bar

Description: Need to turn page by operating scroll bar and find out the element in the current page. Previous page will not exist in DOM structure when turning page. Solution: Get the total height, button height, scroll bar height Calculate total mov

Laravel教程 八:queryScope 和 setAttribute

Laravel教程 八:queryScope 和 setAttribute 此文章为原创文章,未经同意,禁止转载. Laravel Eloquent Database 直接就是按照上一节所说的那样,我们来说说queryScope和setAttribute在laravel的用法. 关于应用场景 这里我首先是想向大家简单说说这两个知识点得应用场景是什么,我们在开发的时候,总是希望有一种偷懒的方式,所以考虑以下这两个场景: 数据在存入数据库的时候需要进行预先处理,比如考虑一个简单地例子:我们在保存用户

NGUI 3.5教程(三)Button 按钮

向原创致敬http://blog.csdn.net/chenggong2dm/article/details/25504611 写在前面:     本文将创建一个基本的Button.并且编写脚本,响应点击事件. 欢迎大家纠错.拍砖!原创很辛苦,如有转载,请注明出处. Button -- 按钮 在NGUI 3.5 里,Button这个控件,经过了整理.比如更改了创建方式(搜索.拖拽):比如合并了 2.x里的Button和Image Button.个人觉得这样是合理的,wxPython的Button