美文网首页
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