如何相對於屏幕尺寸調整表格布局中元素的尺寸？

Question

我在LinearLayout中有一個TableLayout，它是一個4x4的網格。 我希望每個單元格都是一個正方形，並且我希望其大小根據屏幕大小（或分配給TableLayout的大小）進行縮放。 我總是希望屏幕上顯示所有12個正方形。 本質上，我希望每個ImageView的layout_height和layout_wight值是父級值的1/4。 現在，我將它們設置為100dp 。 我需要對layout_weight值做些什么？

編輯：好的，所以對我所有的ImageView對象使用layout_weight="1" ，我能夠使寬度全部為可用空間的1/4，但是現在它們的高度為0。 我如何才能使高度也成為layout_weight的函數？

這是我的XML：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.package.name.MainActivity">

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 1st row -->
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>

        </TableRow>

        <!-- 2nd row -->
        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>

        </TableRow>


        <!-- 3rd row -->
        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>

        </TableRow>

        <!-- 4th row -->
        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dip" >

            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorPrimary"/>
            <ImageView
                android:layout_height="100dp"
                android:layout_width="100dp"
                android:src="@color/colorAccent"/>

        </TableRow>

    </TableLayout>


</LinearLayout>

看起來像這樣，最右邊的一欄沒有完整顯示。 我意識到這是因為我將它們都設置為100dp，但只是想了解一下我目前所在的位置：

Answer 1

1. 您可以使用1android:stretchColumns="*"

    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tableLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="*"> </TableLayout> 

2. 您可以使用LinearLayout 。

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tableLayout1" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> </LinearLayout> <!-- 2nd row --> <LinearLayout android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> </LinearLayout> <!-- 3rd row --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tableLayout3" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> </LinearLayout> <!-- 4th row --> <LinearLayout android:id="@+id/tableRow4" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorPrimary"/> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:layout_weight="1" android:src="@color/colorAccent"/> </LinearLayout> </LinearLayout>