【Unity3D_UGUI速成班】——03.Button

最新推荐文章于 2021-05-29 19:56:04 发布

xxxhhhyxy

最新推荐文章于 2021-05-29 19:56:04 发布

阅读量895

点赞数

分类专栏： Unity UGUI

本文链接：https://blog.csdn.net/xxxhhhyxy/article/details/68065783

版权

Unity 同时被 2 个专栏收录

18 篇文章 4 订阅

订阅专栏

UGUI

13 篇文章 0 订阅

订阅专栏

这一节将主要讲述Button的各项用法。Button控件专门呈现UI层级上的按钮，通常可作为……作为个啥，就是按钮。

--------------------------------------

3. Button

在Hierarchy右键，选中UI下的Button'。那么在Hierarchy栏目下会多出携带了Button的Canvas控件和EventSystem控件；而Button又附带了一个写上“Button”内容的Text作为子物体。

此时点击新生成的Button，在Inspector下可以发现它携带了Image和Button两个组件。

其中Image组件是已经设置好的Sliced模式，但这只是针对默认按钮图片而言，想要换图片的话，大家可以按照第二讲Image的内容进行更改。

接下来是核心——Button组件。从上往下的部分依次是Interactable、Transition、Navigation和一个奇怪的On Click()。他们分别是什么捏？

① Interactable是决定这个按钮是否可被触发的bool变量。勾选时是可触发的。

② Transition是按钮在各种情况下所呈现的可视状态。至于有哪些状态呢？笔者依次为大家列举：

a) Normal-状态：按钮处于可被触发而未触发的情况下、而鼠标并未置于按钮上方时的状态，正常未触发状态。

b) Highlighted-状态：按钮处于可被触发而未触发的情况下、鼠标悬停于按钮上方时所呈现的颜色，正常将触发状态。

c) Pressed-状态：按钮被按下（触发）时的状态，正常触发状态。

d） Disabled-状态：按钮失活时、不可触发的状态，非正常状态。

好，现在我们点开Transition的下拉菜单，发现有4个备选选项：

1) None（无，代表按钮永远只有一种可视状态）

2) Color Tint（颜色，代表按钮在不同状态下颜色不同）

3) Sprite Swap（图片更换，代表按钮在不同状态下图片不同，如图所示）

4) Animotion（动画，代表按钮在不同状态下会有不同的动画特效）

除了None之外，选中不同的Transition，下方的菜单将会出现按钮可视状态和Transition的组合词组（Color Tint下有Normal Color、Highlighted Color等等）。

Color Tint模式下，我们可以点选在不同可视状态下按钮的颜色，选中之后系统会给按钮打光，这部分和第二讲Image里是一样的，这里就不做赘述啦。

SpriteSwap模式下，我们可以设定不同可视状态下按钮的图片，图片当然得是Sprite模式，因为笔者的录屏工具没办法录制鼠标，所以很抱歉大家只能自己尝试啦。

① Navigation: 该条目允许按钮之间用方向键进行导航，在导航中被选中的按钮会处于Highlighted状态。

Visualize按钮其实是一个bool选项，选中的话就允许使用这种方式来找寻按钮。

Navigation的下拉菜单点开后有以下五项：

a） Automatic——识别附近按钮的位置，按照方向键智能选择。

b） Horizontal——按钮光标只能横向移动，移往同一水平线上的其他按钮，所谓的横向可能是东（西）偏南（北）45°以内

c） Vertical——按钮光标只能纵向移动

d） None——相当于关闭Visualize

e） Explicit——设立固定轨迹。在Explicit模式下，每个按钮都可独立设置按下不同方向键的结果。

设置好之后，可以在Scene界面下观察到按钮的导航轨迹。

② 既然是按钮，那么可定有其功能。这就是我们的Onclick（）。Onclick是一个事件系统，学过数据结构与算法的朋友们应该很熟悉。我们点击Onclick下的小+号，就会发现，弹出了一个小框可供编辑。

这时候我们可以尝试写一下功能，新建一个名叫 Test 的脚本：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
    public void f_click()
    {
        Debug.Log("按钮被点击");
    }
}

然后再，Hierachy下新建一个空GameObject，将这个脚本悬挂上去。

这时候我们回到按钮的Onclick下，将刚才新建的、捆绑了脚本的物体，拖到Onclick的Object栏目里，然后再点开右边的下拉菜单，选中我们刚才写好的脚本里的函数，这样这个按钮被点击时，就会执行函数里的功能。

这只是一个小例子，为了诠释Onclick，笔者还为大家写了一个小工程，界面中有4组按钮，第一行是图形，第二行是文字，第三行是颜色，最下方的是目标按钮。点中第一行的按钮，则目标按钮将会获得该按钮的图案；点中第二行的按钮，目标按钮获得其文字等等。

部分代码如下：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class teachButton : MonoBehaviour {
    //Target按钮，会因我们的选择修改其文字、颜色和图标。
    public Button m_target;

    //更换颜色的函数，将被选中的颜色送给Target按钮
    public void f_color(Button a)
    {//将输入按钮的颜色赋给Target
        m_target.image.color = a.image.color;
    }

    public void f_text(string b)
    {//将输入按钮的文字赋给Target
        m_target.GetComponentInChildren<Text>().text = b;
    }

    public void f_sprite(Image c)
    {//将输入按钮的图案赋给Target
        m_target.image.sprite = c.sprite;
    }

    // Use this for initialization
    void Start()
    {
        //通过代码更改target按钮上的文字，注意储存文字的Text其实是Button的子物体，所以要用GetComponentInChildren
        m_target.GetComponentInChildren<Text>().color = Color.black;
        //更改按钮的呈现方式为Simple。
        m_target.image.type = Image.Type.Simple;
        //将按钮变更为perspect Aspect以符合贴图的尺寸。
        m_target.image.preserveAspect = true;
        //写在Start里的所有东西其实都可以在外部调整，这里只是做个示范，这些也可以在代码里修改。
    }
}

演示如图所示：