Simple tutorial on Android practice-13th guns (five major layout studies) and five android

Simple tutorial on Android practice-13th guns (five major layout studies) and five android
We know that Android applications are generally composed of multiple activities, which are displayed in the form of views. Views are composed of components one by one. Components are common buttons and TextEdit. How do we see the beautiful interfaces on Android phones? This requires the layout manager of Android. Some people on the Internet have a good analogy: the layout is like the framework in the building, and the components are arranged in sequence according to the layout requirements, it makes up a beautiful interface for you to see.

Before analyzing the layout, Let's first look at the control: Any visual control in Android is from android. veiw. view inherited, the system provides two ways to set the View: the first is the most commonly used XML file to configure View-related attributes, then, when the program starts, the system creates a View based on the configuration file. The second is to directly use the corresponding class in the code to create a view.

How to use an XML file to define a view:

The source code directory of each Android project has a res/layout Directory, which is used to store layout files. The layout file is generally named after the corresponding activity and suffixed with. xml. When creating a component in xml, you must specify an id for the component. For example, the android: id = "@ + id/Name" system automatically creates the corresponding R resource variable in the gen directory.

How to use a view in code:

When creating each Activity in code, it is generally in the onCreate () method, call setContentView () to load the specified xml layout file, and then you can use findViewById () to obtain the corresponding id controls created in the layout file, such as buttons.

For example:

Private Button btnSndMag; public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. main); // load main. xml layout file btnSndMag = (Button) this. findViewById (R. id. btnSndMag); // locate the Button component by id ....}

The following describes the five la s provided by the Android system: LinearLayout (linear layout), FrameLayout (single frame layout), AbsoluteLayout (absolute layout), and TablelLayout (table layout), RelativeLayout (relative layout ). The most common ones are LinearLayout, TablelLayout, and RelativeLayout. These la s can be nested.

(1) LinearLayout linear Layout

A linear layout is to sort child elements (which can be controls or la S) in order in a horizontal or vertical order. Each element is placed behind the first element. There are two linear la S: horizontal and vertical la S. You can set this parameter by Attributes android: orientation = "vertical" and android: orientation = "horizontal.

Android: layout_weight indicates the proportion of the space occupied by sub-elements. Some people say that the size of this value is proportional to that occupied by space, while others say it is inversely proportional. In practice, I set up the opposite of online data display. I will write an article to analyze this issue later. Now we only need to set it according to the positive proportion.

For example, the following is a simple calculator interface:

<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: orientation = "vertical" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "# FFFFFF" tools: context = ". mainActivity "> <! -- // The first line shows the label as a horizontal layout --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <EditText android: id = "@ + id/msg" android: inputType = "number" android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = ""> </EditText> </LinearLayout> <! -- // The second action is mc m + m-mr. The four buttons form a horizontal layout --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "mc" android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "m +" Android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "m-" android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "mr" android: layout_weight = "1"> </Button> </LinearLayout> <! -- // The same as C ++/-/* buttons form a horizontal layout --> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "C"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "+/-"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "/"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "*"> </Button> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap _ Content "android: orientation =" horizontal "> <Button android: layout_width =" match_parent "android: layout_height =" wrap_content "android: text =" 7 "android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "8" android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android Oid: text = "9" android: layout_weight = "1"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: text = "-" android: layout_weight = "1"> </Button> </LinearLayout> <LinearLayout android: layout_width = "match_parent" android: layout_height = "wrap_content" android: orientation = "horizontal"> <Button android: layout_width = "match_parent" android: layout_height = "wrap_conte Nt "android: layout_weight =" 1 "android: text =" 4 "> </Button> <Button android: layout_width =" match_parent "android: layout_height =" wrap_content "android: layout_weight = "1" android: text = "5"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "6"> </Button> <Button android: layout_width = "match_parent" android: layout_height = "wr Ap_content "android: layout_weight =" 1 "android: text =" + "> </Button> </LinearLayout> <! -- // The outermost layer is a horizontal layout with three buttons (1, 2, 3) in the top row on the left and 0 in the bottom row. the two buttons and the = On the right constitute --> <LinearLayout android: orientation = "horizontal" android: layout_width = "match_parent" android: layout_height = "wrap_content"> <! -- // Here 1 2 3 and the following 0. construct a vertical layout --> <LinearLayout android: orientation = "vertical" android: layout_weight = "3" android: layout_width = "wrap_content" android: layout_height = "wrap_content"> <! -- // Here 1 2 3 forms a horizontal layout --> <LinearLayout android: orientation = "horizontal" android: layout_width = "match_parent" android: layout_height = "wrap_content"> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "1"> </Button> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: te Xt = "2"> </Button> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_weight = "1" android: text = "3"> </Button> </LinearLayout> <! -- // 0 and. make up a horizontal layout. Note the android_weight parameter settings here --> <LinearLayout android: orientation = "horizontal" android: layout_width = "match_parent" android: layout_height = "wrap_content"> <Button android: layout_width = "0px" android: layout_height = "wrap_content" android: layout_weight = "2" android: text = "0"> </Button> <Button android: layout_width = "0px" android: layout_height = "wrap_content" android: layout_weight = "1" android Oid: text = "."> </Button> </LinearLayout> <! -- // Vertical layout composed of a single Button --> <LinearLayout android: orientation = "vertical" android: layout_weight = "1" android: layout_width = "wrap_content" android: layout_height = "match_parent"> <Button android: layout_width = "match_parent" android: layout_height = "match_parent" android: text = "="> </Button> </LinearLayout>

