Android 好看的表格控件实现流程

引言

在 Android 开发中,实现一个好看的表格控件是一项常见的需求。本文将介绍如何实现一个好看的表格控件,并给出每一步所需的代码和注释。

整体流程

下面是实现一个好看的表格控件的整体流程:

journey
    title 实现好看的表格控件流程
    section 创建表格布局
    section 绘制表格样式
    section 添加数据到表格

创建表格布局

第一步是创建表格的布局。可以使用 TableLayout 作为容器,并使用 TableRow 表示每一行。在布局文件中添加以下代码:

<TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*">
    <!-- 行 1 -->
    <TableRow>
        <!-- 列 1 -->
        <TextView
            android:text="列 1"
            android:padding="8dp"/>
        <!-- 列 2 -->
        <TextView
            android:text="列 2"
            android:padding="8dp"/>
        <!-- 列 3 -->
        <TextView
            android:text="列 3"
            android:padding="8dp"/>
    </TableRow>
    <!-- 行 2 -->
    <TableRow>
        <!-- 列 1 -->
        <TextView
            android:text="数据 1"
            android:padding="8dp"/>
        <!-- 列 2 -->
        <TextView
            android:text="数据 2"
            android:padding="8dp"/>
        <!-- 列 3 -->
        <TextView
            android:text="数据 3"
            android:padding="8dp"/>
    </TableRow>
</TableLayout>

以上代码创建了一个简单的表格布局,包含两行和三列,每个单元格都是一个 TextView

绘制表格样式

第二步是为表格添加样式,使其看起来更好看。可以使用 shapeselector 来自定义背景和状态。在 res/drawable 文件夹下创建 table_background.xml 文件,添加以下代码:

<selector xmlns:android="
    <!-- 默认状态 -->
    <item>
        <shape android:shape="rectangle">
            <!-- 圆角 -->
            <corners android:radius="8dp"/>
            <!-- 背景颜色 -->
            <solid android:color="#FFFFFF"/>
            <!-- 边框 -->
            <stroke
                android:color="#000000"
                android:width="1dp"/>
        </shape>
    </item>
    <!-- 按下状态 -->
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <!-- 圆角 -->
            <corners android:radius="8dp"/>
            <!-- 背景颜色 -->
            <solid android:color="#CCCCCC"/>
            <!-- 边框 -->
            <stroke
                android:color="#000000"
                android:width="1dp"/>
        </shape>
    </item>
</selector>

然后在布局文件中为 TableLayout 设置背景:

<TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:stretchColumns="*"
    android:background="@drawable/table_background">
    <!-- ... -->
</TableLayout>

以上代码将为表格添加圆角、边框和状态变化。

添加数据到表格

第三步是添加数据到表格。可以动态地在代码中创建 TableRowTextView,并设置数据。在代码文件中添加以下代码:

TableLayout tableLayout = findViewById(R.id.tableLayout);

// 创建标题行
TableRow headerRow = new TableRow(this);
tableLayout.addView(headerRow);

// 添加标题列
TextView headerColumn1 = new TextView(this);
headerColumn1.setText("列 1");
headerColumn1.setPadding(8, 8, 8, 8);
headerRow.addView(headerColumn1);

TextView headerColumn2 = new TextView(this);
headerColumn2.setText("列 2");
headerColumn2.setPadding(8, 8, 8, 8);
headerRow.addView(headerColumn2);

TextView headerColumn3 = new TextView(this);
headerColumn3.setText("列 3");
headerColumn3.setPadding(8, 8, 8, 8);
headerRow.addView(headerColumn3);

// 创建数据行
TableRow dataRow = new TableRow(this);
tableLayout.addView(dataRow);

// 添加数据列
TextView dataColumn1 = new