如何使用標題和網格線創建自定義表格布局

Question

我幾乎花了整個周末來弄清楚如何創建一個帶有列和行標題的表格結構，並在表格的單元格中包含ImageButtons 。 網格線應該是可見的。 我嘗試了很多不同的布局... Grid 、 Linear 、 Structured 、 CoordinatorLayout .... 查看嵌套的GridViews等等。 但是不知道如何完成這樣的事情？

某種嵌套布局魔法？

Answer 1

創建一個可繪制的cell_shape.xml

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

    <stroke android:width="0.5dp"  android:color="#4E4E4E"/>
</shape>

在你的styles.xml 中定義你的自定義單元格樣式

 <style name="Cell">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@drawable/cell_shape</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
        <item name="android:textSize">12sp</item>
    </style>

table_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
        android:layout_height="wrap_content">
        <TableRow>
            <TextView
                style="@style/Cell"
                android:text="\"
                android:textStyle="bold" />

            <TextView
                style="@style/Cell"
                android:text="My Title 1"
                android:textStyle="bold" />

            <TextView
                style="@style/Cell"
                android:text="My Title 2"
                android:textStyle="bold" />

            <TextView
                style="@style/Cell"
                android:text="My Title 3"
                android:textStyle="bold" />
        </TableRow>

        <TableRow>
            <TextView
                style="@style/Cell"
                android:text="Arg 1"
                android:textStyle="bold" />

            <ImageButton
                style="@style/Cell"
                android:src="@mipmap/ic_launcher" />

            <ImageButton
                style="@style/Cell"
                android:src="@mipmap/ic_launcher" />

            <ImageButton
                style="@style/Cell"
                android:src="@mipmap/ic_launcher" />
        </TableRow>
        <!--Next Rows...-->
    </TableLayout>
    <!--//..-->
</RelativeLayout>