UGUI交互组件Slider

一.Slider对象的结构

对象	介绍
Slider	附加Slider组件
Background	背景
Fill Area	填充范围
Fill	填充对象
Handle Slider Area	滑块移动范围
Handle	滑块

二.Slider组件属性

属性	说明
Fill Rect	关联填充对象
Handle Rect	关联滑块对象
Direction	设置方向
Min Value	最大取值
Max Value	最小取值
Whole Numbers	是否取整
Value	当前取值

三.事件监听

3.1 可视化监听

3.2 代码监听

public class CSlider : MonoBehaviour
{private Slider _slider;void Start(){_slider = GameObject.Find("Slider").GetComponent<Slider>();_slider.onValueChanged.AddListener(delegate (float value){sliderOnValueChanged(value);});}public void sliderOnValueChanged(float value){Debug.Log("value: "+ value);}
}

四.填充内容占满背景

首先，我们进一步的了解默认的Slider对象，先将滑块隐藏，在最小值和最大值之间拖动Value

可以看到Value最小时，填充图片没有消失，Value最大时，填充范围没有覆盖背景图。

以下设置可以解决这个问题：

4.1.把Fill放到Slider下，Fill Area删了

4.2 将Fill的宽高设置为和父对象一致

4.3 把Fill的Image组件的ImageType属性设置为Filled，把Fill Method设置为Horizontal

将Background和Fill的图片设置后，改变Value的值，可以看到Value最小时，填充消失，Value最大时，覆盖背景

五.Slider的应用

总体来说Slider很常用，游戏中血条，进度条，设置百分比数值等地方都有应用。可按是否有交互进行分类，无交互的统称为进度条(包括血条，经验条等，肯定没有滑块)；有交互的称为滑动条(可能有滑块)

5.1 进度条

某游戏的进度条UI

通过代码设置进度条UI的简单举例

public class CSlider : MonoBehaviour
{private Slider _slider;private TMP_Text _text1;private float time = 0;void Start(){_text1 = GameObject.Find("Slider1/Text1").GetComponent<TMP_Text>();_slider = GameObject.Find("Slider1").GetComponent<Slider>();_slider.minValue = 0;_slider.maxValue = 100;_slider.wholeNumbers = true;setSliderValue(20);}void Update(){time += Time.deltaTime;if(3 < time){setSliderValue(50);}Debug.Log(time);}public void setSliderValue(float value){_slider.value = value;_text1.SetText(value + "/" +  _slider.maxValue);}
}

运行效果

5.2 滑动条

某游戏滑动条UI

代码示例

public class CSlider : MonoBehaviour
{private Slider _slider;private TMP_Text _text1;private float time = 0;void Start(){_text1 = GameObject.Find("Slider1/Text1").GetComponent<TMP_Text>();_slider = GameObject.Find("Slider1").GetComponent<Slider>();_slider.minValue = 0;_slider.maxValue = 100;_slider.wholeNumbers = true;_slider.onValueChanged.AddListener(delegate (float value){Debug.Log(value);_text1.SetText(value + "/" +  _slider.maxValue);});setSliderValue(20);}public void setSliderValue(float value){_slider.value = value;_text1.SetText(value + "/" +  _slider.maxValue);}
}

运行效果