NGUI第二课--登录界面的制作（二）

3、输入框 Input

在 Widget Tool 上添加 Input 即可创建输入框。接下来我们详细介绍 Input 的 Inspector 面板相关设置。

颜色设置

前面提到的 active Text color（激活时文本颜色）、inactive color（未激活时颜色）等 4 个颜色值，大家可以根据实际需求自行调整。

输入类型（Input Type）

Input type 有三种可选：

• 标准（Standard）：适用于一般的文本输入，如用户名输入就可以使用标准类型。
• 自动纠错（Autocorrect）：开启此类型后，系统会自动对输入的文本进行纠错。
• 密码（Password）：用于密码输入，输入的内容会以星号等符号进行隐藏。所以，密码输入框应选择密码类型。

验证（Validation）

Validation 用于对输入的数据进行验证，里面包含多种数据类型的验证方式。这部分内容我们会在后续详细讲解。

Box Collider

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

添加 Input 后，目前的界面效果如下。

4、按钮（Button）的制作

首先，我们要添加一个按钮。

按钮组件相关

可以看到按钮带有 UIButton 脚本，其 Box Collider 和前面 Input 的 Box Collider 作用类似。在 color（颜色）和 sprite（精灵）设置处，可以设置按钮在 normal（正常）、hover（鼠标悬停）、pressed（按下）、disabled（禁用）四种状态下的显示效果。onClick 的 notify 用于给脚本传递参数，后续会详细说明；UIPlay Sound 则是设置按钮点击时的声音。

按钮大小调整

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

最终效果

添加完按钮后，调整每个 UI 元素的位置，最终的登录界面效果如图所示。

至此，一个简单的登录界面就制作完成了。不过，这个界面目前没有任何实际功能。在下一教程中，我会为大家介绍如何添加脚本，以获取输入框中的值以及实现点击按钮后的页面跳转。