(2) TableLayout table layout

Table layout is applicable to the layout format of multiple rows and columns. Each TableLayout is composed of multiple TableRow. A TableRow indicates each row in TableLayout. This row can be composed of multiple child elements. In fact, both TableLayout and TableRow are subclasses of LineLayout linear layout. However, the attribute value of the TableRow parameter android: orientation is invariably horizontal, and android: layout_width = MATCH_PARENT, android: layout_height = WRAP_CONTENT. Therefore, TableRow is a horizontal linear layout, and the width and height of sub-elements are consistent.

Note: In TableLayout, cells can be empty, but cannot span columns, meaning that only adjacent cells cannot be empty.

In the TableLayout layout, the width of a column is specified by the cell with the largest width in the column, and the width of the table is specified by the parent container. You can set the following attributes for each column:

Shrinkable indicates that the column width can be reduced so that the table can adapt to the size of the parent container.

Stretchable indicates that the column width can be stretched to fill up the free space in the table.

Collapsed indicates that the column will be hidden.

Special attributes in TableLayout:

Android: collapseColumns

Android: shrinkColumns

Android: stretchColumns = "0, 1, 2, 3"

Demo: we want to design a table with three rows and three columns as follows, but we only want to display two tables in the second row:

 

<? Xml version = "1.0" encoding = "UTF-8"?> <TableLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: shrinkColumns = ", 2" // set three columns can be reduced android: stretchColumns =, 2 "// you can stretch all three columns. If you do not set this, the displayed table cannot be slow. The entire screen android: layout_width =" fill_parent "android: layout_height = "fill_parent"> <TableRow android: layout_width = "fill_parent" android: layout_height = "wrap_content"> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button1"> </Button> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button2"> </Button> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button3"> </Button> </TableRow> <TableRow android: layout_width = "fill_parent" android: layout_height = "wrap_content"> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button4"> </Button> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button5"> </Button> </TableRow> <TableRow android: layout_width = "fill_parent" android: layout_height = "wrap_content"> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button6"> </Button> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button7"> </Button> <Button android: gravity = "center" android: padding = "10dp" android: text = "Button8"> </Button> </TableRow> </TableLayout>

(3) Relative layout of RelativeLayout

RelativeLayout inherits from android. widget. viewGroup is deployed based on the positional relationship between child elements. As the five most flexible and commonly used layout methods in the Android system, ViewGroup is very suitable for some complicated interface design.

Note: Before referencing other child elements, the referenced ID must already exist. Otherwise, an exception occurs.

Common location attributes:

Android: layout_toLeftOf This component is located at the left side of the reference component android: layout_toRightOf This component is located at the right side of the reference component android: layout_abve This component is located at the top of the reference component android: layout_below the component is located at the bottom of the referenced component android: layout_alignParentLeft whether the component is aligned with the left-side android: layout_alignParentRight of the parent component whether the component is the right-side android of its parent component: layout_alignParentTop whether the component is aligned with the parent component's top android: Align whether the component is aligned with the parent component's bottom android: layout_centerInParent whether the component is centered relative to the parent component android: layout_centerHorizontal whether this component is horizontally: layout_centerVertical whether the component is vertically centered

Example:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <Button        android:id="@+id/btn1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_centerInParent="true"        android:text="Button1" >    </Button>    <Button        android:id="@+id/btn2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn1"        android:layout_toLeftOf="@id/btn1"        android:text="Button2" >    </Button>    <Button        android:id="@+id/btn3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn1"        android:layout_toRightOf="@id/btn1"        android:text="Button3" >    </Button>    <Button        android:id="@+id/btn4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_above="@id/btn2"        android:layout_toLeftOf="@id/btn3"        android:layout_toRightOf="@id/btn2"        android:text="Button4" >    </Button></RelativeLayout>

(4) FrameLayout framework Layout

Place all the child elements in the upper left corner of the interface. The child elements behind the interface directly overwrite the child elements, so they are rarely used.

(5) AbsoluteLayou absolute Layout

In the absolute layout, all child elements are fixed by setting the android: layout_x and android: layout_y attributes, that is, coordinates (android: layout_x, android: layout_y ), layout_x is used to represent the abscissa, and layout_y is used to represent the ordinate. In the upper left corner of the screen, the coordinates are (0, 0), the horizontal direction to the right is the positive direction, and the vertical direction to the downward direction is the positive direction. In practical applications, this layout is rarely used, because Android terminals generally have many models and their respective screen sizes. Resolution may be different. If absolute layout is used, the display may be incomplete on some terminals.

The following layout attributes are commonly used:
(1) layout_margin
Used to set the margin between the control edge and the parent Control
Android: layout_marginLeft
Android: layout_marginRight
Android: layout_marginTop
Android: layout_marginBottom

(2) layout_padding
Used to set the margin between the control content and the control edge.
Android: layout_paddingLeft
Android: layout_paddingRight
Android: layout_paddingTop
Android: layout_paddingBottom

(3) layout_width/height
Used to set the height and width of the control
Wrap_content content package, indicating that the text size in the control is filled
Fill_parent follows parent window
Match_parent

(4) gravity
Used to set the alignment of the content in the View component
Top bottom left right center

(5) android: layout_gravity
Used to set the iner component alignment
Android: layout_alignTop: Align the top edge of an element with the top edge of an element.
Android: layout_alignLeft: Align the left edge of an element with the left edge of an element.
Android: layout_alignBottom: the bottom edge of the current element is aligned with the bottom edge of an element.
Android: layout_alignRight: the right edge of an element is aligned with the right edge of an element.