This article was excerpted from NativeScript in Action.
Understanding NativeScript layouts
Creating pages for your app and navigating between them isn’t enough to make a good app. Mobile app development is also about creating compelling user experiences to accomplish a purpose. This means you need to present and organize your UI in different ways, depending upon what the users of your app need.
For example, let’s assume you design a fitness app with a dashboard showing how much you exercise each day, like the fitbit app shown below.
Two different UI layouts, with chart data points displayed on the left dashboard page, and more tabular data entry on the profile page, as seen in the fitbit app on iOS
On the dashboard, there are several different charts and graphs displaying your daily progress. The charts and graphs are oriented in different patterns on the screen to catch the eye of a user, drawing attention to the most important data first (your step count). On a different page, users complete a personal profile, including their name, birth date, height, weight, and fitness goals. Because of the difference in information displayed on the profile page, the UI elements are arranged in a vertical stack.
Right now, designing a mobile app with these various organizational layouts might seem daunting, but don’t worry, it’s easier than you think. NativeScript makes organizing your UI easy with a collection of UI elements called layouts.
DEFINITION A layout is a special UI element that instructs and informs your app how to organize other UI elements on a mobile device’s screen. If you want a button to dock (or always be displayed) at the bottom of your screen, or if you’d like to organize several buttons in a grid-like collection of rows and columns, there are layouts to help you.
Because NativeScript layouts are UI elements, they’re defined in XML. Although I call layouts a UI element, they aren’t displayed on a mobile device’s screen when a page is loaded. Instead, they affect the location and arrangement of UI elements placed within the layout. Because layouts contain other UI elements, they’re referred to as layout containers.
In the code listing below, I have included a Stack Layout with several nested UI elements. You’ll learn about Stack Layouts in a moment, and even though you might not understand how a Stack Layout works right now, take note that when UI elements are placed inside of a layout container – they’re arranged and displayed on the mobile device screen in various ways (according to the rules of their container).
In total, there are five different layouts: stack, grid, wrap, dock, and absolute. I’m not going to go into detail about all the layouts, but instead focus on the most common layout you’ll use when building your first apps: stack.
NOTE Every NativeScript app page you create will have a layout, but you’re not limited to having a single layout on a page. You can build more complex UIs by nesting (or combing) two or more layouts together.
TIP The NativeScript documentation on layout containers is an excellent resource: https://docs.nativescript.org/ui/layout-containers. The explanation of all five layouts is a great quick-reference guide. Bookmark it now.
Layouts and screen pixels
As you’re learning about layouts, it’s important for you to understand some basics of how NativeScript (and most mobile devices) display UI elements on the screen.
DEFINITION Screen resolution is a measure of the number of pixels on a screen, usually described in the form of width x height. For example, a screen resolution of 640×480 means the screen is 640 pixels wide and 480 pixels high.
DEFINITION Dots per inch (DPI) is a measure of dot (or pixel) density on a mobile device’s screen. In mobile apps, it’s used to describe the number of pixels appearing in an inch of screen along the width or height. Most devices have the same DPI in both horizontal and vertical directions, so the DPI is described as a single number. For example, 400 DPI would mean 400 pixels per inch exist in each row and column of pixels.
Although mobile devices have varying screen resolutions and DPI, all devices have rectangular screens organized in rows and columns of pixels. Each pixel on the screen can be referenced by using a coordinate of (X, Y), with X representing the number of pixels from the left of the screen and Y representing the number of pixels from the top of the screen.
The leftmost top pixel is referenced by the (0, 0) coordinate. The fourth pixel from the left and fifth from the top is referenced by the (3, 4) coordinate.
The above image shows how the leftmost top pixel can be referenced by the coordinate of (0, 0). Similarly, the pixel in the fourth column and fifth row down can be referred to using the coordinate (3, 4).
NOTE You’ll notice that the first row and column on the screen is referred to using the number zero. You’re probably familiar with this practice of counting from zero instead of one, but I wanted to call your attention to it.
When you use NativeScript layouts to organize your UI elements, you won’t spend a lot of time thinking about individual pixels (at first). As you learn about each layout using screen coordinate to reference pixel, it’s an easy way to see how NativeScript places UI controls on the screen.
Try NativeScript for yourself!
If you’re a JavaScript developer who is interested in cross-platform app development, without having to learn a new language first, then NativeScript might just be what you’re looking for. Learn to leverage your JavaScript skill set in a major way, and start writing native apps for all platforms. The beauty of it is – you don’t even have to learn native code! NativeScript in Action is here to show you how it all works so go ahead and have a look – you won’t regret it!
Download the free first chapter of NativeScript in Action and see what NativeScript can do for you.
For more information (and a discount code) also see this Slideshare presentation.
