制作进度条(UISlider)

Posted 2020-08-09 _Soy

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

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

　　可拖动进度条和不可拖动进度条的原理几乎是一模一样，唯一的区别是可拖动进度条上多了一个拖动快和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，即使没有拖动快，也能直接拖动和单击来设置进度位置。