Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5534788
  • 博文数量: 763
  • 博客积分: 12108
  • 博客等级: 上将
  • 技术积分: 15717
  • 用 户 组: 普通用户
  • 注册时间: 2007-09-28 21:21
个人简介

业精于勤,荒于嬉

文章分类

全部博文(763)

文章存档

2018年(6)

2017年(15)

2016年(2)

2015年(31)

2014年(14)

2013年(87)

2012年(75)

2011年(94)

2010年(190)

2009年(38)

2008年(183)

2007年(28)

分类: iOS平台

2015-09-01 10:55:57

写在前面:    

    本文将使用 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在CODE上查看代码片派生到我的代码片
  1. using UnityEngine;  
  2. using System.Collections;  
  3.   
  4. public class Send_Btn : MonoBehaviour {  
  5.     public UITextList textList;  
  6.   
  7.     // Use this for initialization  
  8.     void Start () {  
  9.       
  10.     }  
  11.       
  12.     // Update is called once per frame  
  13.     void Update () {  
  14.         if (Input.GetKeyDown (KeyCode.Return)) {  
  15.             this.OnClick();   
  16.         }   
  17.     }  
  18.   
  19.     void OnClick() {  
  20.         GameObject input_Label = GameObject.Find ("Input_Label");  
  21.         string text_str = "[8bddfc]Some say:[-] " + input_Label.GetComponent<UILabel> ().text;   
  22.         textList.Add(text_str);   
  23.     }  
  24. }  


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

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


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



阅读(1432) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~