OverviewUIScrollBar is used to create scroll bars -- variable size sliders that moves around a fixed size area. It inherits all of the functionality from the
UIProgressBar class but changes the way the foreground object is positioned and interacted with.
Much like the
UISlider, the only thing a UIScrollBar requires to function is a refrence to the
Foreground widget. This widget should be of the absolute maximum dimensions the scroll bar will be allowed to occupy, which is what happens when its
Size is at 1.0 (100%).
To create a very simple scroll bar, just create a
sliced sprite and give it a width of 300 with the height of 30. This will be the scroll bar's
Background.
Next, add a child sliced sprite to it that will act as the scroll bar's
Foreground. You can inset it within the parent to make the parent seem to "envelop" it if you want to make it look look better.
Now that this is done, add a UIScrollBar script to the first sprite (the background), and set up the
Foreground and
Background fields accordingly. At this point you can hit Play and adjust the values in the Inspector window, and the foreground sprite should react accordingly.
If you want the scroll bar to be interactable, add a
Box Collider to it. You can add separate box colliders to both the Foreground and Background sprites. If you want it to be highlightable, add a
UIButton to the same sprite(s) you added colliders to.
Note that if you have two colliders (one for background and one for foreground) then you will need two UIButton scripts (one per collider). You can make one highlight the foreground, and the other highlight the background.
You can add a
UILabel as a child of your Foreground object if you want a label to move with it (to show percentage, for example).
The scroll bar's
Direction controls which way the scroll bar will move as its
value goes from 0 to 1.
In the
OnValueChange section you can specify a function that will be called when the scroll bar's value changes. If you've added the label mentioned above, you can easily reference its
SetCurrentPercent function, and the label's value will show the Scroll Bar's value in percent. To do this, drag & drop the Label's game object into the
Notify field and then choose the UILabel.SetCurrentPercent function from the drop-down list.
Pro-TipYou can use
UIStretch on the foreground to make it adjust its own size to match the parent, so when you resize the parent the child will automatically adjust itself to match.
Class Documentationhttp://tasharen.com/ngui/docs/class_u_i_scroll_bar.htmlIf you have a question regarding this component or would like me to clarify something, just post a reply here.
