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
。
绘制表格样式
第二步是为表格添加样式,使其看起来更好看。可以使用 shape
和 selector
来自定义背景和状态。在 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>
以上代码将为表格添加圆角、边框和状态变化。
添加数据到表格
第三步是添加数据到表格。可以动态地在代码中创建 TableRow
和 TextView
,并设置数据。在代码文件中添加以下代码:
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