Author Topic: UIScrollBar  (Read 23693 times)

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
UIScrollBar
« 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 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-Tip

You 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 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.
« Last Edit: December 09, 2013, 12:58:53 AM by ArenMook »

jsbanwjly

  • Guest
Re: UIScrollBar
« Reply #1 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.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #2 on: December 09, 2013, 12:59:19 AM »
I've modified that part, thanks.

Nubeh

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 41
    • View Profile
Re: UIScrollBar
« Reply #3 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.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #4 on: April 09, 2014, 04:10:24 AM »
EventDelegate.Add(scrollBar.onChange, YourFunction);

Fractalbase

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 23
    • View Profile
Re: UIScrollBar
« Reply #5 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?

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #6 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.

Nubeh

  • Newbie
  • *
  • Thank You
  • -Given: 1
  • -Receive: 0
  • Posts: 41
    • View Profile
Re: UIScrollBar
« Reply #7 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....).

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #8 on: June 25, 2014, 08:08:49 AM »
It's just a regular system delegate, not an NGUI delegate.
  1. scrollBar.onDragFinished += YourFunction;

lazlo

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIScrollBar
« Reply #9 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.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #10 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.

CADdev

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIScrollBar
« Reply #11 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.

ArenMook

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 337
  • -Receive: 1171
  • Posts: 22,154
  • Toronto, Canada
    • View Profile
Re: UIScrollBar
« Reply #12 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?

CADdev

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 3
    • View Profile
Re: UIScrollBar
« Reply #13 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.

coolaneasy

  • Newbie
  • *
  • Thank You
  • -Given: 2
  • -Receive: 0
  • Posts: 34
    • View Profile
Re: UIScrollBar
« Reply #14 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