Android Interface Programming--android layout components (ii)

Android Interface Programming

2.3.1 Layout Introduction

Layouts are used to define the arrangement of UI elements in activity, and Android provides linearlayout linear layouts, relativelayout relative layouts, framelayout frame layouts, tablelayout table layouts, Absolutelayout A total of five layouts, you can declare layouts in two ways:

? Declares a UI element in XML. Android provides XML elements that correspond to the View class and its subclasses

? The run-time instantiation of the layout element. You can programmatically create View objects and ViewGroup objects (and manipulate their properties).

The advantage of declaring the UI in XML is that it is better to isolate the appearance of the app from the code that controls the behavior of the app. The UI description is outside the app code, which means that you don't need to modify your source code and recompile when you modify or adjust the description. For example, you can create an XML layout for different screen orientations, different device screen sizes, and different languages. In addition, declaring a layout in XML makes it easier to display the structure of the UI, which simplifies the problem debugging process. As a result, layout UI elements in XML are commonly used in Android applications

implementation of the 2.3.2 layout Writing layout Files

The layout file must contain only one root element, and the element must be a view object or a ViewGroup object. Once the root element is defined, additional layout objects or UI elements can be added as child elements to gradually build the view hierarchy that defines the layout

After you declare the layout in XML, save the file in the res/layout/ directory of your Android project with an . XML Extension so that it compiles correctly.

Loading layout Files

When the app is compiled, each XML layout file is compiled into a View resource. The layout resource should be loaded with application code in the Activity.oncreate () callback method. You do this by calling Setcontentview () to pass a reference to the layout resource in the form of r.layout.layout_file_name.

2.3.3 Linetype Layout

All child elements are arranged in a vertical or horizontal order on the interface, and if arranged vertically, each row contains only one interface element.

If arranged horizontally, each column contains only one interface element

Common Properties for Linetype layouts

Table 2.3-1 Common properties for linear layouts

XML Properties	Value	Note
Android:orientation	Horizontal Vertical	Decide whether to arrange horizontally or vertically
Android:layout_weight	Int	Assigns the remaining dimensions in the parent layout to the weight value proportions of the sibling elements, using with "Wrap_content"
Android:layout_margin	Dp	Sets the white space between the edge of the object and the edges of the parent layout
Android:padding	Dp	Sets the distance of the inner element from its own edge
Android:background	Color/drawable	Set the background of the entire layout screen
Android:gravity	Top,bottom,left,right,center	The alignment of an element within its own area
Android:layout_gravity	Top,bottom,left,right,center	How elements are aligned in the layout

The following example explains the use of LinearLayout

2.3.2 Framelayout Layout

In the simplest layout form, the components are placed in the upper-left corner of the screen, the components are stacked in order, and the controls on the previous layer override the next layer of controls

Table 2.3-2Common properties of Framelayout

XML Properties	Value	Note
Android:layout_margin	Dp	Sets the white space between the edge of the object and the edges of the parent layout
Android:padding	Dp	Sets the distance of the inner element from its own edge
Android:background	Color/drawable	Set the background of the entire layout screen
Android:gravity	Top,bottom,left,right,center	The alignment of an element within its own area
Android:layout_gravity	Top,bottom,left,right,center	How elements are aligned in the layout

The following example explains the use of framelayout

Example 3-2: The interface shown in design 3-5

Figure 3-5

2.3.3 Relative Layout relativelayout

A very flexible layout that determines the layout position of all elements in the interface by specifying the relative position of the interface element with other elements. Features: To ensure the correct display of the interface layout table on various screen types of mobile phones

Relative layout properties are more, for ease of understanding and memory usually we divide attributes into three categories:

First Class: The property value is true or false, as shown in table 2.3-3.

Table 2.3-3Common properties of Relativelayout

XML Properties	Note
Android:layout_centerhrizontal	Center horizontally
Android:layout_centervertical	Center vertically
Android:layout_centerinparent	Fully centered relative to parent element
Android:layout_alignparentbottom	Snaps to the bottom edge of the parent element
Android:layout_alignparentleft	Snaps to the left edge of the parent element
Android:layout_alignparentright	Snaps to the right edge of the parent element
Android:layout_alignparenttop	Snaps to the top edge of the parent element

The second class: The attribute value must be the reference name of the id "@id/id-name", as shown in table 2.3-4.

Table 2.3-4Common properties of Relativelayout

/tr>

xml properties	remarks
Android:layout_below	below an element
Android:layout_above	in an element Above
Android:layout_toleftof	On the left side of an element
Android:layout_torightof	On the right side of an element
Android:layout_aligntop	The top edge of this element is aligned with the top edge of an element
Android:layout_alignleft	The left edge of this element is aligned with the left edge of an element
Android:layout_alignbottom	The bottom edge of this element is aligned with the bottom edge of an element

Class III: Attribute values are specific pixel values, mainly adjusting the spacing between UI elements, as shown in table 2.3-5

Table 2.3-5Common properties of Relativelayout

XML Properties	Note
Android:layout_marginbottom	The distance from the bottom edge of an element
Android:layout_marginleft	The distance from the left edge of an element
Android:layout_marginright	Distance from the right edge of an element
Android:layout_margintop	The distance from the top edge of an element
Android:layout_marginbottom	The distance from the bottom edge of an element
Android:layout_marginleft	The distance from the left edge of an element
Android:layout_marginright	Distance from the right edge of an element

The following example explains the layout design of Relativelayout

2.3.4 Table Layout Tablelayout

Tablelayout manages controls in the form of rows and columns, each of which behaves as a TableRow object, or a view control. When you are a TableRow object, you can add child controls under TableRow, and each child control occupies one column by default. How many columns the child control has, and when it is a view, the view will have a single row, as shown in 2.3.7

Figure 2.3-7

Table 2.3-6Common properties of Tablelayout

XML Properties	Note
Android:layout_colum	Specifies that the cell is displayed in the first column
Android:layout_span	Specifies the number of columns that the cell occupies (1 if unspecified)
Android:stretchcolumns	Sets the columns that can be stretched. The column can stretch to the row direction, up to a full row
Android:shrinkcolumns	Sets the columns that can be shrunk. When the column control has too much content and is already packed with rows, the contents of the child control are displayed in the row direction
Android:layout_colum	Specifies that the cell is displayed in the first column
Android:layout_span	Specifies the number of columns that the cell occupies (when unspecified, to 1 )
Android:stretchcolumns	Sets the columns that can be stretched. The column can stretch to the row direction, up to a full row

The following example explains the layout design of Tablelayout

2.3.5 Absolute Layout Absolutelayout

Absolutelayout is the layout that is displayed on the screen based on the x/Y coordinate values specified by the element. The container's coordinate system is in the upper-left corner (0, 0), when the vertical downward is the y-axis and the horizontal right is the x-axis. Absolutelayout does not have a page border, allowing elements to overlap each other.

Since it is necessary to fix the coordinate points for the elements so that the interface code is too rigid to cause poor compatibility on different devices, we usually do not recommend the use of absolutelayout in development, so here we just need a simple look.

The peak of the cupola 20160706

Android Interface Programming--android layout components (ii)