TableLayout (table layout)


Introduction to this section:

We have previously learned about Linear Layout (LinearLayout) and Relative Layout (RelativeLayout), which are commonly used in actual development. In fact, learning these two is basically enough. The author uses these two more in actual development. Of course, as a programmer who loves to learn, They all like to dig into root problems, so although they don’t use it much, it is still necessary to learn the basic usage. Maybe one day you will be able to use it! You think so, it’s okay to learn more things, and you won’t suffer any disadvantages! Okay, let’s stop talking nonsense and start studying this section. In this section we will learn The third layout in Android: TableLayout (table layout)!

Learning roadmap for this section

1.jpg

##Roadmap analysis:From the above roadmap, you can see The usage of TableLayout is still very simple. It is nothing more than determining the number of rows in the table and using Just use those three attributes to set the element of a certain column in each row to hide, stretch, or shrink!

2. Introduction to TableLayout

I believe friends who have learned HTML know that we can use < table >< tr >< td > can generate an HTML table, Android also allows us to use tables to arrange components, that is, rows and columns, let’s talk about TableLayout in this section! But it’s not like the

GridLayout (grid) layout introduced after Android 4.0 that we will talk about later. You can directly set how many rows and columns you want!

3. How to determine the number of rows and columns

  • ① If we add a component directly to TableLayout, then this component will be full One line! ! !

  • ② If we want to have multiple components on a row, we need to add a TableRow container and throw all the components into it!

  • ③The number of components in tablerow determines how many columns there are in the row, and the width of the column is determined by the widest cell in the column

  • ④The layout_width attribute of tablerow defaults to fill_parent, and it will not take effect if we set it to other values ​​ourselves! ! ! But layout_height defaults to wrapten-content, but we can set the size ourselves!

  • ⑤The width of the entire table layout depends on the width of the parent container (filling the parent container itself)

  • ⑥How many rows there are? Just count, there is one row for each tablerow, and one row for each individual component! How many columns are in tableRow? The number of components, the largest number of components is the number of columns of TableLayout

4. Three common attributes

android:collapseColumns: Set the sequence number of the column that needs to be hidden
android:shrinkColumns:Set the column sequence number of the column that is allowed to be shrunk
android:stretchColumns:Set the column number of the column that runsis stretched

The column numbers of the above three attributes are starting from 0, for example, shrinkColunmns = "2", corresponding to the third column! You can
set multiple , separated by commas such as "0,2", if all columns are valid , then use " *"In addition to these three common attributes, there are two attributes, namely skipping grids and merging cells, which are similar to Table in HTML:

android:layout_column="2": means skips the second one and displays it directly to the third grid, counting from 1!
android:layout_span ="4": means merging 4 cells, which means this component occupies 4 cells

Example of property usage:

①collapseColumns (hidden column)

Process: After defining 5 buttons in TableRow, then add the following attributes to the outermost TableLayout: android:collapseColumns = "0,2" means hiding 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>

Running rendering:

2.jpg

②stretchColumns(stretch column)

Process: Four buttons are set in TableLayout, and then in the outermost layer Add the following properties to the TableLayout: android:stretchColumns = "1"

Set the second column to be a stretchable column so that the column fills all the remaining space in this 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>

Running renderings:

3.jpg

③shrinkColumns(shrink columns)

Steps: In order to demonstrate the effect, 5 buttons and a text box are set up here , add the following attributes to the outermost TableLayout: android:shrinkColumns = "1"

Set the second column to be a shrinkable 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="文本XX" />  
    </TableRow>  
</TableLayout>

Running screenshot:

4.jpg

From the picture we can see that the two button is squeezed into strips. This is shrinkage, in order to ensure that the table can adapt The width of the parent container! As for the other two attributes, I won’t explain them. Their usage is the same as in HTML! If you are interested, you can research it!

5. Usage example

Use TableLayout to complete a simple login interface. The running effect is as follows:

5.jpg

Process analysis:

① Call the gravity attribute and set it to center_vertical to center the components in the layout vertically

② Change the first and second elements in TableLayout Set the fourth column to be stretchable

③Add two TextViews to each TableRow to stretch and fill the row, so that the table can be centered horizontally

android:stretchColumns= "0,3" is set to 0.3 to fill both sides so that 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="../style/images/android-tutorial-tablelayout.html"    
    >    
        
    <TableRow>    
        <TextView />    
        <TextView     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="用户名:"/>    
        <EditText     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:minWidth="150dp"/>    
        <TextView />    
    </TableRow>    
        
    <TableRow>    
        <TextView />    
        <TextView     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="密  码:"        
        />    
        <EditText     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:minWidth="150dp"        
        />    
        <TextView />    
    </TableRow>    
        
    <TableRow>    
        <TextView />    
        <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="退出"/>    
        <TextView />    
    </TableRow>    
        
</TableLayout>

6. Problems found

I believe everyone will encounter this warning when using the TableRow of this TableLayout:

6.png

Of course, the program can still run, but maybe you are a patient with obsessive-compulsive disorder and you are unhappy when you see the yellow exclamation mark! The way to solve this warning is also very strange: as long as there are 2 or more TableRows in your TableLayout!

Summary of this section:

Okay, that’s it for the third layout of Android: TableLayout~it’s nothing more than the use of five attributes, actual development We don’t use table layout much, just know the simple usage and that’s it!