UI Scroll View
UI Scroll View
The UI Scroll View is a Custom Component introduced in Lens Studio 4.49 that allows you to scroll one screen transform within the bounds of another. The UI Scroll View can be used when content that takes up a lot of space needs to be displayed in a small area. Some examples of this may include a map, a long block of text or a long list of items.
It leverages the Masking component to clip content visuals to a scroll view screen transform.
Installing
Before getting started, You will need to make sure you have Lens Studio 4.49 or later installed.
The UI Scroll View custom component can be found in Lens Studio Asset Library
In the Asset Library, type in UI Scroll View in the Search
field of Asset Library, navigate to the UI Scroll View asset and click Install
.
Adding To Scene
The UI Scroll View component works with Screen Transforms and has to be added to either Orthographic Camera or Canvas hierarchy.
- in the Objects Panel, Click
+
to add a new object and selectScreen Transform
. - Rename the newly created Scene Transform object to
My Scroll View
. - With the Scene Transform object selected, left click on the
Add Component
button in the Inspector panel and selectScroll View
Next, you will need an object that will scroll. In this guide, you will use a Screen Text object.
- With the
My Scroll View
scene object selected add newScreen Text
in the Objects panel,
- Set newly created Screen Text object to the
Content
input field in the UI Scroll View custom component, by clicking on the Scene Text object and dragging to theContent
input field.
Lastly, you will make your Content rectangle bigger than the UI Scroll View rectangle and set the UI Scroll view to wrap the text.
- Click and drag screen transform handles for the content in the 2D scene view to a larger rectangle.
- To verify it's working properly, set text field of Text component to a much longer set of text.
- In the Inspector Panel, click on the UI Set Horizontal Overflow to
Wrap
Once you have your set up ready as shown on the image below you should be able to interact with UI Scroll View component in the Preview Panel.
Parent all objects you need to mask under the Content object and make sure its Screen Transform rectangle fits all the children visuals.
Customizing Settings
UI Scroll View comes up with a set of options. Select Scene Object with the UI Scroll View custom component added and check them out in the Inspector panel:
Content: A content scene object to scroll
- Has to be a child of a UI Scroll View object
- Its rectangle to be bigger than UI Scroll View rectangle
Use mask: Creates Masking Component to occlude mesh visuals parented to the Content Scene object within the bounds of a UI Scroll View rectangle.
- Radius: Set mask radius
Scrolling
- Horizontal: Allows to scroll horizontally.
- Vertical: Allows to scroll vertically.
Scroll Type: Specifies a scrolling type:
- Restricted: Allows to drag Content screen transform strictly within the UI Scroll rectangle
- Elastic: Allows to scroll content out of bounds, but it will bounce back on touch end.
- Elasticity: Allows to set a coefficient for elastic movement. The larger value is, the slower screen transform snaps in place
- Inertia: Allows to add inertia to movement, that helps with scrolling of large content.
- Dampening: Specifies how fast the inertia movement dampens, a multiplier that applies to residual velocity on each frame.
Scroll Bars
Scroll bars can be used to visualize the relative position of the content rectangle as well as provide additional ways to manipulate content.
- Horizontal: Enable horizontal scroll bar.
- Vertical: Enabled vertical scroll bar.
- Scroll Bar Width: Allows to set how big scroll bars are.
- Scroll Bar Material: Allows to override default scroll bar material.
Use the 9 Slicing material from the Asset Library or a 9-slicing subgraph node in Material Editor
This custom component is editable, right click to unpack and see it’s contents.
Scripting Api
UI Scroll View custom component can also be created or configured from script, for example
//@typename ScrollView
//@input SceneObject scrollViewObject
//@input Component.ScreenTransform content
var scrollView = script.scrollViewObject.createComponent(script.ScrollView);
scrollView.content = script.content;
scrollView.dragX = true;
scrollView.dragY = false;
scrollView.scrollType = scrollView.ScrollType.Elastic;
scrollView.scrollBarType = scrollView.ScrollBarType.OnScroll;
scrollView.enableHorizontalScrollBar = true;
scrollView.enableVerticalScrollBar = false;