一、原文链接：

原文链接：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上。

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 到。

然后，运行，输入点文字，试试效果吧！

版权属于：东哥笔记

本文链接：https://ddceo.com/blog/300.html

自2017年12月26日起，『转载以及大段采集进行后续编辑』须注明本文标题和链接！否则禁止所有转载和采集行为！