Using SlideShowLayout in Feathers containers (Starling version)

The SlideShowLayout class may be used by containers that support layout, such as List and ScrollContainer, to display one item at a time and scroll page by page.

The Basics

First, let's create a slide show layout and pass it to a ScrollContainer:

var layout:SlideShowLayout = new SlideShowLayout();
 
var container:ScrollContainer = new ScrollContainer();
container.layout = layout;
this.addChild( container );

There are a number of simple properties that may be used to affect positioning and sizing of items in the layout. Let's look at some of the most common.

Direction

A SlideShowLayout positions items horizontally, from left to right, by default. Alternatively, you can tell the layout to position items vertically, from top to bottom, instead:

layout.direction = Direction.VERTICAL;

The direction property may be set to Direction.HORIZONTAL or Direction.VERTICAL.

Spacing

The padding is the minimum space around the edges of each item in container. Let's set the padding property to 12 pixels:

layout.padding = 12;

If needed, the padding on each side of the container may be set separately. Below, we set the paddingTop and paddingBottom properties to 10 pixels, and we set the paddingLeft and paddingRight to 15 pixels:

layout.paddingTop = 10;
layout.paddingRight = 15;
layout.paddingBottom = 10;
layout.paddingLeft = 15;

Alignment

We can align each item within its own page using the horizontalAlign and verticalAlign properties. Alignment only applies when the item does not fill the entire width or height of the page.

Let's adjust the alignments so that the content will be aligned to the top and left:

layout.horizontalAlign = HorizontalAlign.LEFT;
layout.verticalAlign = VerticalAlign.TOP;

Related Links

• feathers.layout.SlideShowLayout API Documentation