一、原文链接:

原文链接:http://blog.csdn.net/chenggong2dm/article/details/38387051

写在前面:    

<p>
    本文将使用 Vertical Scroll Bar ,创建一个聊天界面,如下图所示,欢迎大家纠错、拍砖!原创很辛苦,如有转载,请注明出处。
</p>
<h2>
    Scroll Bar -- 滚动条
</h2>
<p>
    滚动条这个东西,跟基本控件有点区别。它是控制其他控件的,所以要配合其他控件,才能正常工作。
</p>
<h3>
    ■ 创建滚动条
</h3>
<p>
    在NGUI 3.5中,创建控件都可以通过【搜索】,然后【拖拽】实现(也是NGUI推荐的方法)。
</p>
<p>
    (1)在Project面板中,【搜索】“Control”,也就是搜索控件。之后,会发现NGUI的一堆控件。
</p>
<p>
    (2)找到“ Control - Simple Vertical Scroll Bar ”,也就是垂直滚动条,【拖拽】到层级面板下面。我这里把它直接拖拽到UI Root下面了(不知道怎么创建UI Root 的同学请看前面的教程)。
</p>
<h3>
    ■ 控件详解:
</h3>
<p>
    在检视面板中,可以看到,Vertical Scroll Bar 默认有5个组件:
</p>
<p>
    (1)Transform 作为Unity最基本的组件,这里不再做解释。
</p>
<p>
    (2)UIScript (Script) 是NGUI默认挂载在Scroll上的脚本,主要是指定图集(Atlas)、深度、控件大小等操作。
</p>
<p>
    (3)UIButton(Script) 是NGUI默认挂载在Scroll上的脚本,关联按钮状态。比如普通(Normal)、悬停(也称徘徊、经过,Hover)、按下(Pressed)、禁用(Disabled)。 &nbsp;
</p>
<p>
    (4)Box Collider 是默认挂在按钮上的一个盒碰撞器。其作用是使Button控件具有碰撞属性。NGUI中事件的触发都需要对象具有碰撞属性。
</p>
<p>
    (5)UIScroll Bar(Script) 是NGUI默认挂载在Scroll上的脚本,关联滚动条状态。Scroll Bar 脚本参数如下:
</p>
<p>
    &nbsp; &nbsp;---- Value(0-1)为0时,滑块在上面;为1时,滑块在下面
</p>
<p>
    &nbsp; &nbsp;---- &nbsp;Size (0-1) 为0时,滑块最小;为1时,滑块最大
</p>
<p>
    &nbsp; &nbsp;---- &nbsp;Alpha(0-1)为0时,滚动条全透明;为1时,滚动条不透明
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/8bbb1465628662.jpeg" id="ematt:798"><img src="http://www.hudongdong.com/content/uploadfile/201606/8bbb1465628662.jpeg" title="点击查看原图" alt="20140805182033671.jpeg" border="0" width="407" height="444" /></a>
</p>
<p>
    控件的综合运用:利用 Scroll Bar 搭建聊天界面
</p>
<h2>
    ■(一)创建控件
</h2>
<p>
    一般的聊天界面,都有如下几个基本元素:
</p>
<p>
    1,信息显示区域。用NGUI控件:Control - Simple Text Box
</p>
<p>
    2,滚动条。用NGUI控件:Control - Simple Vertical Scroll Bar
</p>
<p>
    3,输入框。用NGUI控件:Control - Simple Input Field
</p>
<p>
    4,发送按钮。用NGUI控件:Control - Simple Button
</p>
<p>
    这些控件都可以使用【搜索】--【拖拽】的方式创建。创建之后如下:
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/078a1465628660.jpeg" id="ematt:792"><img src="http://www.hudongdong.com/content/uploadfile/201606/078a1465628660.jpeg" title="点击查看原图" alt="20140805171943949.jpeg" border="0" width="421" height="239" /></a>
</p>
<p>
    *附注:在实际项目中,应该改名,并断开预制连接。这里为了方便大家阅读,没有改名。
</p>
<p>
    <br />
</p>
<p>
    ■(二)设置控件
</p>
<p>
    1,在信息显示区域控件 Control - Simple Text Box 里,加入Text List脚本组件:(点击Add component,然后搜索Text List)
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/54591465628660.jpeg" id="ematt:793"><img src="http://www.hudongdong.com/content/uploadfile/201606/54591465628660.jpeg" title="点击查看原图" alt="20140805172812697.jpeg" border="0" width="448" height="475" /></a>
</p>
<p>
    之后,删除 UIInput 组件(否则该面板可以产生输入,并且无法使用字体变色)。
</p>
<p>
    ------------------------------------------------------------------
</p>
<p>
    在选中Control - Simple Text Box 的状态下,然后:
</p>
<p>
    把 Control - Simple Text Box 的子物体Label,重命名为Show_info,然后拖拽给 Text Label属性。
</p>
<p>
    把 Control - Simple Vertical Scroll Bar,拖拽给 Scroll Bar属性。
</p>
<p>
    更改Style属性为Chat。
</p>
<p>
    更改Paragraph History(历史信息数量)为20。
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/89f41465628661.jpeg" id="ematt:794"><img src="http://www.hudongdong.com/content/uploadfile/201606/89f41465628661.jpeg" title="点击查看原图" alt="20140805173826776.jpeg" border="0" width="723" height="372" /></a>
</p>
<p>
    2,在信息输入控件 Control - Simple Input Field 里,加入Chat Input脚本组件:(点击Add component,然后搜索chat)
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/2ee51465628661.jpeg" id="ematt:795"><img src="http://www.hudongdong.com/content/uploadfile/201606/2ee51465628661.jpeg" title="点击查看原图" alt="20140805174727333.jpeg" border="0" width="410" height="374" /></a>
</p>
<p>
    选中Control - Simple Input Field,把 Control - Simple Text Box 拖拽给Text List属性。
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/8a7f1465628661.jpeg" id="ematt:796"><img src="http://www.hudongdong.com/content/uploadfile/201606/8a7f1465628661.jpeg" title="点击查看原图" alt="20140805175129289.jpeg" border="0" width="702" height="349" /></a>
</p>
<p>
    3,创建Send_Btn.cs脚本文件,并将其拖拽到 Control - Simple Button上。
</p>
<p>
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);   
   }  
}  
</p>
<p>
    选中Control - Simple Button,把Control - Simple Text Box拖拽给Text List属性。
</p>
<p>
    把Control - Simple Input Field 的子物体Label,重命名为 Input_Label,以便Send_Btn.cs脚本里可以Find 到。
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/1abe1465628661.jpeg" id="ematt:797"><img src="http://www.hudongdong.com/content/uploadfile/201606/1abe1465628661.jpeg" title="点击查看原图" alt="20140805181328069.jpeg" border="0" width="710" height="328" /></a>
</p>
<p>
    然后,运行,输入点文字,试试效果吧!
</p>
<p style="text-align:center;">
    <a target="_blank" href="http://www.hudongdong.com/content/uploadfile/201606/247b1465628660.jpeg" id="ematt:791"><img src="http://www.hudongdong.com/content/uploadfile/201606/247b1465628660.jpeg" title="点击查看原图" alt="20140805164305562.jpeg" border="0" width="535" height="382" /></a>
</p>

Last modification:January 1st, 1970 at 08:00 am
如果觉得我的文章对你有用,请随意打赏: ☞已打赏列表