Android Development Self-study notes (Android Studio)-4.1 layout components

First, Introduction

The Android interface is made up of layouts and components, and the layout is like a frame in the building, and the components are the bricks in the building. Components are arranged according to the layout requirements, which makes up the interface that the user sees. Before Android4.0, we used to say that Android developed five major layouts and four components, the five major layouts are:

1. LinearLayout Linear layout
2. Framelayout single frame layout, also has Chinese translation for frame layout, frame layout.
3. Relativelayout Relative layout
4. Absolutelayout Absolute Layout
5. Tablelayout Table Layout

A new GridLayout grid layout was added after Android4.0.

Second, LinearLayout linear layout

Linear layout is the most common form of layout in Android development, which is laid out in a vertical or horizontal direction, with the "Android:orientation" property set to the direction of the linear layout. There are two types of property values: Vertical (vertical) and horizontal (horizontal). The arrangement of a linear layout in a row or column does not wrap or break a column, meaning that if a horizontal layout is used, the control will be hidden from the screen, and the subsequent controls are not wrapped automatically.

The commonly used properties are:

1. Android:orientation: You can set the orientation of the layout
2. Android:id-Specify the appropriate ID for the control
3. Android:text-Specifies the text that is displayed in the control, and it is important to note that String.xml is used here as much as possible
4. Android:gravity-Specifies the basic position of the control, such as centering, right, etc.
5. Android:textsize-Specifies the size of the font in the control
6. Android:background-Specifies the background color used by the control, and the RGB naming method
7. Android:layout_width-Specifies the width of the control
8. Android:layout_height-Specifies the height of the control
9. Android:layout_weight-Specifies the control's occupancy ratio
10. Android:padding-Specifies the padding for the control, which means that the contents of the control
11. Android:sigleline-If set to True, displays the contents of the control in one row

The Layout_weight property to control the relative size of individual controls in the layout. The Layout_weight property is a nonnegative integer value, and the linear layout assigns the occupied area to the control based on the ratio of the layout_weight value of the control to the sum of the layout_weight value of all controls in its layout. For example, there are two buttons in the horizontal layout of the LinearLayout, and the Layout_weight property value of the two button is 1, then both of them will be stretched to half the width of the screen. If layout_weight refers to 0, the control is displayed in its original size and will not be stretched, and for controls with Layout_weight property values greater than 0, the system will subtract the width or height of the control with a value of 0 for the Layout_weight property. Then use the remaining width or height to assign the width or height of each control to the corresponding proportions.

The linear horizontal layout code is as follows:

The linear vertical layout code is as follows (Android:orientation controls horizontal or vertical by modifying the property value):

Layouts can also be nested, and the code is as follows:

Three, framelayout single frame layout

Framelayout is one of the simplest layouts in a layout where the entire interface is treated as a blank alternate area where all child elements cannot be placed in the upper-left corner of the area, and the subsequent child elements are directly above the preceding child elements. Masks the preceding child elements partially and completely.

The code and display are as follows:

You can see that there are overlapping portions of the 3 button components, and the single-frame layout does not automatically align with each component as if it were a linear layout.

For the use of single frame layout I still have some doubts, I do not know how this layout will be used in the scene, but I read this article is slightly touched, share, perhaps also can give you some inspiration:

Example: Frame layout (framelayout) Realization Bird Fly case

Iv. Relative layout of relativelayout

Relativelayout (relative layout) is the most common in addition to linear layout, it is relatively flexible relative to the linear layout, when the layout of the component with linear layout often need to layout nesting, and relative layout is not so troublesome, each component can be specified with other components or the location of the parent component, It just has to be specified by ID. The relativelayout completes the layout according to the position relationship between the child elements. Position-related attributes in the child elements in this layout will take effect. such as Android:layout_below, Android:layout_above and so on. Child elements Specify a positional relationship through these attributes and their respective ID mates. Note When you specify a location relationship, the ID of the reference must be defined before the reference, or an exception will occur.

The Code and demo examples are as follows:

Add a description of the attributes used:

Table 1. Positional Relationship properties between components
Property name	Function description
Android:layout_above	Place the component above the specified ID component
Android:layout_below	Place the component below the specified ID component
Android:layout_toleftof	Place the component to the left of the specified ID component
Android:layout_torightof	Place the component to the right of the specified ID component
Table 2. Component Alignment Relationship Properties
Android:layout_alignbaseline	Place the component in the specified ID component for centerline alignment
Android:layout_aligntop	Place the component at the top of the specified ID component for alignment
Android:layout_alignbottom	Place the component at the bottom of the specified ID component for alignment
Android:layout_alignleft	Place the component in the specified ID component for the left edge alignment
Android:layout_alignright	Place the component in the specified ID component for right edge alignment
Table 3. The current component aligns with the parent component properties
Android:layout_centerhorizontal	Place the component in the center of the horizontal direction
Android:layout_centervertical	Place the component in the center of the vertical direction
Anroid:layout_centerinparent	Place the component in the horizontal and vertical center of the parent component

