ngui制作用户界面

1. 输入框（Input）的添加与设置

首先，按照前面所说，在Widget Tool上添加Input。

Input的Inspector设置

在Input的Inspector面板中，有一些重要的属性需要设置：

• 颜色值：前面的active Text color（激活时文本颜色）、inactive color（未激活时颜色）等4个颜色值，大家可以根据实际需求自行调整。
• Input Type（输入类型）：有三种类型可供选择。
• 标准（Standard）：适用于普通的文本输入，如用户名输入框就可以使用这种类型。
• 自动纠错（Autocorrect）：开启该选项后，输入时会自动进行纠错。
• 密码（Password）：用于密码输入框，输入的内容会以星号等形式显示，保护用户隐私。
• Validation（验证）：该属性用于对输入的数据进行验证，里面包含多种数据类型的验证方式，后续会详细讲解。

Box Collider设置

需要注意的是，Input有一个Box Collider组件，它的作用是检测鼠标是否点击到输入框，从而让用户能够输入文字。要确保Box Collider的center（中心位置）和size（大小）与Input下面的background（背景）尺寸大小相对应。关于Input下面的background和label（标签），之前已经介绍过（分别对应sprite与label），这里不再赘述。

添加Input后，当前的界面效果就初步呈现出来了。

2. 按钮（Button）的制作

添加按钮

同样，先在界面中添加一个按钮。

按钮的属性设置

可以看到UIButton脚本，其Box Collider的作用和前面Input的Box Collider类似。在颜色和精灵（sprite）设置处，可以设置按钮在四种不同状态下的显示效果，分别是normal（正常状态）、hover（鼠标悬停状态）、pressed（按下状态）和disabled（禁用状态）。

• onClick的notify：该属性用于给脚本传递参数，后续会详细说明其用法。
• UIPlay Sound：用于设置按钮点击时播放的声音。

按钮大小调整

初始的按钮大小是200X100，需要调整Box Collider的size，同时也要将background的大小调整为与Box Collider一致。

界面布局调整

添加完按钮后，对每个UI元素的位置进行调整。最终，一个简单的登录界面就完成了。不过，目前这个界面没有任何实际用途。在下一教程中，会添加一些脚本，用于获取输入框中的值以及实现点击按钮后的页面跳转功能。