【NGUI实例开发】实现用户登录面板

需要组件：Sprite、Label、BoxCollider、UIInputField以及自定义的LoginHandle.cs组件。

实现方法：

1. 添加账号输入框：

1）添加一个Sprite,命名为Account、添加2个label，设置为Account的子对象，命名及关系如图1所示：

图1

2）向Account中添加BoxCllider组件，以及UIInputField组件，Inspector中示意图如图2所示：

图2

3） Account在场景中的效果如图3所示：

扫描二维码关注公众号，回复： 3793732 查看本文章

图3

2. 添加密码输入框，步骤与账号输入框相同，示意图如图4、图5、图6所示：

图4

图5

图6

3. 添加登录按钮。

1）添加一个Sprite,命名为LoginBtn,添加一个Label作为LoginBtn的子对象,作为输入按钮的名称。

2）在LoginBtn中添加BoxCollider组件，同时保证Widget下的BoxCollider为选中状态。

3）在LoginBtn中添加UIButton组件以及LoginBtn.cs组件，并在其点击处理方法中设置如下图7所示：

图7

4） LoginBtn脚本组件代码如下：

using UnityEngine;
using System.Collections;

public class LoginHandle : MonoBehaviour {

    //账户名称GameObjcet
    public GameObject accountGO;
    //账户密码GameObject
    public GameObject passwordGO;

    //账户名称的Label
    private UILabel accountName;
    //账户密码的InputField
    private UIInput accountPassword;
    //账户密码的Label
    private UILabel accountPasswordLabel;

    void Start()
    {
        //获得账户名的Label组件
        accountName = accountGO.transform.Find("content").GetComponent<UILabel>();
        //获得账户密码的InputField组件
        accountPassword = passwordGO.transform.GetComponent<UIInput>();
        //获得账户密码的Label组件
        accountPasswordLabel = passwordGO.transform.Find("content").GetComponent<UILabel>();
    }

    /**
     * 当登录按钮被点击时的响应方法
     * 主要为显示当前输入的账户及密码
     **/ 
    public void LoginBtnOnClick()
    {
        //输出账户名称
        Debug.Log("The Account Name is: " + accountName.text);
        //输出账户密码的InputField
        Debug.Log("The Account Password is: " + accountPassword.value);
        //输出账户密码的Label
        Debug.Log("The Account Password Label's text is:" + accountPasswordLabel.text);
    }
}

4. 运行后输入账号名：admin，密码: 123456，可看到场景中效果如图8所示，Console中测试数据如图9所示：

图8

图9

5. 效果实现。

6. 需要注意的地方：在获取用户输入的数据时，如果是明文可以考虑使用UILabel对象的text属性，如果是密码，则必须使用UIInput组件对象的value属性。否则如果使用UILabel对象的text属性，得出的便是我们看到的“******”效果。

【NGUI实例开发】实现用户登录面板

猜你喜欢