【Unity3D_UGUI速成班】——07.Scrollbar

手机浏览网页时通常会有滑动条，使得我们既可以通过滑动条来滚动页面，也可以通过手指触摸拖动来完成，Scrollbar和Scroll Rect正是这样一套体系，砣不离称、秤不离砣。

这两节，强烈建议大家用Unity5.4以后的版本学习。

----------

7. Scrollbar

创建一个Scrollbar，发现它像Slider一样，有一些子物体。

Sliding Area-这是Scrollbar的滑块所能活动的范围，Handle就是滑块，这部分做得比Slider要简单一些。好，让我们来看看她的脚本组件。发现他不但有一个Scrollbar组件，还有一个Image。

①  Image组件，说明Scrollbar的背景图片是可更换的，大家可以换上自己中意的Sprite，剩下的操作请见第一讲。

②Scrollbar组件包含：Interactable、Transition、Navigation、Handle Rect、Direction、Value、Size、Number of Steps、On Value Changed（）

这当中只有Size和Number of Steps是独有的，其他7项和Slider中一样，所以这里不再赘述了。

a）  Size – 介于0到1之间，表示滑块在活动方向上占据Scrollbar的比例。

实际上修改这个Size会强行修改子物体Handle的Rect Transform下、Anchor的某个值，至于是X还是Y、Max还是Min，就取决于Scrollbar的方向Direction了。

例如下图的Handle的Anchors的X的Max值是0.2，与上图的Size一致，并且这里的Anchors是浅灰色，代表不可直接从这里输入更改。

a）  Number of Steps –步数，Scrollbar从0到1要走几步（包括0和1）。

1.由于Number of steps的计算步数包括0和1，所以让其取2以下的值是没有意义的。那么当我们令Number of steps为5，就会发现，随着Valuse的变化、Scrollbar的滑块有可能处于5个位置。

2.通过Inspector监控可以发现：Value的值并不受限制，而是随着Value增加超过某个特定值之后，Handle会一口气挪一步。

3.Number of Steps的取值介于0~11之间的正整数，0和1是无意义值。

 

好了，Scrollbar的使用就到这里，可以想见的是，Slider能做到的事，Scrollbar基本都能做到。

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class teachScrollbar : MonoBehaviour
{

    public Scrollbar m_bar;
    public Image m_image;
    float timeCounter = 0;
    int i = 1;
    float defaultSize = 0.2f;

    public void f_Change(float a)
    {
        m_image.transform.eulerAngles = new Vector3(0, 0, a * 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 <= i)
            {
                timeCounter += Time.deltaTime;
                m_bar.value = timeCounter / i;  //Value是可以代码控制的。
            }

            else
            {
                i++;
                m_bar.numberOfSteps = i;
                m_bar.size = defaultSize / i;
                timeCounter = 0;
            }
        }
        else
        {
            timeCounter = m_bar.value * i;
        }
    }
}

这里比较奇怪的部分是，Image的旋转居然也会受Number of Steps限制，可是Inspector中Value的变化却是不间断的。为了证明这件事，我多加了一条Debug，发现真正读入进系统里的Value是有间隔的，所以如果大家读取scrollbar.value会发现它也是间断变化的。