美文网首页
Unity输入框激活效果

Unity输入框激活效果

作者: 周末的游戏之旅 | 来源:发表于2019-09-23 11:37 被阅读0次

在登陆的时候,点击哪个输入框,那个输入框就会变色,点别的地放就会变回去。
效果如下:




方法一 判断鼠标位置

原理很简单,就是判断鼠标当前的位置,如果点数鼠标时,鼠标位置是在输入框内,就把这个输入框的背景颜色换成红色的。如果不是就换成黑色的。代码如下:

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

public class UIController : MonoBehaviour
{
    //当前选择的输入框
    GameObject currentInput;
    //黑色输入框背景
    public Sprite blackInputBg;
    //红色输入框背景
    public Sprite redInputBg;

    //输入框的位置范围
    public Vector3[][] inputFieldPositionRange = new Vector3[2][];

    //输入框
    RectTransform [] inputField=new RectTransform[2];

    public void Awake()
    {
        //获取用户名输入框对象
        inputField[0] = transform.Find("InputFieldUserName").GetComponent<RectTransform>();
        //获取密码输入框对象
        inputField[1]= transform.Find("InputFieldPassword").GetComponent<RectTransform>();
        //输入框范围赋值
        for (int i = 0; i < inputField.Length; i++)
        {
            inputFieldPositionRange[i]= new Vector3[]{ new Vector3(inputField[i].position.x,
                inputField[i].position.y,0),
            new Vector3(inputField[i].position.x+inputField[i].sizeDelta.x,
            inputField[i].position.y+inputField[i].sizeDelta.y,0)};
        }
    }

    public void Update()
    {
        if (Input.GetMouseButton(0))
        {
            int i = 0;
            for (; i < inputFieldPositionRange.Length; i++)
            {
                //判断鼠标x轴是否在输入框范围内
                if (Input.mousePosition.x > inputFieldPositionRange[i][0].x &&
                    Input.mousePosition.x < inputFieldPositionRange[i][1].x)
                {
                    //判断鼠标y轴是否在输入框范围内
                    if (Input.mousePosition.y > inputFieldPositionRange[i][0].y &&
                        Input.mousePosition.y < inputFieldPositionRange[i][1].y)
                    {
                        //设置之前点击的输入框颜色为黑色
                        if (currentInput) {
                            currentInput.GetComponent<Image>().sprite = blackInputBg;
                        }
                        //设置点击的输入框为当前输入框
                        currentInput = inputField[i].gameObject;
                        //设置输入框的颜色为红色
                        currentInput.GetComponent<Image>().sprite = redInputBg;
                        break;
                    }
                }
            }
            //当鼠标不在输入框范围内时
            if (i >= inputFieldPositionRange.Length)
            {
                //设置暂存的输入框为黑色
                currentInput.GetComponent<Image>().sprite = blackInputBg;
            }
        }
    }
}

方法二 检测输入框的聚焦状态

Unity提供了InputFiel类的isFocused,用来检测是否聚焦到输入框上。这种方法更简单,直接取检测isFocued的状态就可以了。

for (int i = 0; i < inputField.Length; i++)
{
    if (inputField[i].isFocused)
    {
        inputField[i].GetComponent<Image>().sprite = redInputBg;
    }
    else {
        inputField[i].GetComponent<Image>().sprite = blackInputBg;
    }
}

方法三 直接设置Transition

直接设置InputField的Transition为SpriteSwap,然后设置Highlighted Sprite为红色的背景

相关文章

网友评论

      本文标题:Unity输入框激活效果

      本文链接:https://www.haomeiwen.com/subject/fvwfyctx.html