Unity之UGUI的学习（七）：Slider（滑动条）_unity slider

什么是Slider？

Slider控件允许用户可以通过鼠标来在预先确定的范围调节数值。

我们可以在Hierarchy视图右键 -> UI ->Slider来创建滑动条。

上图是一个Unity内置Slider的结构。当然我们也可以自己创建一个更加个性的Slider。但在这之前需要了解Slider组件。

属性和功能

事件

举例

注意：Handle可以去除，其并不是必须的。去掉之后的调节我们可以通过代码来控制滑动条的移动。

Slider的结构

通过上图我们发现Unity内置的Slider主要有3部分，一个是最底层的Background，然后是Fill，然后就是Handle。

下面我们通过自己动手来实现一个滑动条。

首先我们在Canvas下创建一个空游戏物体。

在这个空游戏物体下创建一个Image控件并重命名为Background，并调整好宽度和高度，作为滑动条的底层背景。

然后再在这个空游戏物体创建一个命名为Fill的Image控件作为填充背景，并将颜色设置为红色，并调整大小。

再在这个空游戏物体下创建一个命名为Handle的Image控件作为滑块，并设置为黑色，并调整相应的大小。

给这个空游戏物体添加Slider组件。

并为组件设置值，在这里你会发现Scene视图中Fill和Handle变形，这时，需要调节它们的大小。

我们先将Value调到最大。

然后对Fill和Handle进行调节。这样就可以算完成了。运行之后，可以发现可以滑动并能随之调节Value的值。当然，这个做的比较简陋，我们可以在这些组件上添加图片进行美化。

注意：在上面我们Handle并不是必须的，可以不添加。我们可以通过代码来控制滑动条的移动。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderController : MonoBehaviour {

    private Slider silder;

    void Start() {
        silder = GetComponent<Slider>();
    }

    void Update() {

        silder.value+= 0.1f * Time.deltaTime;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20