Unity3D_UGUI速成班——06.Slider

Posted 2020-09-08

界面上的交互除了按钮和文字图片之外，还应该有进度条或者血条。Slider正是这样一个UI控件。

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

6.Slider

在Hierarchy栏目下右键后点击UI、再点击Slider。那么在Hierarchy栏目下会多出携带了Slider的Canvas控件和EventSystem控件。Slider下还有Background、Fill Area、Handle SlideArea三个子模块。

 

一、Background

代表了进度条的底色，其实质是处于Sliced模式下的UGUI Image，因为只有Sliced模式才能保证进度条两端的弧度。当Slider的值为0时，呈现的全是Background的颜色，这里就不截图啦。

二、Fill Area

代表Slider值不为0时、非0部分的颜色。

Fill Area其实是个空的UGUI物体，之所以强调它是UGUI，是因为它有Rect Transform，并且其由Rect Transform确定的范围将是进度条可以活动的最大范围。

Fill作为Fill Area的子物体才是这部分的实质，同样是Sliced模式下的UGUI Image。

三、Handle Slide Area

代表了Slider上的进度钮。

和Fill Area一样，Handle Slide Area本身也只是确定进度钮范围的UGUI空物体。

Handle作为其子物体，是一个Simple模式下的UGUI Image。

现在笔者将一个30%的Slider的Background设为黑色，Fill设为红色，Handle设为蓝色，大家看着就明白了。

一、Slider

Slider在Inspector中呈现如图：

依次有Interactable、Transition、Navigation、Fill Rect、Handle Rect、Direction、Min Value、Max Value、Whole Numbers、Value和On Value Change（）

①  Interactable：是否允许Slider交互的bool变量

②  Transition：和UGUI Button部分是一样的，大家可以往前几讲翻一翻；但这里的区别在于Target Graphic设成了Handle，也就是说这是针对进度钮的、不同条件下的颜色光照。

换而言之，Handle的最终呈现，同时取决于它自己的Image组件和二级父物体Slider上的Transition光照。令Handle为蓝色，令Slider的Normal Color为黄色，那么最终呈现的Handle将是绿色。

③  Navigation：和UGUI Button中的用法相同。Slider和Button之间可以向相互“导航。”被Navigation当下选中的Slider或者Button会处于Highlighted-高亮状态。

④  Fill Rect：该进度条的已填充部分所绑定的Rect组件。能拖进这里的必须要有Rect Transform，即UGUI物体。

⑤  Handle Rect：该进度条的进度钮。

说明了Fill 和Handle都不是绝对的，大家可以试着互换一下二者；笔者不敢试，太邪恶了。

⑥  Direction：Slider的演进方向，默认是（LeftTo Right）从左往右刷满，还可以选的有：

         Right to Left（从右往左）、BottomTo Top（从底至顶）、Top To Bottom（从顶到底）

⑦  Min/Max Value：设定进度条数值的极限值，默认最小为0，最大为1，支持Float类型。

⑧  Whole Numbers：勾选之后，Slider的Value值只能取整数，通常用于MaxValue > 1的情况。

⑨  Value：Slider的当前值。

⑩  On Value Changed（）

已经有了UGUI Button的经验，这里就不难推想一定也是个事件系统。但是Slider的事件系统有严格的限制：此处的方法（函数）的参数必须为float，返回值为void。

好了，好久没有接触UGUI的代码了，让我们再动动手吧。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class teachSlider : MonoBehaviour {
    public Slider m_slider;
    public Image m_image;
    bool run = true;
    float  timeCounter = 0;
    public  void f_Change(float i)
    {
        m_image.transform.eulerAngles = new Vector3(0, 0, i * 360);//当Value值改变时、使m_image不停旋转。
        //    Debug.Log("进度条当前值" + i);
    }
    // Use this for initialization
    void Start () {
    
    }
    
    // Update is called once per frame
    void Update () {
        if (!Input.GetMouseButton(0))
        {
            if (timeCounter < 5)
            {
                m_slider.value = timeCounter / 5;  //Value是可以代码控制的。
                timeCounter += Time.deltaTime;
            }
            else
            {
                timeCounter = 0;
                m_slider.direction = Slider.Direction.RightToLeft;//5s后，更改Slider的演进方向
            }
        }
        else
        {
            timeCounter = m_slider.value *5;
        }
    }
}

