NGUI系列教程二

接下来我们创建一个Label，NGUI->Open the Widget Wizard,打开widgetTool对话框，在Template中选择Label，确定AddTo右侧选项为panel，点击，Add To完成Label创建。

1.Label属性窗口如图

1.下面的节奏可能有点快，大家可以先熟悉一下上面讲的流程，再进行下面的学习。接下来我们依次创建Button和Input,因为这两个选项差不多，我们放一块讲，在WidgetTool窗口中，他们都需要选择一个Background，这里和选择Spirit一样。
我们先看Input

它主要包括三个物体，一个带有UIInput代码和BoxCollider的物体，一个Background和一个Label。这里的Background就是刚才讲的Sprite，Label就是上节讲的label。这两个我们都熟悉了，我们主要看Input上面的UIInput属性

Label：默认为空，也就是会自动识别子物体Label。
Max Chars最大字符数，默认为0，表示不限
Carat Char 激活状态下默认字符
Type 字符类型，在移动平台下，可以激活不同键盘
IsPassword 是否为密码，勾选显示为星号
AutoCorrect 自动纠正
UseLabelText At Start 使用Label的字符为输入字符开始，如果勾选，则以Carat Char字符为开始
Active Color 字符激活状态颜色
SelectOnTab，当Input激活状态下，按tab键要选择的物体，例如，填写完该Input后可能要点击按钮输入，这时候我们如果设置SelectOnTab 物体为要按的按钮，在按下Tab键后会自动选择该按钮。

Event Reciever事件接收物体，和下面的functionname 合并起来用，Event Reciever物体上对应的代码如果有和function name相同名称的函数，则当我们在Input激活下按回车键的时候会激发该方法。不知道这样解释能不能理解？

按钮：接下来我们看按钮，按钮结构和Input类似如图

也是包括一个background和一个Label物体，这两个大家都熟悉了，不用讲了。
我们看Button，它上面包括一个用于接收碰撞信息的Box Collider ，一个UIbutton，一个用于缩放的UIButtonScale，一个用于偏移的UIButtonOffset，一个用于播放声音的UIButton Sound。我们可以发现，Button只能更改鼠标滑过和点击的颜色，而不能做出鼠标滑过很复杂的效果，如果我们想要鼠标滑过和点击显示不同的图片，我们该用什么呢？答案就是ImageButton，它比Button强大的地方在于它可以让我们分别选择鼠标滑过，按下时候显示的图片。给我们更多的灵活性。

参数解释如图

示例：（结合Button和Input创建一个登陆界面）

1.创建一个NGUI 2D UI,在Panel节点下创建两个Input和一个Button，方法参考上述步骤。创建完成的效果如图

2.调节Input大小，注意这里首先要调节Input节点下的Background大小，然后再根据Background大小调节根节点下的BoxCollider大小和位置。更改Input名称，第一个我们改为UserName，第二个我们改为Password，并勾选UIInput属性中的IsPassword，设置
Password的SelectionOnTab物体为Button按钮。
新建一个C#脚本Test.cs
添加以下函数
public UIInput username;
public UIInput password;
void OnSubmit()
{
Debug.Log("Login with UserName: " +username.text+"Password:" +password.text);
}

3.将脚本赋给 Main Camera,然后设置 Password的Event Receiver物体为MainCamera。

 

4.给Button 添加Button Message脚本(该脚本可以调用Target物体上的名称和FunctionName一致的没有参数的函数)：选择Button，点击Component->NGUI->Interaction->Button Message.设置 Button Message的target为Main Camera，FunctionName为OnSubmit。

 

5.运行程序，在Username和Password中输入一些内容，然后回车，查看控制台输出内容，或者在输入password输入之后按下Tab键，然后回车查看效果。可以看到控制台输出了我们输入的用户名和密码。

 

声明: 本文由(zqcyou)原创编译，转载请保留链接: NGUI系列教程二