制作进度条(uislider)

_Soy _Soy     2022-08-05     712

关键词:

怎样判断是否应当使用进度条

  用进度条的主要目的是为了用一根管子的充满程度来直观地表示某种数值的百分比,进度条分为可拖动和不可拖动两种。

  可拖动进度条和不可拖动进度条的原理几乎是一模一样,唯一的区别是可拖动进度条上多了一个拖动快和BoxCollider来接收事件,而不可拖动的进度条只能显示一个数字的百分比,无法由玩家去操控。

  在判断是否应该使用进度条时,有以下的规律可以遵循:

  (1)如果某一种值,它有最大值,需要表达它当前的值的占比,这个时候用进度条会非常直观。此时应当用不可拖动的进度条。例如:角色的生命值、法力值、角色升级经验等。

  (2)如果某一种值,它有最大最小值,希望玩家去自由拖动设置,如音量调节、亮度调节等,就可以使用可拖动的进度条。

  可拖动进度条和不可拖动进度条,它们都有三大核心要素构成:底槽Sprite、进度条Sprite、滑动块。

  

创建进度条

  1.第一种方式:自己拼装出一个进度条

  (1)创建一个底槽Sprite。

  (2)为底槽Sprite附加一个UISlider组件。附加方法为AddComponent->NGUI->Interaction->NGUI Slider。

  (3)在底槽Sprite下创建一个进度条Sprite作为子物体,调整好尺寸用以和底槽相吻合。

  (4)在底槽Sprite下创建一个滑动块Sprite作为子物体,然后在底槽Sprite上Attach一个BoxColllider。

  (5)将底槽Sprite拖动到自身UISlider组件上的Background选项中,将进度条Sprite拖动到底槽的UISlider组件上的Foreground选项中,将滑动块Sprite拖动到底槽的UISlider组件上的Thumb选项中,这样三大要素就齐备了。

  (6)如果希望显示当前进度的百分比数字,则在滑动块下创建一个Label(如果不希望数字的位置跟着滑动块走,也可以在别的地方创建Label),然后将该Label物体拖动到底槽的UISlider组件的OnValue Change模块下的Notify中,然后在出现的Method选项中选择UILable->SetCurrentPercent方法。

  

  2.第二种方式:使用PrefabToolBar直接创建

  在新版本的NGUI中,它自身制作了一些常用的UI控件的预设,当需要使用时,直接拖动预设到场景中,就可以直接完成创建。

  在Unity顶部菜单中选择NGUI菜单,选择Open->PrefabTooBar,会弹出NGUI已经制作好的一些预设。

  拖动其中想要的预设到UI Root下(或者其他的UI节点下),就可以完成创建了。

  

核心组件UISlider设置

  1.Value

    进度值,这是为了显示当前数值在"总槽"里的百分比。

  2.Alpha

    透明度,默认为1。

  3.Steps

    每次变动的步伐大小。默认为0,0就是无限制,也就是Value值可以是任意一个值,如果设置了,那么Value就会"一段一段的"变化。

    它的填值效果为"关键点数量的概念",例如,填入5,则代表完整进度条只有5个点,相当于进度条的值将会只有:0、0.25、0.5、0.75、1共5个值。

  4.Appearance模块

    Foreground

      这是进度条上层表示进度的Sprite,将它拖动到这里就算完成了设置。Foreground的长度会随着Value的裱花而自动变化。

    Background

      这是进度条的底槽Sprite,将它拖动到这里就算完成了设置。底槽的长度是不会发生变化的。

    Thumb

      这是拖动块的设置,将任何一个物体拖动到这里来,它就将随着Value的变化而发生位置的变化。

     Direction

      进度条的正方向,默认为从左至右。里面提供了4中选择:从左至右、从右至左、从上到下、从下到上。

  5.On Value Change

      这是进度条发生变化时的一个回调函数,当Value值发生变化时,就会执行这里的函数。

    值得注意的是,如果希望在值发生变化时,自动改变一个百分比数字(Label)的显示,NGUI提供了一个简单的方法:将要显示该进度条百分比的Label物体拖入到Notify中,然后再Method栏中选择UILabel.SetCurrentPercent方法,这样,当进度条的Value值改变时,它就能自动地改变这个Label文本的显示。

 

进度条的BoxCollider说明

  BoxCollider只有附加到底槽上才有用。

  如果没有BoxCollider,进度条无论如何都无法进行拖动设置。

  BoxCollider将会接收进度条上任何一个位置的消息来直接设置进度。例如,不去拖滑动块,直接在90%的位置点一下,那么进度会直接变为90%。

  BoxCollider和拖动块Thumb没有必然联系,如果没有BoxCollider,那么即使有拖动块,也无法通过拖动和单击等来设置进度。

  只要有BoxCollider,即使没有拖动快,也能直接拖动和单击来设置进度位置。

UIslider 和 UI 进度视图嵌入

】UIslider和UI进度视图嵌入【英文标题】:UIsliderandUIprogressviewembedded【发布时间】:2016-12-1208:51:16【问题描述】:我正在尝试构建一个嵌入在进度条中的滑块,以便滑块的最小图像与进度条“进度图像”一致,并且用户只能在“... 查看详情

如何使 UISlider 匹配音频进度