这里和UGUIButton中一样，需要将脚本挂到某个物体上，再将物体添加到Slider的On Value Changed事件链中，并选中我们写好的方法函数；脚本的一大堆方法中，符合事件链条件的方法会自然出现在最顶端。

这里向大家展示了Slider中的事件链的模板、以及在代码中可控的Value和direction，这里可以通过鼠标拖动Slider来改变进度。

要点：

①f_Change（）方法添加到事件链后，就能够响应人为拖动来修改Value值，可是Update里的timeCounter也会时刻修改Value值，所以笔者才加入了 if ，以鼠标左键点击为判断条件，否则会拖不动Slider，体会一下。

②注意看：在运行5秒、Slider改变方向后，其实右端有一部分不大正常。这是因为默认的Fill Area并不是完全填满整个Slider的，右端有个留给Handle的小缺口，大家可以点开来看看。在代码中改动direction后，Fill Area其实并未改变；真正万无一失的办法自然是直接在Slider控件上更改、或者将Fill Area填满它的Anchor区域。

界面上的交互除了按钮和文字图片之外，还应该有进度条或者血条。Slider正是这样一个UI控件。

6.Slider

在Hierarchy栏目下右键后点击UI，点选Slider。那么在Hierarchy栏目下会多出携带了Slider的Canvas控件和EventSystem控件。Slider下还有Background、Fill Area、Handle Slide Area三个子模块。

一、Background

代表了进度条的底色，其实质是处于Sliced模式下的UGUI Image，因为只有Sliced模式才能保证进度条两端的弧度。当Slider的值为0时，呈现的全是Background的颜色，这里就不截图啦。

二、Fill Area

代表Slider值不为0时、非0部分的颜色。

Fill Area其实是个空的UGUI物体，之所以强调它是UGUI，是因为它有Rect Transform，并且其由Rect Transform确定的范围将是进度条可以活动的最大范围。

Fill作为Fill Area的子物体才是这部分的实质，同样是Sliced模式下的UGUI Image。

三、Handle Slide Area

代表了Slider上的进度钮。

和Fill Area一样，Handle Slide Area本身也只是确定范围的UGUI空物体。

Handle作为其子物体，是一个Simple模式下的UGUI Image。

现在笔者将一个30%的Slider的Background设为黑色，Fill设为红色，Handle设为蓝色，大家看着就明白了。

四、Slider

Slider在Inspector中呈现如图：

依次有Interactable、Transition、Navigation、Fill Rect、Handle Rect、Direction、Min Value、Max Value、Whole Numbers、Value和On Value Change（）

①   Interactable：是否允许Slider交互的bool变量

②   Transition：和UGUI Button部分是一样的，大家可以往前几讲翻一翻；但这里的区别在于Target Graphic设成了Handle，也就是说这是针对进度钮的、不同条件下的颜色光照。

换而言之，Handle的最终呈现，同时取决于它自己的Image组件和二级父物体Slider上的Transition光照。令Handle为蓝色，令Slider的Normal Color为黄色，那么最终呈现的Handle将是绿色。

③   Navigation：和UGUI Button中的用法相同。Slider和Button之间可以向相互“导航。”被Navigation当下选中的Slider或者Button会处于Highlighted-高亮状态。

④   Fill Rect：该进度条的已填充部分所绑定的Rect组件。能拖进这里的必须要有Rect Transform，即UGUI物体。

⑤   Handle Rect：该进度条的进度钮。

说明了Fill 和Handle都不是绝对的，大家可以试着互换一下二者；笔者不敢试，太邪恶了。

⑥   Direction：Slider的演进方向，默认是（Left To Right）从左往右刷满，还可以选的有：

         Right to Left（从右往左）、Bottom To Top（从底至顶）、Top To Bottom（从顶到底）

⑦   Min/Max Value：设定进度条数值的极限值，默认最小为0，最大为1，支持Float类型。

⑧   Whole Numbers：勾选之后，Slider的Value值只能取整数，通常用于Max Value > 1的情况。

⑨   Value：Slider的当前值。

⑩   On Value Changed（）

已经有了UGUI Button的经验，这里就不难推想一定也是个事件系统。但是Slider的事件系统有严格的限制：此处的方法（函数）的参数必须为float，返回值为void。

好了，好久没有接触UGUI的代码了，让我们再动动手吧。

这里和UGUIButton中一样，需要将脚本挂到某个物体上，再将物体添加到Slider的On Value Changed事件链中，并选中我们写好的方法函数；脚本的一大堆方法中，符合事件链条件的方法会自然出现在最顶端。