Contrary to the name of this tutorial, there isn’t an actual button arrangement option. There is a feature request submitted for adding the ability to configure padding so that you can offset buttons, or whatever you want to get a specific placement on screen. Go star it up! Today it’s a very frustrating process of using horizontal and vertical arrangements to create the padding needed. As you can imagine this isn’t the most efficient way to go about it, and can be a very painstaking process.
In this tutorial I will show another option for handling this that allows for precise control of the placement without filling your component tree with dozens of useless arrangements. The way we achieve this is by using a canvas and ImageSprite. You’ll have to watch out for a couple bugs that exist with this today, but they are hardly show stoppers. I’ll mention the bugs as I reach that point of the tutorial.
What you’ll need to build this project
- Background image
- Button image
AI supports JPG, PNG or GIF with a file size that is no more then 300K. I have also attached the ones I used in case you don’t have any quickly accessible.
Start a new project and drag out the following components
- VerticalArrangement, rename it to Page1, set width and height to fill parent
- VerticalArrangement, rename it to Page2, set width and height to fill parent
- VerticalArrangement, rename it to Page3, set width and height to fill parent
- Canvas, rename it to Page1Canvas, set width and height to fill parent
- Canvas, rename it to Page2Canvas, set width and height to fill parent
- Canvas, rename it to Page3Canvas, set width and height to fill parent
- ImageSprite, rename it to Page1Btn
- ImageSprite, rename it to Page2Btn
- ImageSprite, rename it to Page3Btn
We will build a 3 page app that will have a button on each page. See my Creating Multiple Pages tutorial for a more in depth explanation of using screen arrangements to achieve the appearance of a multi-page app.
- Place Page1Canvas inside Page1
- Place Page2Canvas inside Page2
- Place Page3Canvas inside Page3
- Place Page1Btn on Page1Canvas
- Place Page2Btn on Page2Canvas
- Place Page3Btn on Page3Canvas
- Place Label1 on Page1 and set it’s text to Page1
- Place Label2 on Page2 and set it’s text to Page2
- Place Label3 on Page3 and set it’s text to Page3
Lets configure the components
- Set the background of Screen1 to the the background image and uncheck Scrollable in the properties.
- For Page1, 2 & 3Canvas, set the BackgroundColor to None
I want to stop here to tell you about the first bug encountered. The reason we set it to none is because it makes it transparent so that the background from Screen1 will show up. If you have a device connect while doing this, you can see on the viewer it does but on the device it remains white. So until this bug is patched you’ll need to set the background for each canvas.
- Set Page1, 2 & 3Canvas BackgroundImage to the same one used for Screen1
- Set Page1, 2 & 3Btn to the button image
Here is where we encountered the second and more severe bug. At this point you will want to position the buttons on the canvas and if you drag them on the viewer, within the first 30 seconds or so some errors will pop-up on the blocks editor and the screen on the device will loose the content and lockup the app. Thankfully there is a simple workaround. Instead of dragging the sprite buttons in the viewer, use the X and Y coordinates in each sprite’s properties to adjust it’s position on the canvas. I tested this and was not able to reproduce the same problem. So if you are going to use this technique for button placement this is the way to go until AI supports a more native arrangement function for buttons. If you will be making your own buttons and using a JPG, make that they are cropped right to the edge or have the same type of background as the background you use, or they will not blend. The best way is to use a transparent background and save the button as a PNG to preserve the transparency. Go ahead and align the buttons whereever you like on each canvas.
- Uncheck Visible in the Page2 and Page3 properties
Now open the block editor and lets add some simple instructions for the buttons to open other pages.
- Drag out Page1Btn.Touch
- Drag out Page1.Visible into this block and set it to false
- Drag out Page2.Visible into this block and set it to true
- Drag out Page2Btn.Touch
- Drag out Page2.Visible into this block and set it to false
- Drag out Page3.Visible into this block and set it to true
- Drag out Page3Btn.Touch
- Drag out Page3.Visible into this block and set it to false
- Drag out Page1.Visible into this block and set it to true
Let’s take a look at what’s going on here. When you start the app, only Page1 will be visible since we unchecked visible in the properties for the other pages. When you touch the button on this page it will first set Page1.Visible to false, hiding this content and set Page2.Visible to true, making the content of Page2 appear. When you touch the button on Page2, it will hide Page2 and Page3 will appear. On Page3 the same thing will happen and take you back to Page1. Since we’re using the same button on each page, we added the labels so that we can see that the "pages" actually change.
Go ahead and try it on your device. You can probably build a fairly decent UI using this technique combined with other arrangements, but that’s something I will get into in another tutorial.
Please use the form below for comments or visit this forum thread.