Android01-layout, android01-Layout

Source: Internet
Author: User

Android01-layout, android01-Layout

 

In Android, there are five layout modes: LinearLayout (linear layout), FrameLayout (frame layout), AbsoluteLayout (absolute layout), and RelativeLayout (relative layout ),

TableLayout (table layout); another kind is the new layout after Android4.0: GridLayout (Network bag layout ). The following describes the features of each layout.

 

1. Linear layout: In simple terms, this layout is just like its name. All the controls in it are placed in a straight line. Either vertical or horizontal. Vertical or horizontal settings

Android: orientation = "vertical" attribute to determine the control placement mode. vertical indicates vertical, and horizontal indicates horizontal. In vertical la S, each row has only one control, and multiple controls are vertical down in turn;

In horizontal layout, there is only one row, and each control is arranged to the right.

LinearLayout has a special property: android: layout_weight = "1", which is used to set the weight of the control. Give a column:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/activity_main" android: layout_width = "match_parent" android: layout_height = "match_parent" android: paddingBottom = "@ dimen/activity_vertical_margin" android: paddingLeft = "@ dimen/plugin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/activity_vertical_margin" android: orientation = "vertical" tools: context = "temp.com. androidtouch. mainActivity "> <Button android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text =" Button 1 "/> <Button android: layout_width =" wrap_content "android: layout_height = "wrap_content" android: text = "button 2"/> </LinearLayout>

 

 

This is a linear layout, and the properties of the control have not been given a weight, as shown below:

After I set the weight for the control:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/activity_main" android: layout_width = "match_parent" android: layout_height = "match_parent" android: paddingBottom = "@ dimen/activity_vertical_margin" android: paddingLeft = "@ dimen/plugin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/activity_vertical_margin" android: orientation = "vertical" tools: context = "temp.com. androidtouch. mainActivity "> <Button android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text =" Button 1 "android: layout_weight =" 1 "/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "button 2" android: layout_weight = "3"/> </LinearLayout>

As follows:

 

After we set the weight of the control, the proportion of the control in the entire layout will be allocated according to the weight ratio, the weight can be given to decimal places, but we basically don't give it.

The weight is an attribute in the LinearLayout layout. It cannot be used in other layout S.

 

 

 

II. frame layout: This is the simplest layout of several la S. It creates a separate frame for each added control, but the layout of the frame layout controls are covered, take this code for example:

<? Xml version = "1.0" encoding = "UTF-8"?> <FrameLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/activity_main" android: layout_width = "match_parent" android: layout_height = "match_parent" android: paddingBottom = "@ dimen/activity_vertical_margin" android: paddingLeft = "@ dimen/plugin" android: paddingRight = "@ dimen/plugin" android: paddingTop = "@ dimen/activity_vertical_margin" android: orientation = "vertical" tools: context = "temp.com. androidtouch. mainActivity "> <Button android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: text =" Button 1 "android: layout_weight =" 1 "/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "button 2" android: layout_weight = "3"/> </FrameLayout>

When I change the layout to frame layout

The two buttons will overlap, and the second button will overwrite the first button. This is the unique feature of the frame layout.

 

3. Absolute layout: The AbsoluteLayout layout method is very simple. The main attributes are two: layout_x and layout_y controls, which define their own X and Y coordinates in the layout. Take the x and y values of the coordinate axes (0, 0) in the upper left corner of the screen. When you move down or to the right, the coordinate value increases. AbsoluteLayout allows elements to overlap with each other. We generally do not recommend AbsoluteLayout, because the layout written by AbsoluteLayout will be deformed when used on different devices, and then the layout will be ugly.

 

 

4. Relative layout: RelativeLayout can be understood as a widget as a reference object to locate the layout. The basic attributes are as follows:

 

 

 

5. Table layout: TableLayout is similar to the Table in Html. Each TableLayout contains the table row TableRow, which can define each control. Each TableRow is defined as a row. To put it simply, TableLayout is composed of one <TableLayout> </TableLayout> label and multiple <TableRow> </TableRow> labels. There are two attributes in the layout: android: shrinkColumns = "1" indicates that a column is shrunk, android: stretchColumns = "0" indicates that a column is stretched, and android: collapseColumns = "" indicates that a column is hidden. Of course, in TableLayout, rows can be merged and collocated.

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Table 1 global settings: column attribute settings"/> <TableLayout android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: shrinkColumns = "1" android: stretchColumns = "0"> <TableRow> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "This column can be stretched"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "This column can be shrunk"/> </TableRow> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "I stretch like a row, I can be long, long, and long"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "I like column direction shrinking, I can be very short, very short, and very short"/> </TableRow> </TableLayout> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Table 2 cell settings: specifying attribute cells"/> <TableLayout android: layout_width = "350dp" android: layout_height = "wrap_content" android: shrinkColumns = "0, 2" android: stretchColumns = "1"> <TableRow> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "0th columns"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "1st columns"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "2nd columns"/> </TableRow> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_column = "1" android: text = "I was specified in the first column"/> </TableRow> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_column = "1" android: layout_span = "2" android: text = "I don't believe you can view the cross-1 and 2 columns"/> </TableRow> </TableLayout> </LinearLayout>

This is a column that contains the basic attributes of TableLayout, as follows:

After a brief introduction of the five la s, only the last one is left. The bag layout is flexible. The basic attributes are as follows:

Here is a simple example written using GridLayout:

<?xml version="1.0" encoding="utf-8"?><GridLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:columnCount="4"    android:orientation="horizontal"    android:rowCount="6">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="1" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="2" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="3" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="/" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="4" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="5" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="6" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="*" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="7" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="8" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="9" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="-" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="0"        android:layout_columnSpan="2"        android:layout_gravity="fill_horizontal"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="." />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="+"        android:layout_rowSpan="2"        android:layout_gravity="fill_vertical"/>    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="="        android:layout_columnSpan="3"        android:layout_gravity="fill_horizontal"/></GridLayout>

As follows:

 

The layout is briefly introduced, and you need to know more about it on your own.

For the first time I wrote a blog, I have a lot to worry about.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.