用UGUI实现登陆界面

尽管这几天天气寒冷，我这边甚至还在下雪，但这不能成为我们停止学习的借口，我们仍需咬紧牙关继续前行。下面将详细介绍如何使用UGUI实现登陆界面。

步骤一：创建空工程

首先，创建一个空的Unity工程，这是整个项目的基础。

步骤二：添加Canvas

在创建好的工程中，按照常规步骤添加一个Canvas。Canvas是UGUI的基础容器，所有的UI元素都将放置在它上面。

步骤三：Canvas布局

在Canvas中进行登陆界面的布局设计。布局完成后，界面大致呈现出我们预期的样子。

步骤四：添加脚本

接下来，我们要添加一个名为login.cs的脚本，并将其挂载到相机上。该脚本涉及多个组件，以下是脚本的详细内容：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class login : MonoBehaviour
{
// Toggle
public Toggle remPasswd;
private Toggle fogPasswd;

// 注册信息
public InputField inputName;
public InputField inputPaswd;

void OnCLick()
{
// 去除输入框前后的空格后进行比较
if (inputName.text.Trim() == "wuzhang" && inputPaswd.text.Trim() == "123456")
{
// 加载名为test1的场景
Application.LoadLevel("test1");
}
else
{
Debug.Log("登录失败!");
}
}

// Update方法每帧调用
void Update()
{
// 如果选中记住密码
if (remPasswd.isOn)
{
// 填充数据，这里只是简单模拟，若要实现真实功能，可写个配置文件
inputPaswd.text = "123456";
}
else
{
// 保持输入框内容不变
inputPaswd.text = inputPaswd.text;
}
}

void regist()
{
// 检查输入框是否有内容
if (inputName.text != "" && inputPaswd.text != "")
{
Debug.Log("注册成功");
}
else
{
Debug.Log("请输入注册信息");
}
}
}

代码解释：

• OnCLick方法：用于处理登录逻辑，当输入的用户名和密码分别为wuzhang和123456时，加载名为test1的场景，否则输出登录失败的提示信息。
• Update方法：每帧检查remPasswd的状态，如果选中，则将密码输入框填充为123456，否则保持输入框内容不变。
• regist方法：用于处理注册逻辑，检查输入框是否有内容，如果有则输出注册成功的提示信息，否则提示用户输入注册信息。

步骤五：登录按钮事件

关于登录按钮的事件处理，在上一篇文章中已经详细介绍过，这里就不再赘述。

步骤六：运行测试

完成上述步骤后，运行项目查看效果。可能界面看起来有些简陋，但我们主要关注的是功能实现。下面进行一些功能测试：

1. 模拟注册 - 不输入数据：直接尝试注册，会提示“请输入注册信息”。
2. 模拟注册 - 正确输入数据：在用户名和密码输入框中输入有效信息，点击注册按钮，会提示“注册成功”。
3. 登录测试：输入正确的用户名和密码（wuzhang和123456），点击登录按钮，会跳转到第二个场景。
4. 记住密码功能测试：勾选“记住密码”选项，再次打开登录界面时，密码输入框会自动填充为123456。

总之，通过以上步骤，我们成功使用UGUI实现了一个简单的登陆界面。欢迎大家共同学习，如有不明白的地方，可随时共同讨论。

工程源码：http://pan.baidu.com/s/1hq8CdDi