2.2.3 TableLayout(表格布局)

❮ Android Tutorial Vibrator Octotree Github Repo ❯

2.2.3 TableLayout(表格布局)

Category Android Basic Tutorial

Introduction:

Previously, we have learned about LinearLayout and RelativeLayout, which are commonly used in actual development. In fact, mastering these two layouts is sufficient for most scenarios. The author personally uses these two layouts frequently in actual development. However, as an inquisitive programmer, it's always good to delve deeper into topics, even if they are not frequently used. You never know when they might come in handy! Right? Learning more doesn't hurt! Now, let's move on to this section where we will learn about Android's third layout: TableLayout!

1. Learning Roadmap

Roadmap Analysis: From the above roadmap, it's clear that the usage of TableLayout is quite straightforward. Essentially, it involves determining the number of rows and using three attributes to set the visibility, stretching, or shrinking of elements in specific columns.

2. Introduction to TableLayout

As those familiar with HTML know, we can create an HTML table using <table>, <tr>, and <td>. Android also allows us to arrange components in a tabular format, i.e., in rows and columns, which is what TableLayout does. However, unlike the GridLayout introduced in Android 4.0, TableLayout does not allow direct setting of the number of rows and columns.

3. Determining the Number of Rows and Columns

① If we directly add components to TableLayout, each component will occupy a full row.
② To have multiple components in one row, we need to add a TableRow container and place the components inside it.
③ The number of components in a TableRow determines the number of columns in that row, and the width of each column is determined by the widest cell in that column.
④ The layout_width attribute of TableRow defaults to fill_parent, and setting it to other values won't take effect. However, layout_height defaults to wrap_content, and we can set its size.
⑤ The width of the entire TableLayout depends on the width of its parent container (it fills the parent container).
⑥ The number of rows is determined by the number of TableRows or standalone components. The number of columns is determined by the maximum number of components in any TableRow.

4. Three Common Attributes

android:collapseColumns: Sets the indices of columns to be hidden. android:shrinkColumns: Sets the indices of columns allowed to be shrunk. android:stretchColumns: Sets the indices of columns allowed to be stretched.

These attributes start counting columns from 0. For example, shrinkColumns = "2" refers to the third column. To set multiple columns, separate them with commas, e.g., "0,2". To apply to all columns, use the "*" symbol.

android:layoutcolumn ="2": Skips the second column and displays the component in the third column (counting from 1). android:layoutspan ="4": Merges four cells, meaning the component occupies four cells.

Attribute Usage Examples:

① collapseColumns (Hiding Columns)

Process: After defining 5 buttons in a TableRow, add the following attribute to the outer TableLayout: android:collapseColumns = "0,2" (hides the first and third columns).

<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>

② stretchColumns (Stretching Columns)

Process: After setting up four buttons in a TableLayout, add the following attribute to the outer TableLayout: android:stretchColumns = "1" (sets the second column to be stretchable).

<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>

③ shrinkColumns (Shrinking Columns)

Process: To demonstrate the effect, set up five buttons and a text view. Add the following attribute to the outer TableLayout: android:shrinkColumns = "1" (sets the second column to be shrinkable).

<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>

5. Practical Example

Using TableLayout to create a simple login interface. The running effect is as follows:

Process Analysis:

① Use the gravity attribute, set to center_vertical, to center the components vertically within the layout. ② Set the first and fourth columns in TableLayout to be stretchable.

③ Add two TextView elements in each TableRow to stretch and fill the row, allowing the table to be horizontally centered.

Setting android:stretchColumns="0,3" to 0,3 is to fill both sides, so the middle part can be centered.

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 />    
        <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>    

    <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>    

    <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. Identified Issues

It's likely that you'll encounter a warning when using TableRow in TableLayout:

The program can still run, but if you're a perfectionist and the yellow warning sign bothers you, the solution is quite peculiar: simply ensure your TableLayout contains two or more TableRow elements!

Summary of This Section:

That concludes our discussion on Android's third layout: TableLayout. It's just about using five attributes, and we don't often use table layouts in actual development; knowing the basics is sufficient!

-1.0 Android Basic Beginner Tutorial

-1.0.1 2015 Latest Android Basic Beginner Tutorial Contents

-1.1 Background and System Architecture Analysis

-1.2 Development Environment Setup

-1.2.1 Developing Android APP with Eclipse + ADT + SDK

-1.2.2 Developing Android APP with Android Studio

-1.3 Solving SDK Update Issues

-1.4 Genymotion Emulator Installation

-1.5.1 Git Tutorial for Basic Local Repository Operations

-1.5.2 Git: Setting Up a Remote Repository on GitHub

-1.6 How to Use the 9-Patch Image

-1.7 Interface Prototype Design