零基础入门 18： UGUI Slider

现在教程的思路是按照UGUI的组件进行逐一的讲解，先是在Unity里的操作设置，以及代码段的操作控制。上一篇Toggle讲解之后，这篇就是UGUI里的Slider组件了。

进入正题

在游戏中，slider也是很容易看见的，比如说下面的效果最容易在Loading看到

以上图Loading为例，在游戏或者项目加载中，可以用这种进度条来告诉用户当前正在加载。图中的进度条就是用Slider制作的。

知道了效果以后，我们来看看Unity里的Slider如何使用。

首先，我们在Unity里创建一个Slider，然后来看看他的结构。

如上图，可以看出Slider的创建过程和父子级关系展示。这里有个小技巧，层级关系嵌套比较复杂的时候，如果想看到全部内容，可以按住alt然后打开父级即可展开看到全部子节点。收缩也是一样的，大家一试便知。

然后再看一下Slider这个组件的内容。

可以看到，其实slider包括之前的toggle，和button这些组件都有共同之处，就是交互选项以及动画Trasition选项都是具备的。从Fill Rect开始才是Slider这个组件的独有之处。

下面我来解释下Slider这几个特殊属性的意思。

Fill Rect：是填充的区域。从上图的效果图可以看出来，黄色的进度条就是FilleRect。

Handle Rect：最前面的小兔子就是HandleRect显示

Direction：是进度条的方向

Min Value：最小值

Max Value：最大值

Whole Numbers：勾选后只能支持整数value

value：进度条数值。

知道上面这些以后，我们修饰下新创建的slider。将几张图片进行替换。

然后看下替换后的显示效果。

如上图，我们拖动value，可以看到进度条按照我们设置的方向从左到右移动。所以相信大家也知道，控制slider这个组件移动的关键点在于对value的控制。

这里有另外一个问题大家需要知道，如果大家在制作进度条的时候，要把交互选项勾选掉。不然用户就可以通过手托来控制我们的进度条进度了。

如下图。我不勾选掉交互选项。运行后可以手动控制进度。

很明显这不是我们要的效果。只要我们把交互选项去掉，就可以了。

知道了如何在编辑器下控制Slider以后，老套路，创建个脚本，公开一个slider，然后将我们创建的slider拖动上去。

然后在代码里创建一个slider，公开出去，将脚本挂到canvas上。slider拖动到脚本的公开slider上。套图如下。

完成上面的步骤以后，我们就把脚本创建的slider和在编辑器下创建的slider做了关联。

然后我们在脚本里去设置slider的进度条。

回到Unity来运行查看效果。

从脚本中可以看出，不光是value，其他的属性也是可以点出来的。

理论上来说，这节的分享课程就应该结束了，但是考虑到一些同学可能会有需要进度条功能的实现。所以这里稍微写个几行代码，实现进度条的自动移动。

文字描述我就不写了，我会在下面的Gif图里把注释标注上。

第一步

第二步

第三步

第四步

第五步，第五步实际是加注释，哈哈

好了，这样就ok了，然后我们回到Unity里来看下。默认speed值为0。

当speed为0的时候，我们运行项目。

可以看出，当speed值为0，进度条并没有开始运动，而只有Start函数里的重置起了作用，现在我们为speed赋值为1。重新运行。

好了，今天的slider分享也非常简单。

大家下期见。ヾ(￣▽￣)Bye~Bye~