User Interface
The smartphone has invaded our lives. Whether we are working out, reading emails, checking up on our social media, or doing our banking. A huge part of all of these different kinds of activities we perform on our smartphones is the experience these apps g
- PDF / 3,026,394 Bytes
- 73 Pages / 504 x 720 pts Page_size
- 51 Downloads / 250 Views
User Interface The smartphone has invaded our lives. Whether we are working out, reading emails, checking up on our social media, or doing our banking. A huge part of all of these different kinds of activities we perform on our smartphones is the experience these apps give us through their user interface. A good user interface aims to meet the users’ needs and makes their experience pleasant and satisfying. In Chapter 1 we talked about how the Xamarin.Forms user interface is an abstraction layer on top of the different platforms it supports. We also talked about creating our user interface in either XAML or code. In this chapter, we will look into some of the common concepts we will have to know about when creating our own user interface. This chapter will also look into some of the more advanced user interface concepts, such as working with the existing Xamarin.Forms animations and creating your own animations. Working with custom fonts is also something we will need to do frequently, which is why it is also covered in this chapter. Code sharing and reuse is an important concept in Xamarin.Forms. That’s why we will also dive into creating reusable controls with custom bindings. To end this chapter, we will cover the basics of gestures, because navigating through the app using intuitive gestures is becoming more and more commonplace.
Exploring the Layout Options Structuring and positioning our information on the screen is one of the harder tasks of creating a good-looking user interface. Luckily, Xamarin.Forms provides some out-of- the-box controls that we can use to better structure our data. We will start this chapter by covering a lot of these controls in depth, giving you the tools that you need to be able to choose the right control for the job.
© Gerald Versluis and Steven Thewissen 2019 G. Versluis and S. Thewissen, Xamarin.Forms Solutions, https://doi.org/10.1007/978-1-4842-4134-9_2
35
Chapter 2
User Interface
Using the Right Layout Controls Since each layout control works in its own way, it is important to understand what each of them does and how they might benefit our user interface design. We can combine all of these layouts in all sorts of different combinations to achieve the look and feel we’re after. A comparison of all the different available layout types is shown in Figure 2-1. We will describe most of these types in more detail in this chapter.
Figure 2-1. The different types of layouts available in Xamarin Forms
StackLayout The StackLayout is one of the simplest layout controls to work with. It simply stacks all its children in either a horizontal or a vertical fashion. The StackLayout enables us to create a very simple linear layout, but also enables us to create a more complex layout by nesting other layout controls within it. Each StackLayout applies a small margin between each of its child controls, which is controlled by the Spacing property. The default value for this property is six deviceindependent units. The sample in Listing 2-1 shows how to create a StackLayout.
Listin
Data Loading...