And for the relative layout of the properties, here also recommended a blog for your reference study:

Some of the important attributes used in the Relativelayout layout reference

V. Absolute layout of Absolutelayout

Absolutelayout (absolute layout) layout usage, such as its name, the location of the component can accurately specify its x/Y coordinate position on the screen. Although the coordinates can be precisely defined, but because the code is too rigid to write, so that in different devices, different resolutions of mobile devices can not be very good to display the results, so this layout is not recommended to use. The android:layout_x and Android:layout_y properties of child elements in this layout take effect and are used to describe the coordinate position of the child element. The upper-left corner of the screen is the coordinate origin (0,0), the first 0 represents the horizontal axis, the value is moved to the right, the second 0 represents the ordinate, and the value increases. Child elements in this layout can overlap each other. in real-world development, this layout format is not usually used.

Although the actual development has always deprecated the use of this layout, but we still know how to use his method (not to do a detailed introduction, interested in the search for documents), the code and the following:

Vi. tablelayout Table layout

Tablelayout as the name implies, this layout is a table layout and applies to the layout format of n row n columns. A tablelayout is made up of many TableRow, and a tablerow represents a row in tablelayout.

TableRow is a subclass of LinearLayout, its Android:orientation property value is horizontal, and its android:layout_width and Android:layout_ The Height property value is constant match_parent and wrap_content. So its sub-elements are all horizontally aligned, and the width is high and consistent. This design allows each TableRow to be the same as the cells in the table. in TableRow, cells can be empty, but cannot span columns.

Here we use the table layout to write sample code to make a layout of three rows and three columns:

Tablelayout is not complicated, so simple to use, the following supplement several common properties of the role:

1.shrinkColumns properties: In the order of 0, when the controls inside the TableRow are filled with layout, the specified columns are automatically extended to fill the available parts, and Shrinkcolumns does not work when the controls inside the TableRow are not covered by the layout.

When we add this property to the layout code, we find that there is no change, because the controls inside the TableRow are not covered by the layout, and the code changes to see the effect as follows:

The 2.strechColumns property, in the No. 0 order, specifies that the column is populated with blank parts. The code and effects are as follows:

3.collapseColumns properties: Hides the specified column in 0 order. This is easier to understand, the code and the results are as follows:

4.layout_column property: Sets the component to display the specified column in 0 order
5.layout_span Property: Sets the number of columns occupied by the component display in the No. 0 action order.

These two properties are put together because some things need to be explained, first look at the code and:

Note: Button1 is set to occupy 2 columns, Button4 is set to show in the ground 2 columns, but the code specifies that Button5 is displayed in the 1th column, but is not displayed according to the settings, so that TableRow in the table layout, a line of components will automatically be placed on the right side of the previous component, In order, the component behind it cannot be set again, as long as the column is determined.

Seven, GridLayout Grid layout

GridLayout Grid Layout is the newly added layout after Android4.0, which is similar to tablelayout, but also adds some content:

1. You can set how the components in the container are aligned.

2. Components in a container can span multiple rows or across multiple columns

Need to pay attention to is because Android4.0 is added after, so API Level14 before the SDK can not be used directly, but also want to use the words on their own to Baidu method, here no longer say, because I think it should be very few people do 4.0 before the program?

Let's look at the sample code first, and this grid layout should be the simplest calculator example:

Description:rowcount and columncount are defined by rows and columns, that is, the layout defines 6 rows and 4 columns. Here Layout_columnspan refers to a few columns, in the sample code, the "BackSpace" and "Clear" buttons occupy 2 columns, the other buttons by default are 1 rows 1 columns. Where the Layout_rowspan is a few lines, no longer write the example, you can experiment with your own, and then by setting Layout_gravity to fill is to fill the occupied row or column.

Other extended content you can find the appropriate API documentation to learn.

Viii. Articles of Reference

1. Grid Layout-gridlayout

2. Five large layout details

3. Talking about the five layouts of Android development

4.Android Layout Management (use of the five major layouts)

Android Development Self-study notes (Android Studio)-4.1 layout components