Android表格布局简单案例(附完整源码)

本博文是安卓的基础布局环节，没有高深度繁琐代码。先看下测试最终效果

测试效果

这就是将图片放进表格，比较直观。大家需要了解表格布局的精髓。

表格布局精髓

表格布局(TableLayout)是将页面划分成由行和列构成的单元格，由根元素TableLayout来标识。表格的行由TableRow来定义。由android:layout_column来指定列序号。

布局步骤

创建新Project

点进Project—>Empty Activity—>然后finish即可。成功之后，点击箭头运行程序。

默认配置的话，应该可以跑起来hello world。然后我们继续做下一个不走

上传图片资源

从网上照一张或者自己搞一张5050~7575之间的图片，任意但不要太大，格式任意，名字不要任意。名字英文！规范！初学者就取by吧(测试里用了by)

一定要拖到drawable，ok后，我们基础图片有了，直接上测试样例

布局测试源码

代码后对此作详细讲解。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TableRow>
        <ImageView android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat = "@drawable/by"/>

    </TableRow>


    <TableRow >
        <ImageView android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat = "@drawable/by"
            android:layout_column="1"
            />
        <ImageView android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:srcCompat = "@drawable/by"

            android:layout_column="2"/>
    </TableRow>
    <TableRow>
    <ImageView android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:srcCompat = "@drawable/by"
        android:layout_column="3"/>
    </TableRow>

</TableLayout>

TableLayout讲解

它是整一个表格布局页面，我们只是设置了它的width与height都是填充父元素

TableRow讲解

相当于excel的行单元格，只是包含，没有作详细的参数

ImageView讲解

width与height都是包含自己内容大小，图片路径是引用@drawable中的by，layout_column就是图片所处列的位置，默认从0开始，以此类推。会发现第二个TableRow有一个Colum= 1的参数，然后前面就有了一个图片大小的位置。就是这个道理

修改java类文件调用

一般按照默认配置，应该是这张图

然后启动程序，观察运行效果。

效果如图

总结

布局控制所需的步骤不是很多，步骤如下

• 搭建新类
• 上传资源图片
• 编辑布局代码
• 更改文件调用
• run测试效果
  表格布局就是将原先组件进行覆盖，后期基础学习都用线性布局，可以参考博主写的这个博文：
  Android基础小白线性布局简单案例(附完整源码)
  希望此博文对大家有帮助！