【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事件链中,并选中我们写好的方法函数;脚本的一大堆方法中,符合事件链条件的方法会自然出现在最顶端。

时间: 2024-08-26 10:08:47

【Unity3D_UGUI速成班】——06.Slider的相关文章

【Unity3D_UGUI速成班】——05.Rect Transform

这一节将主要讲述所有UGUI物体的排布属性RectTransform,熟练运用这个组件,能够让你的UGUI Demo永远排布美观. 5. Rect Transform 对于任意创建好的UGUI物体,它的位姿属性全由RectTransform决定,这和一般的GameObject物体由Transform决定有所区别,本节以Image为例: 每次创建UGUI控件,画布上都还有四片三角形组成的图案,其实那是4个Anchor(锚点),每个三角形都可单独拖动,默认会出现在该UGUI物体的父物体的正中央. ①

MT4编程培训速成班(视频教程)QQ973201383

速成班课程介绍http://www.ea668.com/thread-3026-1-1.html报名学习:QQ973201383   手机:13774372025  杨老师 MT4编程培训课程(速成班)-第01课    http://www.tudou.com/programs/view/0tL2ngD2JzI/ MT4编程培训课程(速成班)-第02课    http://www.tudou.com/programs/view/1TCVchWHx7c MT4编程培训课程(速成班)-第03课 K线

51CTO博客2.0-Markdown编辑器:脉络清晰的排版速成班

基础: 1.[语法]请参看<51CTO博客2.0-Markdown编辑器使用技巧>2.[内容] 文章总标题&作者个人姓名介绍,不要放在正文3.[空行]使用markdown语法的段落,上下段之间空一行,避免与上下段落的语法重合. 正文组成10要素: 1.首段引言2.正文内标题3.图片4.代码段(长代码)5.代码块(短代码)6.文字型链接7.图片型链接8.重点词9.重点语句10.表格 1.首段引言: 位置:正文前1-3段.速成:①每段第一个字前加符号">".(或者

【UGUI速成班】—— 04. Canvas

这一节将主要讲述所有UGUI物体的最顶级父物体--Canvas前几讲为大家介绍了Text.Image和Button,主要陈述的是UGUI的功能性,但说到底凡是UI都需要考虑其界面排布和呈现等因素.因此在此章节的Canvas和下一章节的Rect Transform快速为大家补上! ----------------------- 4.Canvas Canvas 意思为画布,在Hierarchy栏目下右键==>UI,选择Canvas或者任何UGUI控件,我们仍以Image为例,那么在Hierarchy

Markdown速成班

更多内容请参考: http://ibruce.info/2013/11/26/markdown/

嵌入式第四周学习总结王奕群6班06号

这一周可以说是我喜欢上嵌入式的一周,当你把代码敲出来并且结果是对的时候超级有成就感,相反当一个代码敲错结果错误的时候我也会心急如焚,学到了更多的知识,vim 文件名.c是创建这个文件 ,gcc 文件名.c -o 文件名.c是编译这个文件,今天我在做实验楼的时候又学到了另外一种编译方法gcc -o 文件名 文件名.c ,./文件名是运行这个程序.收获很多,每天学会几个代码也是一种收获.坚持就是胜利!

嵌入式第一周学习总结6班06号王奕群

  一.学习目标 1. 能够独立安装Linux操作系统 2. 能够熟练使用Linux系统的基本命令 3. 熟练使用Linux中用户管理命令/系统相关命令/文件目录相关命令/打包压缩相关命令/比较合并相关命令/网络相关命令等 4. 熟练应用"搜索"进行举一反三的学习    二.学习 1.登录 [Ctrl] + [Alt] + [F1]~[F6] 表示6个终端.命令窗口和图像窗口可以通过[Ctrl] + [Alt] + [F1]和[Ctrl] + [Alt] + [F2]来切换.exit

第1周小组博客作业--1703班06组

(1)工具概述 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; text-indent: 21.0px; font: 12.0px "PingFang SC"; color: #000000 } span.s1 { font: 12.0px "Trebuchet MS" } span.s2 { } TestLink是sourceforge开放源代码项目之一,是基于PHP开发的.Web方式的测试

如何计算团队成员贡献分--1703班06组

通过阅读相关资料,及我们小组自己的讨论,我们觉得这个方案是不错的: 组长的分数等于该小组交付物的评分,其余组员的分数由组长来定. 例如,小组共有5人,小组交付物评分为80,则组长为80分,其余组员的总分为4*80=320 分,组长决定这320 分该如何分配到其他组员头上,即组长可以根据组员的表现对其进行加分或减分,但组长不得对自己进行加分. 理由如下: 这种评分机制的基础在于对整个作业评判最具权威性的老师,所以小组评分环节在全班的范围内是公平.高效的: 小组共享小组评分,是团队精神的体现: 组长