As you are probably very familiar with, AI does not currently support adding multiple screens. They do have an enhancement request in the issues list, so go star it up so that we can get this nice feature added. In the interim, the following tutorial will help you accomplish the same thing using screen arrangements.
You will need the following components in the Viewer. Drag them to the Viewer from the Palette area.
Set the horizontal arrangement width to fill parent and height to 480 pixels. This will probably be different depending on screen size. 480 pixels is a perfect fit on my EVO. Maybe someone can contribute some information how to account for different screen sizes. My best guess is you would need to check in the code and set it accordingly. There is probably a way to get the screen size and then you can pass it to the height. Maybe I’ll try and figure this out later. Or maybe someone can contribute this information.
Thank you to Liz and stevozip from AI forums for pointing out my mistake with the screen size. The news is good in that the arrangement can automatically fill the screen without causing it to scroll, so there is no need to set the height.
There are a couple options and you’ll need to figure out which one is best for you.
- Select the Screen1 component and uncheck Scrollable in it’s properties
- Set the width and height of each arrangement to fill parent
- Or, as Liz also pointed out, instead of using horizontal arrangements, use vertical which “will make each “page” behave more like the normal screen, which implicitly has a vertical layout.”
- Place a button in the first arrangement
- Place a button in the second arrangement
- Name the first arrangement Page1
- Name the second arrangement Page2
- Name the button in Page1, GoPage2Button and set it’s text to Page2
- Name the button in Page2, GoPage1Button and set it’s text to Page1
- Uncheck visible in the second arrangement
At this point you should only see the button on Page1 on your device and you can’t scroll to the other elements on the page. Lets add some instructions to work some magic and make another page appear.
- Open the Blocks Editor
- Drag out when GoPage2Button.Click from My Blocks –> GoPage2Button
- Drag out when GoPage1Button.Click from My Blocks –> GoPage1Button
- Drag out set Page1.Visible to from Page1 and plug it into when GoPage2Button.Click
- Drag out set Page2.Visible to from Page2 and plug it into when GoPage2Button.Click
- Drag out false from Built-In –> Logic and plug it into set Page1.Visible to
- Drag out true from Built-In –> Logic and plug it into set Page2.Visible to
- Drag out set Page2.Visible to from Page2 and plug it into when GoPage1Button.Click
- Drag out set Page1.Visible to from Page1 and plug it into when GoPage1Button.Click
- Drag out false from Built-In –> Logic and plug it into set Page2.Visible to
- Drag out true from Built-In –> Logic and plug it into set Page1.Visible to
That’s it. You now have a skeleton for a two page app. All you need to do is plug all other components into the horizontal arrangement of the page that is relevant to it and whenever you click the button for that page you will, hide the page you are on and show the other page. You can create as many pages as you want this way.
Basically what we are doing is taking advantage of the fact that the visibility of a parent component takes precedence to that of its child. This way all we need to do is toggle visibility for the parent and every child component will hide with it.
Try the app on your device to see how it works.