Introduction to the general layout of android-android and the general layout of android

Introduction to the general layout of android-android and the general layout of android

In the previous chapter, we mentioned that the Android platform interface is designed in XML format. Then, in the previous chapter, we only made a simple interface. In this chapter, we will introduce how to use common controls to design a practical interface.

All views in Android inherit the View. There are two types of views for Android: common view and ViewGroup view. Their difference is that many common views can be placed in ViewGroup, and our common layout is a ViewGroup.

Layout in Android is used for layout. The following is a list of commonly used la s in Android.

Name	Description
LinearLayout	Linear Layout
RelativeLayout	Relative Layout
FrameLayout	Frame Layout
TableLayout	Table Layout
AbsoluteLayout	Absolute layout (obsolete)
GridLayout	Grid layout (released in 4.0)

 

Next we will introduce each layout.

LinearLayout

LinearLayout is translated as linear layout. Its sub-elements are arranged in both water and vertical directions. You can change the arrangement mode by setting Orientation. Let's take a look at the effect.

Create a layout File linearlayout_demo.xml, right-click the layout folder, and select new-Android xml File.

In the displayed window, enter the name of the layout file.

 

After finishing, we have created the layout file.

Next, we drag multiple text controls into the linearlayout. xml layout.

Currently, I have dragged five text controls, which are arranged vertically from top to bottom.

 

 

Next, we changed the orientation attribute to horizontal. The arrangement of the five text controls changed and changed to the horizontal direction. Then we switched to the code area.

 

Android: orientation sets the LinearLayout arrangement direction and is also a special attribute of LinearLayout.

 

RelativeLayout

RelativeLayout: relative Layout

Similarly, we create a layout file named relativelayout_demo.xml and select the root node as RelativeLayout.

Drag several widgets to the layout

You can see the difference between RelativeLayout and LinearLayout. The RelativeLayout can be placed freely.

Common location attributes in RelativeLayout are as follows:
Android: layout_toLeftOf -- This component is located on the left of the referenced component
Android: layout_toRightOf -- This component is located on the right of the referenced component
Android: layout_above -- the component is located above the referenced component
Android: layout_below -- the component is located below the referenced component
Android: layout_alignParentLeft -- whether the component is aligned with the left end of the parent component
Android: layout_alignParentRight -- whether the component is the right end of its parent component
Android: layout_alignParentTop -- whether the component is aligned with the top of the parent component
Android: layout_alignParentBottom -- whether the component is aligned with the bottom of the parent component
Android: layout_centerInParent -- whether the component is centered relative to the parent component
Android: layout_centerHorizontal -- whether the component is horizontally centered
Android: layout_centerVertical -- whether the component is vertically centered

TableLayout

TableLayout, as its name implies, is a table layout. It is applicable to the layout format of N rows and N columns. A TableLayout consists of many TableRow. A TableRow represents a row in TableLayout.

TableRow is a subclass of LinearLayout. Its android: orientation attribute value is always horizontal, and its android: layout_width and android: layout_height attributes are always MATCH_PARENT and WRAP_CONTENT. Therefore, its child elements are arranged horizontally and the width and height are consistent. This design makes the sub-elements in each TableRow be the same as the cells in the table. In TableRow, cells can be empty, but cannot span columns.

 

GridLayout (supported in Versions later than 4.0, so if you want to use this layout directly, you need to set the lowest version number to 14)

The GridLayout layout in Versions later than android4.0 solves the above problems. The GridLayout layout uses virtual lines to divide the layout into rows, columns, and cells. It also supports the staggered arrangement of controls on both rows and columns. GridLayout uses APIs similar to LinearLayout, but only modifies related labels. Therefore, it is easy for developers to master GridLayout. The layout policy of GridLayout is divided into the following three parts:

First, like the LinearLayout layout, it can be divided into two ways: horizontal and vertical. By default, It is a horizontal layout. A control is arranged from left to right next to a control, but by specifying android: after columnCount sets the attribute of the number of columns, the control Automatically sorts the columns with line breaks. On the other hand, for the child control in the GridLayout layout, the display is set according to the wrap_content method by default, which only needs to be explicitly declared in the GridLayout layout.

