Shulou(Shulou.com)06/02 Report--

Android development commonly used layout what, many novices are not very clear about this, in order to help you solve this problem, the following small series will explain in detail for everyone, there are people who need this can learn, I hope you can gain something.

I. Introduction

As shown in the figure below, according to the way the interface is written, it can be divided into two types: traditional layout and new layout.

image

1. Linear layout: It is the most commonly used layout when practicing demo. It is divided into two linear layouts in horizontal and vertical directions, that is, set its attribute orientation: "vertical or horizontal". [Note: When no direction is specified, the default is horizontal, i.e. horizontal direction]

2. Relative Layout: Determines the position of one control relative to the current control, based on the position of another control.

3. TableLayout: For multi-row, multi-column layouts, the control positions are laid out in a tabular manner, and each TableLayout consists of multiple TableRows (representing rows).

4. Grid Layout: A new layout introduced after Android 4.0, similar to TableLayout above, but GridLayout is more useful and flexible than TableLayout.

5. Frame Layout: All controls placed are placed sequentially in the upper left area, so the next control overlaps the previous control, and it is impossible to specify an exact position for the control. Generally used to browse single images.

6. Absolute Layout: This layout is generally not used. The upper left corner of the screen is the origin (0, 0), the horizontal axis is the x axis and increases to the right, and the vertical axis is the y axis and increases downward. The X and Y coordinates of the control are set according to the layout_x and layout_y attributes, respectively.

7. Constraint Layout: First, let's talk about the advantages of constraint layout over traditional layout: ① Using visual interface, dragging controls can complete the layout of the interface;② Solving the problem of excessive nesting of layout, using constraints to specify the position and relationship of each control, it is a bit similar to RelativeLayout, but far more powerful than RelativeLayout.

II. Common attributes

2.1 Common properties for all layouts

Android's common layout is all in this article

2.2 Properties specific to each layout

linear layout

Android's common layout is all in this article

When you do not specify a linear layout orientation, the horizontal layout is used by default.

To allocate the remaining space exactly proportionally, we typically set the layout_width or layout_height of the control to 0dp, and then set its weight value separately. [Only commonly used ones are considered here. As for the width setting, wrap_content or match_parent, please try it yourself.]

Example: There are 3 TextViews in the horizontal direction, and the weight is set to 1:1:1. The code is as follows:

Android's common layout is all in this article

The results are as follows:

Android's common layout is all in this article

Change the weighting ratio to 1:2:3 and run as follows.

Android's common layout is all in this article

relative layout

Android's common layout is all in this article

table layout

Android's common layout is all in this article

Example: XML layout code is as follows:

Android's common layout is all in this article

Android's common layout is all in this article

The results are as follows:

Android's common layout is all in this article

As can be seen from the above demonstration:

If you add a control directly to TableLayout, the control fills a row, such as the text box on the first row.

To place multiple controls on a row, you need to add a TableRow container to the outer layer of the control, such as rows 2, 3, 4, and 5 with different numbers of buttons.

The number of controls in a TableRow container determines how many columns the row has (1, 3, 2, 1, 2 columns, respectively), while the number of columns in a TableLayout is determined by the TableRow with the most controls (the entire layout has 3 columns).

The width of a TableLayout column is determined by the widest cell in the column, e.g. Button44444 determines the width of the second column.

Set the layout_column property, here skipping column 1 and placing controls from column 2.

Set the layout_span attribute. Here, 3 cells are merged, that is, the button occupies 3 cells.

Add the following layout attributes in turn:

① Contraction 1 and 2 columns:

android:shrinkColumns="0,1"

The results are as follows: button8, which is not completely displayed, is completely displayed, and Button1, Button44444, and Button6 have contractions.

Android's common layout is all in this article

② Hide Column 1:

android:collapseColumns="0"

The result is as follows: Since row 4 has only one button, the entire row 4 is hidden.

Android's common layout is all in this article

③ Extension Column 3:

android:stretchColumns="2"

The results are as follows: since only rows 2 and 3 have a third column, and Button3 and B5 have stretch.

Android's common layout is all in this article

grid layout

GridLayout related properties are as follows:

Android's common layout is all in this article

frame layout

The frame layout is the simplest of these layouts, and controls added to it are placed in the upper-left corner of the layout area by default;

The frame layout does not have any positioning method, and the latter control will overwrite the former control;

The size of the frame layout is determined by the largest control in the control;

Note: Setting the position of the foreground image can be superimposed by two attributes, for example, the bottom right corner: bottom| right。

Android's common layout is all in this article

absolute layout

Absolute layouts are rarely used and generally have two common control properties:

Android's common layout is all in this article

constrained layout

Constraint Layout is a layout recommended by Google, with features about its drag controls, adding constraints, setting properties with Inspector, use of Gidelines, and automatically adding constraints

Did reading the above help you? If you still want to have further understanding of related knowledge or read more related articles, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.