Horizontal scrolling menus using layers

User Question:

I want to build a menu which can be scrolled horizontally by swiping left and right. So far I have a header and footer area, each as layers, which will have content that is static such as navigation and status indicators but the middle section needs to scroll on swipe.

I understand that one way to do this is to use the 'Enable Scrolling on Layer' feature of a layer but I can’t seem to get horizontal layer scrolling working.

I’ve got a layer that is 3 times as wide as the screen and it won’t scroll properly. It moves, but it always snaps back to the first 3^rd. No matter what I set the scroll options to....

Answer:

I think the issue you were having was that you were defining the layer to be much wider than the screen (the size of the controls stacked side by side) and so you could not actually scroll the controls in the layer because it was the same size.

I modified the project as follows :

1. make the scrollable Horizontal layer the width of the screen
2. created a group for each menu option screen as a container, for whatever is on the screen that will be scrolled
3. set the x offsets at 320 and 640 (based on the width of the screen being 320) and use the fills as a way to ensure that the width and height of each option is the same

The grouped controls are now spaced evenly across a region which is larger than the containing layer and so they can now be scrolled within the layer Horizontal which is set to the size of the middle region. 

The Horizontal layer I set the pixel snap to 320 and bounce to 50 but that is up to you. The coloured fills help to make it obvious what each screen option is but you can put whatever you want in each.

Here is a simple application that shows the technique:

HorizontalMenuTest.zip