android - 如何制作复杂的 TableLayout 布局 - Android

Question

我想为我的应用程序制作一个非常复杂的布局。我决定使用它，TableLayout但我无法按计划进行。有人可以告诉我它应该如何编码，因为现在它看起来很可怕。

这是我的概念：

在此处输入图像描述

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff">

    <!-- ROW1 -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/r1v1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_span="7"
            android:text="7/7" />
    </TableRow>

    <!-- ROW2 -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/r2v1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r2v2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:text="2/7" />

        <TextView
            android:id="@+id/r2v3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:text="2/7" />

        <TextView
            android:id="@+id/r2v4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:text="2/7" />
    </TableRow>

    <!-- ROW3 -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/r3v1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v5"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v6"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r3v7"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />
    </TableRow>

    <!-- ROW4 -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="fill_parent"
        android:layout_height="match_parent" >

        <TextView
            android:id="@+id/r4v1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r4v2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="5"
            android:text="5/7" />

        <TextView
            android:id="@+id/r4v3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />
    </TableRow>

    <!-- ROW5 -->
    <TableRow
        android:id="@+id/tableRow5"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/r5v1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />

        <TextView
            android:id="@+id/r5v2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="3"
            android:text="3/7" />

        <TextView
            android:id="@+id/r5v3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_span="2"
            android:text="2/7" />

        <TextView
            android:id="@+id/r5v4"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="1/7" />
    </TableRow>

    <!-- ROW6 -->
    <TableRow
        android:id="@+id/tableRow6"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/r6v1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_span="7"
            android:text="7/7" />
    </TableRow>

</TableLayout>

这是我的结果：

在此处输入图像描述

不是最好的，你必须承认:)

score 3 · Accepted Answer

对于如此复杂的布局，我会编写自定义布局 - 一个扩展 ViewGroup 的类，如下所示：

import android.content.Context;
import android.util.AttributeSet;
import android.util.FloatMath;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class CustomLayout extends ViewGroup {
    private final static String TAG = "CustomLayout";

    private static final int NUM_CHILDREN = 20;
    private static final int GRID_WIDTH = 7;
    private static final int GRID_HEIGHT = 12;
    private static final float[] COORDS = {
        // row 0
        0, 0, 7, 1,
        // row 1
        0, 1, 1, 1, 
        1, 1, 2, 1,
        3, 1, 2, 1,
        5, 1, 2, 1,
        // row 2
        0, 2, 1, 1,
        1, 2, 1, 1,
        2, 2, 1, 1,
        3, 2, 1, 1,
        4, 2, 1, 1,
        5, 2, 1, 1,
        6, 2, 1, 1,
        // row 3
        0, 3, 1, 7,
        1, 3, 5, 7,
        6, 3, 1, 7,
        // row 4
        0, 10, 1, 1, 
        1, 10, 3, 1,
        4, 10, 2, 1,
        6, 10, 1, 1,
        // row 5
        0, 11, 7, 1,
    };

    public CustomLayout(Context context) {
        super(context);
        init();
    }

    public CustomLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        Context ctx = getContext();
        setBackgroundColor(0xffaaaaaa);
        for (int i = 0; i < NUM_CHILDREN; i++) {
            TextView tv = new Button(ctx);
            tv.setBackgroundResource(android.R.drawable.btn_default_small);
            addView(tv);
        }
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int w = getWidth();
        int h = getHeight();
        for (int i = 0; i < NUM_CHILDREN; i++) {
            View v = getChildAt(i);
            int ii = i * 4;
            float fl = w * COORDS[ii] / GRID_WIDTH;
            float ft = h * COORDS[ii+1] / GRID_HEIGHT;
            float fr = fl + w * COORDS[ii+2] / GRID_WIDTH;
            float fb = ft + h * COORDS[ii+3] / GRID_HEIGHT;
            Log.d(TAG, "onLayout " + fl + " " + ft + " " + fr + " " + fb);
            v.layout(Math.round(fl), Math.round(ft), Math.round(fr), Math.round(fb));
        }
    }
}

在 Activity 的 onCreate 中对其进行测试：

ViewGroup vg = new CustomLayout(this);
setContentView(vg);

如您所见，这并不难，而且比使用多个 LinearLayouts 或 RelativeLayout 快得多

score 0 · Accepted Answer

正如我所见，制作布局的最佳方法是使用 LinearLayout

您可以尝试按照以下步骤操作。

使用 android:orientation="vertical" 创建父级
在您的垂直布局中，您应该水平使用以使每一行不要忘记 android:width="fill_parent" 来填充您的完整行。
并定义您应该使用的线条大小和居中文本， android:weight="" android:layout_gravity=""

android - 如何制作复杂的 TableLayout 布局 - Android

2 回答 2

Related

Reference