OverviewA clipped
UIPanel is not complete unless it can be dragged around like a scroll view, right? Right!
Turning a panel into a
Scroll View is a short 3-step process.
- First, select the panel you want to be your scroll view and right-click anywhere in the Scene View to bring up the context menu, then choose Attach -> Scroll View.
- Now that you have a scroll view, choose its rectangle by dragging the purple handles just like you would choose the widget's rectangle.
- The last step is to add the UIDragScrollView script to at least one collider. Again, select the collider, right click in the scene view, Attach -> Drag Scroll View (it will be on top if you've followed the previous steps).
Note that if you have more than one collider, then you will need to add
Drag Scroll View script to all of them that the user will be able to press on. So for example if you have a scroll view like in the
Scroll View Example where you have a background area and a bunch of items inside it, then you will want to add the UIDragScrollView to the background as well as each of the children. The idea behind it is simple: every collider that can intercept the event should be capable of dragging the scroll view.
Note that the context menu-based approach is context-sensitive. So if you right-click on a widget that doesn't have a collider, you won't be able to see the drag scroll view option.
On the scroll view script you have several options for you to tweak. First comes the
Content Origin that's used to specify where the scroll view's content will originate.
Next comes the
Movement that lets you choose whether you are making a
Horizontal or a
Vertical draggable panel. You can also choose
Unrestricted movement which will let you drag the content around freely. If you want some custom movement, you can set the field to
Custom and set your own X and Y values.
The
Drag Effect option controls how the scroll view behaves when you drag it around.
MomentumAndSpring is the default iOS-like behaviour.
If you want the scroll view to be scrollable with the mouse scroll wheel, play with the
Scroll Wheel Factor value. Note that you can specify a negative value such as -0.25 if you want the mouse wheel scrolling to be inverted.
Momentum Amount controls how the scroll view behaves when the user lets go of the drag mid-swing (swiping gesture). Tweak this value to make it more or less sensitive based on what you desire.
In most cases you will want to have
Restrict Within Panel option left turned on, as this is what will prevent your scroll view's content from leaving the scroll view's region. In case you haven't guessed it already, the dimensions of the scroll view's content should already be outlined by the
orange color in the scene view.
Cancel Drag If Fits option will prevent the content from leaving the bounds at all. If left off, it will be possible to drag the content outside the bounds, but there will be visible resistance in doing so.
Smooth Drag Start and
IOS Drag Emulation options further tweak the behaviour of the scroll view script, and in most cases you will just leave them at default values.
If you have a
Horizontal or a
Vertical Scroll Bar, you can specify them in the appropriate fields. Once done, you can also choose what happens to the scroll bars when they are not needed by adjusting the
Show Scroll Bars option.
LimitationIn NGUI 3.5.5 and earlier versions, a scroll view will only clip the widgets directly underneath it. If you nest scroll views, the clipping will
not be nested. Only one scroll view can clip the content inside of it. NGUI 3.5.6 lifts this limitation, provided you stick to using an NGUI's shader on your atlas such as Unlit - Transparent Colored.
Pro-Tip #1It's best to leave the Scroll Bars
Show Condition at
OnlyIfNeeded so that your scroll bars will get automatically hidden until they are actually needed.
Pro-Tip #2If you want to create an
Endless Scroll View, attach a
UIWrapContent script underneath it like so:
Class Documentationhttp://tasharen.com/ngui/docs/class_u_i_scroll_view.htmlIf you have a question regarding this component or would like me to clarify something, just post a reply here.
