SoFunction
Updated on 2025-03-11

Detailed explanation of Android TableLayout table layout

The label of the table layout is TableLayout, which inherits LinearLayout. So it is still a linear layout.

Preface:

1. Introduction to TableLayout

2. Determination of the number of rows and columns of TableLayout

3. Detailed explanation of the properties that can be set by TableLayout

4. An example and effect diagram containing 4 TableLayout layouts

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
>
<!-- The1indivualTableLayout，Used to describe column properties in a table。The0Column stretchable，The1Columns can be shrinkable ，The2Columns are hidden-->
<TextView
android:text="Number Keyboard"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="20sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="1dip">
<TableRow>
<Button android:text="0"/>
<Button android:text="1"/>
<Button android:text="2"/>
<Button android:text="+"/>
<Button android:text="="/>
</TableRow>
<TableRow>
<Button android:text="3"/>
<Button android:text="4"/>
<Button android:text="5"/>
<Button android:text="-"/>
<Button android:text="*"/>
</TableRow>
<TableRow>
<Button android:text="6"/>
<Button android:text="7"/>
<Button android:text="8"/>
<Button android:text="9"/>
<Button android:text="/"/>
</TableRow>
</TableLayout>
</LinearLayout>

1. Introduction to Tablelayout

The Tablelayout class manages controls in the form of rows and columns, each behavior is a TableRow object, or a View control.
When it is a TableRow object, subcontrols can be added under TableRow, and by default, each subcontrol occupies one column.
When viewed, the View will occupy one row exclusively.

2. Determination of the number of rows and columns of TableLayout

The number of rows of TableLayout is directly specified by the developer, that is, the number of rows there are as many TableRow objects (or View controls).

The number of columns of TableLayout is equal to the number of columns of TableRow that contains the most subcontrols. If the first TableRow contains 2 subcontrols, the second TableRow contains 3, and the third TableRow contains 4, then the number of columns of the TableLayout is 4.

3. Detailed explanation of the properties that can be set by TableLayout

The properties that TableLayout can set include global properties and cell properties.

1. Global attributes, that is, column attributes, have the following 3 parameters:

android:stretchColumns Sets the stretchable column. The column can extend in the direction of the row and can occupy up to one entire row.

android:shrinkColumns Sets a shrinkable column. When the column subcontrol has too much content and has already filled the row, the content of the subcontrol will be displayed in the column direction.

android:collapseColumns Set the column to hide.

Example:

android:stretchColumns="0" Column 0 can be stretched

android:shrinkColumns="1,2" Columns 1 and 2 can shrink

android:collapseColumns="*" Hide all rows

Note: A column can have both stretchColumns and shrinkColumns properties. If so, when there are N contents of the column, the contents of "multiple rows" will be displayed. (This is not a real multi-row here, but the system automatically adjusts the layout_height of the line as needed)

2. Cell properties have the following 2 parameters:

android:layout_column Specifies which column the cell is displayed in
android:layout_span Specifies the number of columns occupied by this cell (if not specified, it is 1)

Example:

android:layout_column="1" This control is displayed in column 1
android:layout_span="2" This control occupies 2 columns

Note: A control can also have these two features at the same time.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="3dip"
>
<!-- The1indivualTableLayout，Used to describe column properties in a table。The0Column stretchable，The1Columns can be shrinkable ，The2Columns are hidden-->
<TextView
android:text="Table 1: Global Settings: Column Properties Settings"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0"
android:shrinkColumns="1"
android:collapseColumns="2"
android:padding="3dip">
<TableRow>
<Button android:text="This column is stretchable"/>
<Button android:text="The column can be shrinkable"/>
<Button android:text="I'm hidden"/>
</TableRow>
<TableRow>
<TextView android:text="I stretch in the direction of the road, I can be very long."/>
<TextView android:text="I shrink in the nematic direction, I can be very deep"/>
</TableRow>
</TableLayout>
<!-- The2indivualTableLayout，Properties used to describe cells in tables，include：android:layout_column andandroid:layout_span-->
<TextView
android:text="Table 2: Cell Settings: Specify Cell Properties Settings"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dip">
<TableRow>
<Button android:text="Column 0"/>
<Button android:text="Column 1"/>
<Button android:text="Column 2"/>
</TableRow>
<TableRow>
<TextView android:text="I'm assigned in column 2" android:layout_column="2"/>
</TableRow>
<TableRow>
<TextView
android:text="I cross columns 1 to 2, if you don't believe me, please look!"
android:layout_column="1"
android:layout_span="2"
/>
</TableRow>
</TableLayout>
<!-- The3indivualTableLayout，Layout with scalable features-->
<TextView
android:text="Table 3: Application 1, Inhomogeneous Layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="one" ></Button>
<Button android:text="Two words"></Button>
<Button android:text="Three Words" ></Button>
</TableRow>
</TableLayout>
<!-- The4indivualTableLayout，Use stretchable features，并指定每indivual控件宽度一致，like1dip-->
<TextView
android:text="Table 4: Application 2, uniform layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="3dip"
>
<TableRow>
<Button android:text="one" android:layout_width="1dip"></Button>
<Button android:text="Two words" android:layout_width="1dip"></Button>
<Button android:text="Three Words" android:layout_width="1dip"></Button>
</TableRow>
</TableLayout>
<TextView
android:text="Table 5: Application Three, Uniform Layout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="15sp"
android:background="#7f00ffff"/>
<TableLayout
android:
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:padding="6dip"
>
<TableRow>
<Button android:text="one" android:layout_width="1dip"></Button>
<Button android:text="Two words" android:layout_width="1dip"></Button>
<Button android:text="Three Words" android:layout_width="1dip"></Button>
<Button android:text="Four words" android:layout_width="1dip"></Button>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="1dip"
android:layout_height="wrap_content"
android:text="New Button"
android: />
</TableRow>
</TableLayout>
</LinearLayout>

The above content is the Android TableLayout table layout introduced by Xiaobi to you. I hope it will be helpful to everyone!