-
Notifications
You must be signed in to change notification settings - Fork 35
ScrollPane
When you have content that can be of an unexpected size, it is a great idea to stick it into a ScrollPane. It automatically crops the content and adds scrollbars for panning. You can also use flick scrolling for a more mobile feel. ScrollPane is also a component of SelectBox.
"background" is the drawable that will contain the entire widget. Usually this is not needed unless this ScrollPane is meant to be used with a SelectBox.
"corner" appears in the bottom-right corner of the widget if the knobs are specified.
You need to specify the knobs if you want the user to able to click and drag the scroll bar on desktop. See "hScrollKnob" for horizontal scrolling and "vScrollKnob" for vertical scrolling.
If you want to have a background for those knobs, specify "hScroll" and "vScroll"
Adding a ScrollPane is simple enough. A common mistake is forgetting to pass in a skin/style. The single argument constructor makes a basic ScrollPane with no visual knobs.
Table table = new Table();
ScrollPane scrollPane = new ScrollPane(table, skin);
root.add(scrollPane);
You might wonder why you don't see the ScrollPane. By default, scrollbar fading and flick scrolling are enabled meaning that you have to flick the pane to actually see the bar. Also, you must have enough content to cause scrolling in the first place.
Table table = new Table();
ScrollPane scrollPane = new ScrollPane(table, skin);
scrollPane.setFadeScrollBars(false);
scrollPane.setFlickScroll(false);
root.add(scrollPane);
for (int i = 0; i < 100; i++) {
Label label = new Label("test " + i, skin);
table.add(label);
table.row();
}
Why is there an unnecessary horizontal knob? You are beginning to see the complexity of working with ScrollPane. Call #validate() on widgets that need to recalculate their preferred width based on their children. Do this after you have added your children.
scrollPane.validate();
Often designers want to scroll the ScrollPane half way down the view (or to some other percentage). You have to validate the ScrollPane for this to work. When you create a widget, it essentially is created at size 0. Half of 0 is still 0, thus not panning the view at all. #validate() calculates the actual dimensions.
scrollPane.validate();
scrollPane.setScrollPercentY(.5f);
scrollPane.updateVisualScroll(); //remove this line to animate the movement
You may want to scroll to a specific position.
TextButton scrollToButton = null;
for (int i = 0; i < 100; i++) {
TextButton button = new TextButton("test " + i, skin);
if (i == 30) scrollToButton = button;
table.add(button);
table.row();
}
scrollPane.validate();
scrollPane.scrollTo(0, scrollToButton.getY() - scrollToButton.getHeight() * .5f, 0, 0);
scrollPane.updateVisualScroll(); //remove this line to animate the movement
You can use ScrollPane for unorthodox uses such as a way to pan a map. There are a multitude of options to test to achieve different effects.
Image image = new Image(new Texture(Gdx.files.internal("map.jpg")));
ScrollPane scrollPane = new ScrollPane(image);
scrollPane.setOverscroll(false, false);
root.add(scrollPane);
The following chapter, 07 - SelectBox, implements elements from List and ScrollPane. You can also return to the table of contents.
Getting Started
Windows
Linux
Mac
Features Manual
Colors
Fonts
Creating Bitmap Fonts
Creating FreeType Fonts
Creating Image Fonts
Drawables
Nine Patches
Ten Patches
Classes, Styles, and the Preview Panel
Custom Classes
Exporting
Importing
Saving / Loading
VisUI Skins
Tips and Tricks
TextraTypist Playground
Scene Composer
Scene Composer
Exporting a Scene
Modifying a Scene
Tutorials
Skin Composer Videos
From The Ground Up Series
Examples
Ray3K Skins