New UI-Details of layout TableLayout (table layout), ui-tablelayout

New UI-Details of layout TableLayout (table layout), ui-tablelayout

Details about New UI-layout TableLayout (table layout)

-- Reprinted please indicate the source: coder-pig. You are welcome to repost it. Please do not use it for commercial purposes!

The piggy Android development and exchange group has been established. You are welcome to join us. You can be a newbie, cainiao, or a great god.

After all, the power is limited. There will certainly be a lot of flaws in writing. You are welcome to point out, brainstorm, And let pig's blog post.

For more details, help more people, O (∩ _ ∩) O thank you!

Piggy Android Development Exchange Group: Piggy Android Development Exchange Group No.: 421858269

New Android UI instance Daquan Directory: http://blog.csdn.net/coder_pig/article/details/42145907

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!

However, unlike the GridLayout (GRID) Layout introduced after Android 4.0 we will talk about later, we 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: Set the sequence number of the column to be hidden
Android: shrinkColumns: Set the column number of the columns that can be shrunk
Android: stretchColumns: Set the column number of the columns to be stretched.
The column numbers of the above three attributes are calculated from 0. For example, shrinkColunmns = "2" corresponds to the third column!

You can set multiple columns separated by commas (,), for example, "". If all columns take effect, use "*".

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": Indicates skipping the second entry and directly displaying it to the third entry. It starts from 1!
Android: layout_span = "4": merges four cells. This component occupies four cells.

Property Demonstration:

① CollapseColumns (hide columns)

Process: After defining five buttons in TableRow, add the following attributes in TableLayout:

Android: collapseColumns = "" 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) instances used:

Use TableLayout to complete the simple logon interface:

Run:

Process Analysis:

Process description:
① 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. Some Problems

① I believe you will encounter this warning when using the 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!

Well, this section is here. Most of the content in the previous TableLayout article is still available. If you find any flaws in this article,

Or something that is not well written. Thank you! (* ^__ ^ *) Xi...