【Android開發】TableLayout 數據表格化展示

目前沒有找到比較好的數據表格化顯示方案，使用TableLayout算是比較方便且好用的了。

這裏主要使用TableLayout加動態TextView來完成界面的繪製。在xml佈局文件中，只需要準備TableLayout組件即可；爲了防止數據字段以及數據項較多，使用ScrollView進行包裹，這樣可以進行上下左右滑動。代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="15dp"
        android:text="工具輔料"
        android:gravity="center_horizontal"
        android:textSize="30sp"/>


    <ScrollView

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tv_title"
        android:focusable="true"
        android:focusableInTouchMode="true">

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:focusable="true"
            android:focusableInTouchMode="true">

            <TableLayout

                android:id="@+id/tbl_material"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingVertical="10dp"
                android:paddingHorizontal="20dp"
                android:focusable="true"
                android:focusableInTouchMode="true">


            </TableLayout>

        </HorizontalScrollView>

    </ScrollView>

</RelativeLayout>

其他的繪製工作在Java代碼中動態完成。

首先我們需要準備好數據的列表，本例中需要顯示的是工具輔料信息，類MaterialInfo中記錄了輔料名、對應班組、庫存量、最小最大值等信息。

然後需要對錶頭和主體分別繪製，爲了方便，全部放在for循環內實現，flag爲表頭標識，繪製完表頭後即可設爲false。

TableLayout是由一個個TableRow（行）組成的，其格式可由setLayoutParams來設置，具體可參見文檔。

在TableRow之下，可以想象爲單元格，每個單元格我們用TextView組件實現，對於TextView我們可以設置其文字內容、字體顏色、背景色、大小、上下左右間距等等屬性。

要注意的是，每設置好一個單元格，就要加入對應行，每設置好一行，就要加入表格。

另外，使用一個簡單的有背景色的View組件來作爲行與行之間的框線。具體代碼如下：

//最外層聲明
private TableLayout mTblMaterial;

//onCreate函數內綁定
mTblMaterial = findViewById(R.id.tbl_material);


private void setView(List<MaterialInfo> materialList) {
    boolean flag = true;
    for (int i = -1; i < materialList.size(); ++i) {
        TableRow tr = new TableRow(WorkerToolsActivity.this);
        tr.setLayoutParams(new TableRow.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
        ));

        if (flag) {

            TextView t = new TextView(WorkerToolsActivity.this);
            t.setText("班組");
            t.setGravity(Gravity.CENTER_HORIZONTAL);
            t.setTextColor(Color.BLUE);
            t.setPadding(0, 5, 5, 5);
            t.setTextSize(22);
            tr.addView(t);

            t = new TextView(WorkerToolsActivity.this);
            t.setText("輔料");
            t.setGravity(Gravity.CENTER_HORIZONTAL);
            t.setPadding(20, 5, 5, 5);
            t.setTextColor(Color.BLUE);
            t.setTextSize(22);
            tr.addView(t);

            t = new TextView(WorkerToolsActivity.this);
            t.setText("庫存量");
            t.setGravity(Gravity.CENTER_HORIZONTAL);
            t.setPadding(20, 5, 5, 5);
            t.setTextColor(Color.BLUE);
            t.setTextSize(22);
            tr.addView(t);

            t = new TextView(WorkerToolsActivity.this);
            t.setText("最小值");
            t.setGravity(Gravity.CENTER_HORIZONTAL);
            t.setPadding(20, 5, 5, 5);
            t.setTextColor(Color.BLUE);
            t.setTextSize(22);
            tr.addView(t);

            t = new TextView(WorkerToolsActivity.this);
            t.setText("最大值");
            t.setGravity(Gravity.CENTER_HORIZONTAL);
            t.setPadding(20, 5, 5, 5);
            t.setTextColor(Color.BLUE);
            t.setTextSize(22);
            tr.addView(t);

            mTblMaterial.addView(tr);

            final View vline = new View(WorkerToolsActivity.this);
            vline.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 2));
            vline.setBackgroundColor(Color.BLUE);

            mTblMaterial.addView(vline);

            flag = false;
        } else {
            TextView t2 = new TextView(WorkerToolsActivity.this);
            t2.setText(materialList.get(i).getGroup_name());
            t2.setPadding(0, 5, 5, 5);
            t2.setTextColor(Color.BLACK);
            t2.setTextSize(20);
            tr.addView(t2);

            t2 = new TextView(WorkerToolsActivity.this);
            t2.setText(materialList.get(i).getMaterial_name());
            t2.setPadding(20, 5, 5, 5);
            t2.setTextColor(Color.BLACK);
            t2.setTextSize(20);
            tr.addView(t2);

            t2 = new TextView(WorkerToolsActivity.this);
            Log.d(TAG, "setView: " + materialList.get(i).getAmount());
            t2.setText("" + materialList.get(i).getAmount());
            t2.setPadding(20, 5, 5, 5);
            t2.setTextColor(Color.BLACK);
            if (materialList.get(i).getAmount() < materialList.get(i).getMin())
                t2.setBackgroundColor(Color.RED);
            t2.setTextSize(20);
            tr.addView(t2);

            t2 = new TextView(WorkerToolsActivity.this);
            t2.setText("" + materialList.get(i).getMin());
            t2.setPadding(20, 5, 5, 5);
            t2.setTextSize(20);
            tr.addView(t2);

            t2 = new TextView(WorkerToolsActivity.this);
            t2.setText("" + materialList.get(i).getMax());
            t2.setPadding(20, 5, 5, 5);
            t2.setTextSize(20);
            tr.addView(t2);

            mTblMaterial.addView(tr);

            final View vline = new View(WorkerToolsActivity.this);
            vline.setLayoutParams(new TableRow.LayoutParams(TableRow.LayoutParams.MATCH_PARENT, 1));
            vline.setBackgroundColor(Color.BLACK);

            mTblMaterial.addView(vline);
        }
    }
}