Basic tutorial for Android -- 2.2.3 TableLayout (table layout) and androidtablelayout

Basic tutorial for Android -- 2.2.3 TableLayout (table layout) and androidtablelayout
Basic Android tutorial -- 2.2.3 TableLayout (table layout)

Tags (separated by spaces): basic Android tutorial

This section introduces:

We have learned more about LinearLayout and RelativeLayout in actual development ),
In fact, it is enough to finish learning these two things. I also use these two things in actual development. Of course, as a studious programmer,
I like root farming, so although I don't use much, I still need to learn the basic usage. Maybe one day can be used!
If you say yes, you have nothing to learn! Let's get started with this section. We will learn this section.
The third layout in Android: TableLayout (table layout )!

1. This section describes the road map.

Roadmap analysis:
From the above roadmap, we can see that TableLayout is easy to use. It is nothing more than determining the number of rows in the table and using
The three attributes are used to hide, stretch, or contract the element in the first column of each row!

2. Introduction to TableLayout

I believe anyone who has learned HTML knows that we can generate an HTML table through <table> <tr> <td>,
In Android, we can also use tables to arrange components, that is, rows and columns. Let's talk about TableLayout in this section!
But it is not introduced after Android 4.0 as we will talk about later.GridLayout (GRID) LayoutSimilarly, you can directly set the number of rows and columns!

3. How to determine the number of rows and columns

• ① If we directly add a component to TableLayout, this component will occupy a full line !!!
• ② If we want to have multiple components on one line, we need to add a TableRow container to put all the components in it!
• ③ The number of components in tablerow determines the number of columns in the row, and the column width is determined by the widest cell in the column.
• ④ Layout_width attribute of tablerow. The default value is fill_parent. Setting it to another value will not take effect !!!
  However, layout_height is wrapten -- content by default, but we can set the size ourselves!
• ⑤ The layout width of the entire table depends on the width of the parent container (full of the parent container itself)
• ⑥ You need to count the number of rows, one tablerow row, and one single component row! The number of columns is in tableRow.
  The maximum number of components is the number of columns in TableLayout.

4. Three common attributes

Android: collapseColumns:RequiredHiddenColumn Number
Android: shrinkColumns:Set allowContractedColumn Number of the column
Android: stretchColumns:Set runStretchedColumn Number of the column

The column numbers of the preceding three attributes areStarts from 0.For example, shrinkColunmns = "2" corresponds to the third column!
YesSet multiple, UseSeparated by commasFor example, "", if it is all columnsBoth take effect, ThenUse "*"You can.
In addition to the three common attributes, there are two attributes, namely, the grid jumping and the cell merging, which are similar to the Table in HTML:

Android: layout_column= "2": indicatesSkipThe second entry is displayed directly at the third entry, starting from 1!
Android: layout_span= "4": Indicates ** merging ** 4 cells. This component occupies 4 cells.

Attribute usage example:

① CollapseColumns (hide columns)

Process: After defining five buttons in TableRow, add the following attributes in TableLayout:
Android: collapseColumns = "0, 2" indicates to hide the first and third columns. The Code is as follows:

<TableLayout          android:id="@+id/TableLayout2"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:collapseColumns="0,2" >          <TableRow>              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="one" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="two" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="three" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="four" />              <Button                  android:layout_width="wrap_content"                  android:layout_height="wrap_content"                  android:text="five" />          </TableRow>      </TableLayout>  

Run:

② StretchColumns (stretch column)

Process: set four buttons in TableLayout and add the following attributes in TableLayout:
Android: stretchColumns = "1"
Set the second column to stretch the column to fill all the space in the row. The Code is as follows:

<TableLayout        android:id="@+id/TableLayout2"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:stretchColumns="1" >        <TableRow>            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="one" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="two" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="three" />            <Button                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="four" />                     </TableRow>    </TableLayout>    

Run:

③ ShrinkColumns (shrink column)

Step: In order to demonstrate the effect, five buttons and a text box are set, and the following attributes are added to the TableLayout of the outermost layer:
Android: shrinkColumns = "1"
Set the second column to shrink the column. The Code is as follows:

<TableLayout android: id = "@ + id/TableLayout2" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: shrinkColumns = "1"> <TableRow> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "one"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "two"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "three"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "four"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "five"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "text XX"/> </TableRow> </TableLayout>

Run:

We can see that the two button is squashed into a bar, which is to shrink, to ensure that the table can adapt
Width of the parent container! As for the other two attributes, the usage is the same as that of HTML! If you are interested, study it!

5. Use instances

Use TableLayout to complete the simple logon interface. Run the following command:

Process Analysis:

① Call the gravity attribute and set it to center_vertical to center the components in the layout in the vertical direction.
② Set the first and fourth columns in TableLayout to stretch
③ Add two textviews to each TableRow to stretch and fill the row so that the table is horizontally centered.
Android: stretchColumns = "0.3" is set to make both sides full, so the middle part can be centered.

The Code is as follows:

<TableLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: id = "@ + id/TableLayout1" android: layout_width = "match_parent" android: layout_height = "match_parent" tools: context = ". mainActivity "android: stretchColumns =" 0, 3 "android: gravity =" center_vertical "android: background =" #66FF66 "> <TableRow> <TextView/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "username:"/> <EditText android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: minWidth = "150dp"/> <TextView/> </TableRow> <TextView/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Password:"/> <EditText android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: minWidth = "150dp"/> <TextView/> </TableRow> <TextView/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "login"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "exit"/> <TextView/> </TableRow> </TableLayout>

6. Problems Found

I believe you will encounter this warning when using this TableLayout TableRow:

Of course, the program can still run, but maybe you are an obsessive-compulsive disorder patient. If you see a yellow exclamation point, you will not be happy!
The solution to this warning is also amazing: As long as your TableLayout contains two or more TableRow!

Summary:

Okay, here is the third layout of Android: TableLayout ~ It is nothing more than the use of five attributes.
Table layout is not used much. You can simply use it!

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.