一.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);
}
}
运行效果