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基礎小白線性布局簡單案例(附完整源碼)

  希望此博文對大家有幫助！