Second, to specify that a widget is displayed in a fixed row or column, you only need to set the android: layout_row and android: layout_column attributes of the Child widget. However, you must note that: android: layout_row = "0" indicates starting from the first line, and android: layout_column = "0" indicates starting from the first column, which is similar to the assignment of one-dimension arrays in programming languages.

Finally, if you need to set a control to span multiple rows or columns, you only need to set the android: layout_rowSpan or layout_columnSpan attribute of the Child control to a value, and then set its layout_gravity attribute to fill, the previous setting indicates the number of rows or columns that the control spans. The last setting indicates that the control fills up the entire row or column that the control spans.

 

Common GridLayout attributes are:

Android: columnCount

Android: rowCount

Android: layout_rowSpan = specifies the number of rows that the control occupies.

Android: layout_column = specifies the column in which the control is located

Android: layout_row = specifies the row number of the control.

For example, we want to create a keypad

 

TabLeLayout cannot be implemented because it cannot span columns. LinearLayout can be implemented but needs to be nested in multiple layers. If GridLayout is used, it can be easily implemented.

The Code is as follows:

 

 1 <?xml version="1.0" encoding="utf-8"?> 2 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="match_parent" 4     android:layout_height="wrap_content" 5     android:columnCount="4" > 6  7     <Button 8         android:id="@+btn_1_1" 9         android:layout_column="1"10         android:text="print" />11 12     <Button13         android:id="@+btn_1_2"14         android:text="Scro" />15 16     <Button17         android:id="@+btn_1_3"18         android:text="Pau" />19 20     <Button21         android:id="@+btn_2_1"22         android:text="Num" />23 24     <Button25         android:id="@+btn_2_2"26         android:text="/" />27 28     <Button29         android:id="@+btn_2_3"30         android:text="*" />31 32     <Button33         android:id="@+btn_2_4"34         android:text="-" />35 36     <Button37         android:id="@+btn_3_1"38         android:text="7" />39 40     <Button41         android:id="@+btn_3_2"42         android:text="8" />43 44     <Button45         android:id="@+btn_3_3"46         android:text="9" />47 48     <Button49         android:id="@+btn_3_4"50         android:layout_gravity="fill_vertical"51         android:layout_rowSpan="2"52         android:text="+" />53 54     <Button55         android:id="@+btn_4_1"56         android:text="4" />57 58     <Button59         android:id="@+btn_4_2"60         android:text="5" />61 62     <Button63         android:id="@+btn_4_3"64         android:text="6" />65 66     <Button67         android:id="@+btn_5_1"68         android:text="1" />69 70     <Button71         android:id="@+btn_5_2"72         android:text="2" />73 74     <Button75         android:id="@+btn_5_3"76         android:text="3" />77 78     <Button79         android:id="@+btn_5_4"80         android:layout_gravity="fill_vertical"81         android:layout_rowSpan="2"82         android:text="Ent" />83 84     <Button85         android:id="@+btn_6_1"86         android:layout_columnSpan="2"87         android:layout_gravity="fill_horizontal"88         android:text="0" />89 90     <Button91         android:id="@+btn_6_2"92         android:text="." />93 94 </GridLayout>

This section briefly introduces the common layout. Next we will introduce the commonly used Android controls.

 

 

 

 

 

 

 

 

 

This section describes the five commonly used la s in Android.

Linearlayout linear Layout
Relative layout of Relativelayout
FrameLayout framework Layout
TableLayout table layout
AbsoluteLayout absolute layout (not recommended, the most common is the above four)
 
What layout manager is available for android?

LinearLayout, TableLayout, RelativeLayout, and FrameLayout also have an unrecommended AbsoluteLayout
LinearLayout is commonly used for beginners. Later, RelativeLayout ~~ will be used for writing interfaces ~~