Print Page - UIScrollBar

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 21, 2013, 06:18:04 PM

Title: UIScrollBar
Post by: ArenMook on November 21, 2013, 06:18:04 PM

Overview

UIScrollBar 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 (http://www.tasharen.com/forum/index.php?topic=6738) class but changes the way the foreground object is positioned and interacted with.

(http://www.tasharen.com/ngui/uiscrollbar.jpg)

Much like the UISlider (http://www.tasharen.com/forum/index.php?topic=6715), 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 (http://www.tasharen.com/forum/index.php?topic=6704) 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 (http://www.tasharen.com/forum/index.php?topic=6708) 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 (http://www.tasharen.com/forum/index.php?topic=6706) 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-Tip

You can use UIStretch (http://www.tasharen.com/forum/index.php?topic=6713) 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 Documentation

http://tasharen.com/ngui/docs/class_u_i_scroll_bar.html

If you have a question regarding this component or would like me to clarify something, just post a reply here.

Title: Re: UIScrollBar
Post by: jsbanwjly on December 08, 2013, 10:10:53 PM

"This will be the scroll bar's Background -- what the scroll bar will look like when it has the size of 100%."
it seems like foreground description.

Title: Re: UIScrollBar
Post by: ArenMook on December 09, 2013, 12:59:19 AM

I've modified that part, thanks.

Title: Re: UIScrollBar
Post by: Nubeh on April 08, 2014, 04:28:35 AM

I have a question about how to get my onScrollbarMoved method called when the scrollbar value has changed. If I run on Start:

scrollbar.onChange += onScrollbarMoved;

I get in the following error in the console:

Operator `+=' cannot be applied to operands of type `System.Collections.Generic.List<EventDelegate>' and `method group'

I noticed that if I use a reference of the scrollview to which the scrollbar is attached and listen for scrollview.OnDragFinished += onScrollviewMoved then it works fine but I was wondering why.

Title: Re: UIScrollBar
Post by: ArenMook on April 09, 2014, 04:10:24 AM

EventDelegate.Add(scrollBar.onChange, YourFunction);

Title: Re: UIScrollBar
Post by: Fractalbase on June 23, 2014, 11:12:03 PM

I'm not able to get my slider to move from a mouse click.

I implemented the slider as such:
I added a sprite as the background.
I added a sprite as the foreground, with the parent being the background.
I added box colliders to both the foreground and the background.
I set the direction of the slider to "top to bottom" (because the scroll bar is vertical).
I updated my game script attached to a different sprite/label to take into account the ScrollBar.value.
Now, when I click play, the text that should be drawn in the sprite/label is drawn.
However, the scroll bar can't be moved.

Any ideas on what I'm missing?

Title: Re: UIScrollBar
Post by: ArenMook on June 24, 2014, 05:01:41 AM

Check the "debug" on UICamera to see where your events are going, and make sure "raycast hit triggers" is checked in your physics settings.

Also examine the controls that come with NGUI's examples. A vertical slider is one of those controls.

Title: Re: UIScrollBar
Post by: Nubeh on June 25, 2014, 08:00:49 AM

I tried to listen to OnDragFinished the same way I use OnChange on the UIScrollbar component but I get the error:

The best overloaded method match for `EventDelegate.Add(System.Collections.Generic.List<EventDelegate>, EventDelegate)' has some invalid arguments

Is it that the parameters in my handler are wrong? I can't figure out what to use there (I tried nothing, GameObject sender, Vector2 delta....).

Title: Re: UIScrollBar
Post by: ArenMook on June 25, 2014, 08:08:49 AM

It's just a regular system delegate, not an NGUI delegate.

scrollBar.onDragFinished += YourFunction;

Title: Re: UIScrollBar
Post by: lazlo on July 04, 2014, 03:51:07 PM

Is it possible to use a UIScrollBar with just the Thumb property and no Foreground? If so, how? If not, is there any way to hide the Foreground? Even setting it at alpha 0 seems overridden.

Title: Re: UIScrollBar
Post by: ArenMook on July 05, 2014, 11:02:41 PM

Sure, use a simple widget instead of a sprite. Look at the "Control - Simple Horizontal Slider" that comes with NGUI's examples.

Title: Re: UIScrollBar
Post by: CADdev on July 10, 2014, 06:37:48 AM

Dear all,

I have a problem with the Scroll bar and I cannot find a solution, so I ask here...

In my scene I have a scroll view with a bunch of items, and I have a drag scroll view on it. I also added a spring drag effect on the scroll view, they both works fine. Now I would like to add a vertical scroll bar as an indicator for the scroll view position, like the ones we can see on Android and iOS, so just an indicator which appears when the scroll view is dragged and disappears when the drag finishes. To do that I created a UIWidget with a UIScrollBar script attached, and a UISprite as its child. I also set the Widget as the Background in the ScrollBar script, and the Sprite as the Thumb. I then set the Widget as the Vertical scroll bar in the UIScrollView script of the scroll view.

Now, the scroll bar works as expected, but the spring effect on the scroll view is broken, when I drag the scroll view and I reach the beginning or the end of it, the scroll view jumps up and down and it flickers.

Am I doing something wrong, or the scroll view do not support the spring effect while using scroll bars?

Thanks in advance.

Title: Re: UIScrollBar
Post by: ArenMook on July 10, 2014, 08:04:18 PM

What do you mean by "added a spring drag effect on the scroll view"? The spring effect is just the default "MomentumAndDrag" setting on the scroll view. It's what it starts out as. There is no need to add anything. Did you have a look at existing examples that use a vertical scroll view with a scroll bar, such as the Quest Log example?

Title: Re: UIScrollBar
Post by: CADdev on July 11, 2014, 07:09:53 AM

Thank you ArenMook, in the end I solved my problem, I set the Anchors on the scroll view as to execute OnUpdate, but that caused the jumps. Now I set it on OnEnable and it works fine.

Anyway yes, I meant that I set the default MomentumAndDrag setting on the scroll view. I also took a look at the example that you pointed out and it helped me solving some other issues.

Title: Re: UIScrollBar
Post by: coolaneasy on July 11, 2014, 01:38:03 PM

Hi guys
I'm having the same problem as Fractal. Despite putting colliders on thumb and background my scrollbar is not interactive. Seems to work otherwise.
I did check on the debug option and the proper sprites(Thumb and Background) are indeed getting the clicks.
What else do I need to do? Thoughts??
Thanks

Title: Re: UIScrollBar
Post by: coolaneasy on July 11, 2014, 02:16:24 PM

Seems like value is always being set to 0 in OnDragBackground callback. Moving the value in UIScrollBar seems to be moving the thumb just fine.
ps. I don't have a foreground. Could that be causing the problem? Doing quick test.

Title: Re: UIScrollBar
Post by: stilghar on September 20, 2014, 06:23:11 AM

Hi, is it possible to control a scrollbar with keyboard and gamepad? The full UI that we are doing is controlled with keyboard and gamepad (just using UI Key Navigation), is there something similar to control a scrollbar?

Title: Re: UIScrollBar
Post by: ArenMook on September 20, 2014, 09:37:24 AM

Sure, scroll bars and sliders can both be controlled with a keyboard/controller. Check the Controller Input menu example.

Title: Re: UIScrollBar
Post by: stilghar on September 21, 2014, 03:43:00 AM

Thanks, it now works. Strangely enough when I click up in the keyboard when the Vertical scrollbar is selected it actually moves down and the other way around (hitting down goes up). Any ideas of what could this be?

EDIT: I just solved it, silly me. Changing direction to bottomToTop did it.
EDIT2: Turns out it is NOT SOLVED, changing the direction to bottomToTop allows me to control it with keyboard as I want but I would like the scrollbar to be topToBottom.

Title: Re: UIScrollBar
Post by: ArenMook on September 21, 2014, 09:26:07 AM

That seems like a bug in UISlider. Change its OnKey function to the following and it should work:

        /// <summary>
        /// Watch for key events and adjust the value accordingly.
        /// </summary>
 
        protected void OnKey (KeyCode key)
        {
                if (enabled)
                {
                        float step = (numberOfSteps > 1f) ? 1f / (numberOfSteps - 1) : 0.125f;
 
                        switch (mFill)
                        {
                                case FillDirection.LeftToRight:
                                {
                                        if (key == KeyCode.LeftArrow) value = mValue - step;
                                        else if (key == KeyCode.RightArrow) value = mValue + step;
                                }
                                break;
 
                                case FillDirection.RightToLeft:
                                {
                                        if (key == KeyCode.LeftArrow) value = mValue + step;
                                        else if (key == KeyCode.RightArrow) value = mValue - step;
                                }
                                break;
 
                                case FillDirection.BottomToTop:
                                {
                                        if (key == KeyCode.DownArrow) value = mValue - step;
                                        else if (key == KeyCode.UpArrow) value = mValue + step;
                                }
                                break;
 
                                case FillDirection.TopToBottom:
                                {
                                        if (key == KeyCode.DownArrow) value = mValue + step;
                                        else if (key == KeyCode.UpArrow) value = mValue - step;
                                }
                                break;
                        }
                }
        }

Title: Re: UIScrollBar
Post by: thebroll on November 07, 2014, 03:12:26 PM

How might I make a UI slider that starts from the center and grows out? I have found a old tutorial on this but that example seems to be deprecated.

Title: Re: UIScrollBar
Post by: ArenMook on November 07, 2014, 04:14:32 PM

Use a scroll bar with its value set to 0.5. Instead of adjusting the value, adjust the scroll bar's size.

Title: Re: UIScrollBar
Post by: The-Arrival on February 19, 2016, 04:01:27 AM

Is it possible to subscribe to the ValueChange a FloatEvent, passing around the changed Value?

I checked your Slider example and the SetCurrentPercent method pulls the value from the slider itself.

i also tried thsi, but for sure it allways passes the same value saved on subscription

EventDelegate del = new EventDelegate(ui, "SpeedChange");
        del.parameters[0].value = scrollBar.value;
        EventDelegate.Set(scrollBar.onChange, del);
 

Title: Re: UIScrollBar
Post by: ArenMook on February 22, 2016, 07:22:07 PM

There is no need. Check UIProgressBar.current.value.

Tasharen Entertainment Forum

Support => NGUI 3 Documentation => Topic started by: ArenMook on November 21, 2013, 06:18:04 PM