5 Understanding the basics of app layouts
This chapter covers
- Why it’s important for an app’s design to match its function
- How to organize and layout the user interface (UI) of a NativeScript app with a Stack Layout
- How to use common UI elements (labels, buttons, and text boxes)
- How to create scrollable pages using the Scroll View
In Chapter 4, you learned how to navigate between the pages of a NativeScript app using XML and JavaScript code. You also began to create a mobile app for the Tekmo company. In this chapter, you’ll continue to refine Tekmo’s app while learning about UI layouts.
5.1 Understanding NativeScript layouts
Just creating pages for your app and navigating between them isn’t enough. 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 do.
For example, let’s assume you design a fitness app with a dashboard showing you how much you exercise each day, similar to the fitbit app shown in figure 5.1.
Figure 5.1 Two different UI layouts, with charts 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
