零基础入门 15： UGUI Button

按钮对于一个应用或者游戏来说。必不可少，今天这篇分享，来说下UGUI里的按钮，Button组件。

进入正题

打开Unity，在场景中创建一个Button，来看下他身上的自带组件。

如下图。

创建后可以看出，Button是由Image和Button两个组件组成的。Image组件就不用多说了，我们来看下Button组件的内容。

Interactable：交互，默认开启，Enable状态，如果取消对勾，则代表按钮失效，进入Disable状态。

Transition：动画过渡效果，Unity自带的Button有以下几种按钮的动画效果。

第一个代表没有任何效果。

第二个是颜色的过渡效果。

第三个是贴图切换效果。

第四个是支持Animation动画效果。

分别来简单演示下这几种效果。（第一种直接忽略了）

Color Tint也是默认的Button过渡效果。Target Graphic是颜色过渡的目标贴图。

如下是一些操作图

如上图，我们把Color Tint过渡的几个颜色分别进行设置。

Normal Color代表了默认颜色

Highlighted Color代表了高亮的颜色

Pressed Color代表按住的颜色

Disabled Color代表Disable状态的颜色。

Color Multiplier代表了颜色的乘数，即当前的RGB*参数，默认是1

Fade Duration代表了动画过渡的时间

上图我们对颜色进行了设置，接下来运行模式下看看各个效果。

接下来我们导入几张图片到项目中，然后把过渡切换成第三种，图形切换过渡。

如上图，我们进行了几个操作，首先把默认Image增加一个贴图默认显示，选择iu0，然后切换按钮动画为Sprite Swap，分别为高亮、按住、以及Disabled三种状态增加要切换的图片。

运行效果如下。

最后我们把动画效果切换为第四个，Animation。可以看到我们切换为第4个的时候，默认会有对应的Trigger，然后我们点击自动生成动画。会提示我们保存位置和名字，然后点击创建后就可以在Animation对四种状态进行编辑了。

如下图，我简单对四种状态做了一些操作，normal我们什么都不动，然后高亮的时候我们增加了特殊的颜色显示，按住的时候我们缩小了按钮的缩放。然后disable状态的时候，我们修改了图片的透明度。

然后来运行下看看效果。黑色为高亮状态动画，缩小代表Pressed状态，disable状态为透明度变化。

Navigation代表了按钮的导航。

OnClick（）代表了按钮的点击事件。如下图，我们为按钮的点击增加了一个事件，就是控制Light的Active（显示和隐藏）。这种属于不需要写代码来实现按钮的一部分点击实现，但是能实现的内容比较局限。

如下图，默认灯光亮的，点击按钮后灯光隐藏。

相信大家也都看见了，Button这个对象下面还有一个默认叫做Text的对象，代表了按钮上要显示的文字。

默认的文字是Button，这个就不多说了，和Text的使用是一样的，如下图，我们把图上的文字做了一些小修改。

接下来，我们创建一个脚本，来通过脚本对按钮进行一些操作。

还是老路子，创建脚本，创建Button对象，将脚本拖到Canvas上。在Unity里创建按钮，然后将Unity的按钮拖动到脚本上进行关联。

套图如下......

然后在脚本内打开Start方法，对button进行一些脚本控制。从下图可以看到，通过Btn的.可以点出很多变量。

下图我们对按钮的几个操作进行设置。

这里附上注释

然后我们切回Unity看下运行效果。如上图代码，我们把按钮的组件设置为False，所以Button组件的对勾就消失了，然后我们把交互也设置成了false，所以交互前面的对勾也是没有的。颜色为空色。如下图。

接下来，我们通过代码来设置按钮的点击事件。如下图，btn.onClick.AddListener就是为按钮增加点击事件的函数，只不过我比较喜欢用下图这种lanbomda表达式的写法。()=>{}就是lanbomda表达式的写法。可以把要实现的事放到{}里面即可。如下图，我们增加了一句日志输出。

为了让按钮可以点击，我们把按钮的enable和interactable都设置为True。

切回Unity查看效果，然后点击按钮。

如果不习惯用这种表达式的也可以在AddListener里增加函数名，然后再新的函数里实现按钮的点击事件。

切回Unity查看效果

好了，今天对UGUI Button的分享就到这里了。

新年已过，又开始了上班的日子，大家努力工作哟。

接下来的内容依然不定期更新（ヾ(￣▽￣)Bye~Bye~）