Android UI 实现表格布局

在android布局中我们都比较了解表单布局，但是很多时候我们在进行表达布局时为了是UI更加像表格，时我们都比较棘手了因为android提供的表格布局是没有表格线的。那么今天的这篇帖子将为你解决表格线的显示。先我们来看看效果

其实这样是非常简单的。我们首先需要用到当然是TableLayout 。因为是表单布局嘛，这里不做过多的解释，然后还有用到TableRow来控制行，每行里面就可以 通过其他View来实现我们想要的方格，下面直接上代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 >
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5.0sp"
        android:layout_marginRight="5.0sp"
        android:layout_marginTop="10.0sp"
        android:stretchColumns="1" >

        
<!--TableRow 表示行，每行里面就可以 通过其他View来实现我们想要的方格-->
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ff000000" >

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:text="表格布局带表格线"
                android:textColor="#ff000000"
                android:textSize="25.0sp"
                android:textStyle="bold" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ff000000" >

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginTop="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:text="第一行"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/delivercompanyname"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginTop="1.0dip"
                android:layout_weight="1.0"
                android:text="第二行"
                android:background="#ffffffff"
                android:gravity="center"
                android:textColor="#ff000000" />

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginTop="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
               android:text="第三行"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/repairtime"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginRight="1.0dip"
                android:layout_marginTop="1.0dip"
                android:layout_weight="1.0"
                android:text="第四行"
                android:background="#ffffffff"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="#ff000000" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ff000000" >

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/hphm"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="#ff000000" />

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/ppxh"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginRight="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="#ff000000" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ff000000" >

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/fdjh"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:ellipsize="marquee"
                android:textColor="#ff000000" />

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/dph"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginRight="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:ellipsize="marquee"
                android:gravity="center"
                android:textColor="#ff000000" />
        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#ff000000" >

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/miles"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:inputType="numberSigned"
                android:textColor="#ff000000" />

            <TextView
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:padding="6.0dip"
                android:textColor="#ff000000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/lastrepairtime"
                android:layout_width="0.0dip"
                android:layout_height="fill_parent"
                android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginRight="1.0dip"
                android:layout_weight="1.0"
                android:background="#ffffffff"
                android:gravity="center"
                android:textColor="#ff000000" />
        </TableRow>
</TableLayout>
</RelativeLayout>

从代码中我们可以看出其实主要是TableRow 中android:background="#ff000000"背景设置成了黑色，当我们在需要添加TextView时 通过                

android:layout_marginBottom="1.0dip"
                android:layout_marginLeft="1.0dip"
                android:layout_marginTop="1.0dip"
android:background="#ffffffff"

来设置它背景为白色，通过与上边缘下边缘左边缘相隔1dip，这样就实现了表格有了表格线，其实原理就时叠加的方式，当最下面有一个大黑色的背景，上面在一个白色背景重叠并且白色背景的小于黑色背景这样就出现了表格线，我们如果要设置表格线的粗细只需设置他们相隔多少dip就行

你有什么问题或者第一时间获得博客更新提醒，以及更多技术信息分享，欢迎关注我的微信公众号，扫一扫下方二维码或搜索微信号 day365game，即可关注，并回复你遇到的问题我们将帮助你。