android 使用TableLayout 绘制表格

前言

在android开发中 有时候要绘制表格，这时候我们就想到了tablelayout布局了。

话不多说 直接看效果图

关键代码：

        android:divider="@drawable/line_h"
        android:showDividers="beginning|middle|end"

所有继承LinearLayout的布局都可以使用这个两个属性

 注意divider只能是shape不能是color

line_h.xml文件代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:width="1dp" android:height="1dp"/>

    <solid android:color="@android:color/holo_red_light" />

</shape>

布局文件代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="net.sytm.tablelayout.MainActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="*"
        android:divider="@drawable/line_h"
        android:showDividers="beginning|middle|end"
        android:orientation="vertical">

        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end"
            android:orientation="horizontal">
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="标题一"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="标题一"
                android:gravity="center"/>
        </TableRow>
        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end">
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="内容"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="内容"
                android:gravity="center"/>
        </TableRow>
        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end">
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="内容"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:layout_width="1dp"
                android:text="内容"
                android:gravity="center"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

针对部分 开发者反应 表格右侧 没有表格线 

原因是使用了 如下属性 

 android:stretchColumns="*"

修改后的xml布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:divider="@drawable/line_h"
        android:showDividers="beginning|middle|end"
        android:orientation="vertical"
        android:padding="10dp">

        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end"
            android:orientation="horizontal">
            <TextView
                android:padding="8dp"
                android:text="标题一"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:text="标题一"
                android:gravity="center"/>
        </TableRow>
        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end">
            <TextView
                android:padding="8dp"
                android:text="内容"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:text="内容"
                android:gravity="center"/>
        </TableRow>
        <TableRow
            android:divider="@drawable/line_h"
            android:showDividers="beginning|middle|end">
            <TextView
                android:padding="8dp"
                android:text="内容"
                android:gravity="center"/>
            <TextView
                android:padding="8dp"
                android:text="内容"
                android:gravity="center"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

效果图如下