Android TableLayout问题 - 无法正确设置

Question

请分享TableLayout的修复 - 很少混淆如何根据需要设置权重和列来排列布局。我希望你能根据layout_span获得格式化需求。但会尝试用文字解释。放下我如何可视化布局

1. 第一行 - 横跨宽度的按钮
2. 第二行 - 标题中心对齐
3. 第三行 - 要有两个TextView，每个占用50％的面积
4. 第四行 - 使标题中心对齐
5. 第五行 - 让一个ImageView占据宽度的16.6％，TextView占用其余83.3％。
6. 第六行 - 让一个ImageView占据宽度的16.6％，TextView占用其余83.3％。

以下是代码：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="10dp">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_get_questions"
            android:id="@+id/btnNext"
            android:textColor="@color/windowBackground"
            android:layout_span="4"
            android:layout_column="1"
            />
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        >
        <TextView
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/app_scoring_leaders"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:layout_span="4"
            android:layout_column="1"
            android:padding="5dp"/>
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtDailyScores"
            android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_margin="5dp"
            android:layout_column="1"
            android:layout_span="2"
            android:layout_weight="3"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtAllTimeScores"
            android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_margin="5dp"
            android:layout_column="3"
            android:layout_span="2"
            android:layout_weight="3"/>
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        >
        <TextView
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/app_get_started"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:layout_column="1"
            android:layout_span="4"
            android:padding="5dp"/>
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        android:padding="5dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_assessment_black_36dp"
            android:layout_gravity="center_vertical"
            android:layout_column="1"
            android:layout_span="1"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_intro"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_margin="5dp"
            android:layout_column="2"
            android:layout_span="3"
            android:layout_weight="5"/>

    </TableRow>
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:src="@drawable/ic_today_black_36dp"
            android:layout_column="1"
            android:layout_span="1"
            android:layout_weight="1"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="left"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="@string/app_base_score"
            android:layout_margin="5dp"
            android:layout_column="2"
            android:layout_span="3"
            android:layout_weight="5"/>
    </TableRow>
</TableLayout>

Answer 1

这花费了一点时间，但是我必须做与layout_weight相关的更改，必须更改整个表结构。我使用LinearLayout代替最后两行。前四行可以使用TableLayout完成。 Layout_spans必须简化 - 似乎我们不能有复杂的布局。很高兴了解是否有更好的解决方案。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="5dp" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_rankgrade"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:textColor="@android:color/black"
            android:textAlignment="center"
            android:layout_weight="2"
            />

    </TableRow>
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:padding="2dp" android:layout_gravity="center">
        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/relativelayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"  android:layout_gravity="center" android:gravity="center" android:layout_weight="1">

            <ImageView
                android:id="@+id/myImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/trframered1"

                />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/myImageView"
                android:layout_alignTop="@id/myImageView"
                android:layout_alignRight="@id/myImageView"
                android:layout_alignBottom="@id/myImageView"
                android:layout_margin="1dp"
                android:gravity="center"
                android:orientation="vertical"
                >
                <TextView
                    android:id="@+id/myImageViewTextHead"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="1dp"
                    android:gravity="center"
                    android:text="@string/app_last_rank_grade"
                    android:textColor="#000000" />
                <TextView
                    android:id="@+id/txtLastDayRankGrade"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="1dp"
                    android:gravity="center"
                    android:text="-"
                    android:textColor="#000000" />

            </LinearLayout>


        </RelativeLayout>

        <RelativeLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/relativelayout1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:layout_weight="1">

            <ImageView
                android:id="@+id/myImageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/trframered1" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@id/myImageView1"
                android:layout_alignTop="@id/myImageView1"
                android:layout_alignRight="@id/myImageView1"
                android:layout_alignBottom="@id/myImageView1"
                android:layout_margin="1dp"
                android:gravity="center"
                android:orientation="vertical"
                >
                <TextView
                    android:id="@+id/myImageViewTextHead1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="1dp"
                    android:gravity="center"
                    android:text="All Time"
                    android:textColor="#000000" />
                <TextView
                    android:id="@+id/txtLastAllTimeRankGrade"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="1dp"
                    android:gravity="center"
                    android:text="-"
                    android:textColor="#000000" />

            </LinearLayout>


        </RelativeLayout>
    </TableRow>
</TableLayout>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp">
        <Button
            android:layout_height="wrap_content"
            android:text="@string/app_get_questions"
            android:id="@+id/btnNext"
            android:textColor="@color/windowBackground"
            android:layout_span="2"
            android:layout_weight="2"
            />
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        >
        <TextView
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/app_scoring_leaders"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:layout_span="2"
            android:layout_weight="2"
            android:padding="5dp"/>
    </TableRow>
    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        android:padding="5dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtDailyScores"
            android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_margin="5dp"
            android:layout_weight="1"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/txtAllTimeScores"
            android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:layout_margin="5dp"
            android:layout_weight="1"/>
    </TableRow>

    <TableRow
        android:layout_height="fill_parent"
        android:layout_width="match_parent"
        >
        <TextView
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="@string/app_get_started"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:layout_weight="2"
            android:layout_span="2"
            android:padding="5dp"/>
    </TableRow>
   </TableLayout>

            <LinearLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                <ImageView
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_assessment_black_36dp"
                    android:layout_gravity="center_vertical"
                    android:layout_width="wrap_content"
                    android:padding="10dp"
                    />
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:text="@string/app_intro"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:padding="10dp"
                    />
            </LinearLayout>

            <LinearLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
                <ImageView
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:src="@drawable/ic_today_black_36dp"
                    android:layout_width="wrap_content"
                    android:padding="10dp"
                    />
                <TextView
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceSmall"
                    android:text="@string/app_base_score"
                    android:padding="10dp"
                    />
            </LinearLayout>