首页 > 代码库 > 【Unity3D_UGUI速成班】——06.Slider
【Unity3D_UGUI速成班】——06.Slider
界面上的交互除了按钮和文字图片之外,还应该有进度条或者血条。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事件链中,并选中我们写好的方法函数;脚本的一大堆方法中,符合事件链条件的方法会自然出现在最顶端。
【Unity3D_UGUI速成班】——06.Slider