【Unity3D】UGUI向导式界面和组件复用

来源:互联网 发布:mac的照片如何导出 编辑:程序博客网 时间:2024/06/02 06:50

如下图:


为了达到不设置这么多个输入框InputField和确定、取消按钮的目的,实现组件复用,并且指导用户完成一行行的输入。因此设置了这个所谓的向导式界面。

整个界面的布置非常简单,如下图所示。布置好之后,同时将各个组件命名,便于在脚本中控制。


至于向导的白色箭头1.png,是一张在Photoshop空白背景下,画的白色箭头。如下图所示,在Rawimage的Texture选择1.png即可。


在空对象UIWizard下,绑定如下的UIWizard.cs。该脚本完成的关键主要是将Text1~3存到一个List,将自增自减变量i与Text1~3的顺序对应起来,并且在结束每次的点击之前移动指针。

using UnityEngine;using UnityEngine.UI;//用到了UGUIusing System.Collections;using System.Collections.Generic;//用到了C#容器类Listpublic class UIWizard : MonoBehaviour{    private int i;//用于记录当前箭头指向哪一行    private List<Text> textList;//用于存放Text1~3的数组    public GameObject cursor;//箭头    public InputField inputfield;//输入框    /*获取Text1~3并且初始化i*/    void Start()    {        textList = new List<Text>();        textList.Add(GameObject.Find("Canvas/Text1").GetComponent<Text>());        textList.Add(GameObject.Find("Canvas/Text2").GetComponent<Text>());        textList.Add(GameObject.Find("Canvas/Text3").GetComponent<Text>());        i = 0;    }    /*确定按钮点击事件*/    public void ConfirmButtonOnclick()    {        if (0 <= i && i < textList.Count)//i的有效范围        {            if (inputfield.text.Length > 0)//输入不为空            {                /*更新text,并且箭头下移*/                textList[i].text = inputfield.text;                inputfield.text = "";                if (i != textList.Count - 1)                {                    cursor.transform.position -= new Vector3(0, 100, 0);                    i++;                }            }            else            {                inputfield.placeholder.GetComponent<Text>().text = "输入不能为空";            }        }    }    /*取消按钮*/    public void CancelButtonOnclick()    {        /*清空输入框,并且箭头上移*/        if (0 < i && i <= textList.Count)        {            inputfield.text = "";            cursor.transform.position += new Vector3(0, 100, 0);            i--;        }    }}

在Editor中指定好UIWizard.cs各个公有类成员对应的对象,按钮点击事件,上述UI界面则完成。不懂可以参考《【Unity3D】同场景物体传值与Vector》(点击打开链接)和《【Unity3D】场景切换、UGUI组件事件、开始游戏与关闭游戏》(点击打开链接)。