By Neil Perlin, Hyper/Word Services (www.hyperword.com)

One of the hardest parts of creating mobile apps is to align all the screen objects – labels, text entry boxes, and so on. Aligning the bottom of a field label with the bottom of the corresponding text entry box, for example, can be difficult to do. Checking the result by eye or by holding a ruler up to the screen sort of works but is inefficient. ViziApps offers two ways to address this problem, a built-in alignment tool and the ability to use an external alignment grid. This post describes both methods.

The Built-In Snap to Grid

Selecting this button in the ViziApps Studio makes screen objects automatically align themselves on predefined grid lines. (Using this feature is like using a sheet of graph paper that can automatically move your drawings to specific grid lines.) Say, for example, that you insert a label and move it to a position with X and Y coordinates 14 and 74, as shown below.

You set the grid spacing to 10 pixels, by clicking the icon on the right side of the Snap to Grid button as shown below.

That label’s X and Y coordinates now default to 10-pixel positions, such as 20 and 70. By doing this, you are limited to moving the label in 10-pixel units.

This feature not only lets you put objects precisely where you want them but also helps align multiple objects. No more tedious pixel-by-pixel movement to align two labels. Just position the first label at an X coordinate of 20, for example, then move the second label until its X coordinate also snaps to 20, as shown below.

The External Alignment Grid

The Snap to Grid feature is very useful, but there are two design considerations to keep in mind.

• You can’t see the grid position. You have to assume that the objects are moving where you want them. They are, but you may want to see what’s going on.
• The grid positions are absolute, but you may want to use them as guides. For example, you may want to customize where the descenders of letters like “y” touch the grid baseline rather than use the predefined snap-to grid settings. Прибыльные и актуальные схемы на вулкан на этом сайте.

To address this, you can create a graphic the size of the canvas and draw your grid on the graphic, as shown in the example below.

This graphic is easy to use – make it the app’s background image during development, then replace it with the real background image once you finish placing all your screen objects. (Thanks to Dan K, in ViziApps Support, for providing this graphic.)

Either approach works fine. Just don’t use both on the same mobile app development project or you may find that the objects you so carefully aligned using the visual grid suddenly shift position if you turn on the Snap to Grid option.

Features like the alignment tools make mobile app development much simpler and more efficient than coding by hand. You’ll find other helpful features in the ViziApps Studio, and there are more features for building mobile apps in the works.