...】:我正在创建一个简单的音乐应用程序,我想知道如何制作一个UiSlider来跟踪音频文件的进度。到目前为止,这是我的项目:代码:importUIKitimportAVFoundationclassSongDetailViewController:UITable 查看详情

UISlider 的自定义形状并在 Swift 5 中更新进度

...了一些关于自定义UIView滑块的***答案,但使用它们我无法制作这样的滑块。这会形成一个圆圈或半个圆圈。我想出了一些使用UIView制作圆形滑块的库,但它对我没有帮助,所以任何人都可以帮助我。如何制作U 查看详情

ios制作个圆形进度条

参考技术A1.需要做个这样的圆形进度条 自定义弹窗view就不说了,主要是这个圆形进度view,底色是灰色然后有进度灰色被黑色覆盖或者说变成黑色首先我们自定一个view,加个uilabel做进度lbael@property(nonatomic,strong)UILabel*percentLabel;/... 查看详情

在 Blend 中用图像制作进度条

】在Blend中用图像制作进度条【英文标题】:MakeaprogressbaroutofaimageinBlend【发布时间】:2015-05-0410:48:03【问题描述】:我一直在尝试在Blend中将图像作为进度条用于程序中以查看还剩多少时间,并且为了适应整个GUI,我想要一个服... 查看详情

如何在 WPF 中制作选取框进度条?

】如何在WPF中制作选取框进度条?【英文标题】:HowdoImakeamarqueeprogressbarinWPF?【发布时间】:2010-10-1222:12:03【问题描述】:在Winforms中,我可以将进度条的ProgressBarStyle设置为Marqee,对于我不知道它需要多长时间的进程,这将在无... 查看详情

如何在kivy中制作圆形进度条?

】如何在kivy中制作圆形进度条?【英文标题】:Howtomakecircularprogressbarinkivy?【发布时间】:2018-11-0516:04:11【问题描述】:我想用kivy和python制作一个简单的圆形进度条。我搜索了在线文档和GitHub曲目,但没有找到解释循环进度条... 查看详情

图解css3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程首先,当有人说你能不能做一个圆形进度条... 查看详情

制作进度条以获取 AFNetworking 3.0 的响应

】制作进度条以获取AFNetworking3.0的响应【英文标题】:MakeaprogressbarforgettheresponsewithAFNetworking3.0【发布时间】:2016-01-2111:05:58【问题描述】:我想为api调用制作进度条并以成功结束,我正在使用AFNetworking3.0版本。我执行以下代码... 查看详情

如何在Android中制作这个进度条? [关闭]

】如何在Android中制作这个进度条?[关闭]【英文标题】:HowtomakethisprogressbarinAndroid?[closed]【发布时间】:2017-09-0907:46:53【问题描述】:我想在android中制作这个进度条【问题讨论】:欢迎来到SO..在发布问题***.com/help/how-to-ask之前... 查看详情

#进度条的制作(代码片段)

importtimeforiinrange(100):sys.stdout.write("#")#在屏幕上输出#time.sleep(0.1)sys.stdout.flush()#刷新功能 查看详情

前端页面加载进度条的制作

...效来表示,当加载完成的时候,再来显示内容。推荐一个制作进度条的网站icons8.com/preloaders/,制作进入条有以下几种方法。这种方法实现进度条简单粗暴,但是不是真实的。所以开发中一般不用这个。我们通过jquery来实现,这... 查看详情

进度条的制作unity

不说了直接上代码:LoadingPanel:usingUnityEngine;usingSystem.Collections;usingUnityEngine.UI;usingUnityEngine.SceneManagement;publicclassLoadingPanel:MonoBehaviourpublicSliderprocessBar;publicImageloadingBg;in 查看详情

python开发技巧-教你制作python进度条

进度条相信大家都不会陌生,我们也经常会看到各种各样的进度条,那么你知道在Python里面如何实现进度条吗?下面小千就来告诉你。4种常见的Python进度条库1.Progress第一个要介绍的Python库是Progress,你只需要定义... 查看详情

ngui的异步场景加载进度条(代码片段)

 1、直接创建三个场景,其中第二个场景是用来显示进度条加载的界面,进度条用UISlider,不会的看我前面的博文就可以了。2、这里提供两种方法,建议使用第一种,加载比较平缓方法一: usingSystem.Collections;usingSystem.Colle... 查看详情

如何在 wpf 中制作多色分段进度条?

】如何在wpf中制作多色分段进度条?【英文标题】:HowcanImakeamulti-coloredsegmentedprogressbarinwpf?【发布时间】:2015-11-1306:43:19【问题描述】:我正在尝试创建一个用作分段进度条的UserControl。输入是对象的集合,每个对象都有一个类... 查看详情

如何用jquery制作进度条?

】如何用jquery制作进度条?【英文标题】:howtomakeaprogressbarwithjquery?【发布时间】:2012-02-0713:34:48【问题描述】:我想知道如何将其制作为简单的代码。我在一个网站上找到了一些我想用于我正在开发的网站的东西。问题是我试... 查看详情

具有缓冲进度的 UISlider - AVPlayer

】具有缓冲进度的UISlider-AVPlayer【英文标题】:UISliderwithbufferingprogress-AVPlayer【发布时间】:2018-08-3010:29:31【问题描述】:我正在使用AVPlayer从服务器流式传输音频,我现在要做的是显示一个自定义UISlider来显示缓冲的进度。有人... 查看详情