Android Basics Getting Started tutorial--2.2.3 tablelayout (table layout)

Android Basics Getting Started tutorial--2.2.3 tablelayout (table layout)

tags (space delimited): Android Basics Getting Started Tutorial

Introduction to this section:

We have studied the linear layout (linearlayout) and relative layout (relativelayout) that are used in the actual development,
In fact, the completion of these two basic enough, the author in the actual development of the use of more than this two, of course, as a studious program ape,
are like root planing problem, so although not used much, but it is necessary to learn the basic usage, perhaps one day can use it!
You say yes, learn more things nothing, and not suffer! All right, that's it. Let's start this section of the study, this section we will learn
Third layout in Android: tablelayout (table layout)!

1. The Learning roadmap for this section

Road Map Analysis:
From the road map above, it can be seen that the usage of tablelayout is simple enough to determine the number of rows in a table, and to use
The three attributes to set the elements of the column in each row are hidden, stretched, or shrunk!

Introduction of 2.TableLayout

I believe that the friends who have studied HTML know that we can generate an HTML table by < table >< TR >< td >
And Android also allows us to use tables to arrange the components, that is, the way the row and column, we say this section of the tablelayout!
But unlike the GridLayout (grid) layout that we'll be talking about after Android 4.0, you can set how many rows and columns are directly available!

3. How to determine the number of rows and columns

• ① If we add components directly to the tablelayout, then this component will take up a line!!!
• ② if we want to have multiple components on one line, we need to add a TableRow container and throw the components inside!
• The number of components in a ③tablerow determines how many columns the row has, and the width of the column is determined by the widest cell in the column
• ④tablerow the Layout_width property, the default is Fill_parent, we set the other value ourselves will not be effective!!!
  But layout_height default is wrapten--content, but we can set their own size!
• ⑤ the width of the entire table layout depends on the width of the parent container (which fills the parent container itself)
• ⑥ How many lines will be counted, a tablerow line, a separate component is also a row! The number of columns is to see the TableRow
  Number of components, most of which are tablelayout columns

4. Three Common Properties

android:collapsecolumns: Set the ordinal of a column that needs to be hidden
Android:shrinkcolumns: Sets the column ordinal of the column that is allowed to be shrunk
Android:stretchcolumns: Sets the column ordinal of the column that is being stretched

The above three properties of the column numbers are calculated from 0 , such as Shrinkcolunmns = "2", corresponding to the third column!
You can set multiple , separated by commas such as "0,2", if all the columns are in effect , then use the "*" Number
In addition to these three commonly used properties, there are two properties, namely, jump lattice and merge cells, which are similar to the table in HTML:

android:layout_column= "2": Means to skip the second, directly displayed to the third grid, starting from 1 to calculate!
Android:layout_span= "4": Represents * * Merging **4 cells, which means that the component is 4 cells

Examples of property use:

①collapsecolumns (hidden column)

Process: After defining 5 buttons in TableRow, add the following properties to the outermost tablelayout:
Android:collapsecolumns = "0,2", is to hide the first and third columns, the code is as follows:

<tablelayoutandroid:id="@+id/tablelayout2"android:layout_width=  "Fill_parent"android:layout_height= "wrap_content"android:collapsecolumns=" 0,2 " >                                                  <TableRow>              <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="One" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Both" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="three" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Four" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Five" />                                                                </TableRow>      </tablelayout>  

Run:

②stretchcolumns (La Pille)

Process: Set four buttons in Tablelayout, then add the following properties to the outermost tablelayout:
Android:stretchcolumns = "1"
Set the second column to stretch the columns so that the column fills all the remaining space in the line, with the following code:

<tablelayoutandroid:id="@+id/tablelayout2"android:layout_width=  "Fill_parent"android:layout_height="Wrap_content"android:stretchcolumns="1 " >                                        <TableRow>            <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="One" />                                                            <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Both" />                                                            <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="three" />                                                            <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Four" />                                                                     </TableRow>    </tablelayout>    

Run:

③shrinkcolumns (Shrink column)

Step: Here to demonstrate the effect, set up 5 buttons and a text box to add the following properties to the outermost tablelayout:
Android:shrinkcolumns = "1"
Set the second column to shrink columns with the following code:

<tablelayoutandroid:id="@+id/tablelayout2"android:layout_width=  "Fill_parent"android:layout_height="Wrap_content"android:shrinkcolumns=  "1" >                                                  <TableRow>              <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="One" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Both" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="three" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="Four" />                                                                    <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Five" />                                                                    <TextViewandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:text="text xx" />                                                                </TableRow>      </tablelayout>  

Run:

We can see that the button is squeezed into strips, this is contraction, in order to ensure that the table can adapt
The width of the parent container! As for the other two attributes are not explained, the usage and the same HTML! Interested can study under!

5. Usage examples

Using Tablelayout to complete the simple login interface, run as follows:

Process Analysis:

① Call the Gravity property, set to Center_vertical, so that the components inside the layout are centered in the vertical direction
② sets the first and fourth columns in the tablelayout to be stretched
③ adds two textview to each TableRow to stretch and fill the row so that the table is centered horizontally
Android:stretchcolumns= "0,3" is set to 0.3 so that both sides are filled, then the middle part can be centered

The detailed 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 />            <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="user name:"/>                                                             <EditTextandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" android:minwidth="150DP"/>                                                             <TextView />        </TableRow>        <TableRow>            <TextView />            <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Password:" />                                                             <EditTextandroid:layout_width="Wrap_content"android:layout_height ="Wrap_content"android:minwidth="150DP" />                                                             <TextView />        </TableRow>        <TableRow>            <TextView />            <buttonandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" Android:text="Login"/>                                                             <buttonandroid: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 perhaps you are obsessive-compulsive patients, see the yellow exclamation point you are uncomfortable!
And the solution to this warning is also very wonderful: as long as your tablelayout inside there are 2 or more tablerow on it!

This section summarizes:

OK, about the third layout of Android: Tablelayout is here ~ is the use of five attributes, the actual development
Table layout We do not use much, know the simple usage can be!

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Android Basics Getting Started tutorial--2.2.3 tablelayout (table layout)