android - Android 布局 2x3 静态均匀大小的图像网格

Question

我想创建一个由 6 个（2 列 x 3 行）图像组成的网格，这些图像的大小不会根据网格中包含的 ImageView 而改变，并且网格的所有元素的大小应该相同，高度和宽度完全相同，并且网格中的图像应缩放以适合这些框。它们最初将包含一种样板图像，该图像将被替换为照片。我目前的代码产生了一些意想不到的和非直观的结果。当我将照片添加到网格以替换原始图像时，尺寸不会保持不变，我无法理解 Android 是如何决定布局这些尺寸的。我在一些屏幕截图中显示了一些不同的背景颜色，可能会让屏幕的哪个部分属于 Android 布局中的哪个视图或元素更加明显，但这种行为对我来说真的没有意义。告诉创建一个具有静态、均匀大小的网格似乎是一项非常困难的任务，无论它包含什么。我正在使用一个TableLayout为网格。对于这样的任务，这似乎是正确的选择。这是 XML 布局。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/root_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="2"
            android:id="@+id/header"
            android:layout_alignParentTop="true"
            android:padding="@dimen/ship_header_padding">
        <TableRow>
            <TextView
                    android:layout_column="1"
                    android:text="VIN: "
                    android:id="@+id/vin_txt"
                    android:gravity="right"
                    android:textSize="@dimen/ship_header_txt_sz"/>
            <TextView
                    android:layout_column="2"
                    android:id="@+id/vin"
                    android:textSize="@dimen/ship_header_txt_sz"/>
        </TableRow>
        <TableRow>
            <TextView
                    android:layout_column="1"
                    android:text="Model: "
                    android:gravity="right"
                    android:id="@+id/ymm_txt"
                    android:textSize="@dimen/ship_header_txt_sz"/>
            <TextView
                    android:layout_column="2"
                    android:id="@+id/ymm"
                    android:textSize="@dimen/ship_header_txt_sz"/>
        </TableRow>
    </TableLayout>
    <TableLayout
            android:id="@+id/image_grid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/header"
            android:numColumns="2"
            android:stretchColumns="*"
            android:layout_alignParentBottom="true"
            android:background="@android:color/background_dark"
            android:padding="0dp"
            android:layout_margin="0dp">
        <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_red_dark"
                android:padding="0dp"
                android:layout_margin="0dp">
            <ImageView
                    android:id="@+id/image1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:background="@android:color/holo_red_light"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
            <ImageView
                    android:id="@+id/image2"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
        </TableRow>
        <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_blue_dark"
                android:padding="0dp"
                android:layout_margin="0dp">
            <ImageView
                    android:id="@+id/image3"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/holo_blue_bright"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
            <ImageView
                    android:id="@+id/image4"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
        </TableRow>
        <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@android:color/holo_green_dark"
                android:padding="0dp"
                android:layout_margin="0dp">
            <ImageView
                    android:id="@+id/image5"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:background="@android:color/holo_green_light"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
            <ImageView
                    android:id="@+id/image6"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:rotation="90"
                    android:scaleType="centerInside"
                    android:padding="0dp"
                    android:layout_margin="0dp"/>
        </TableRow>
    </TableLayout>
</RelativeLayout>

这里有一些结果的屏幕截图，具体取决于屏幕上有多少图像。

谁能告诉我属性的神奇组合，它创建了一个布局，可以缩放其中的图像并且不会改变大小？这些 Android 布局令人难以置信的混乱和令人沮丧......

标签： androidandroid-layout

Answer 1

我可以通过将 更改TableLayout为一组嵌套的LinearLayout. 似乎不可能用 a 达到预期的结果TableLayout，但可能是我不知道该怎么做。在任何情况下，这是生成 2x3 网格的结果代码，其元素大小不会改变，无论包含的图像的大小是多少：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/root_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    <TableLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="2"
            android:id="@+id/header"
            android:layout_alignParentTop="true"
            android:padding="@dimen/ship_header_padding">
        <TableRow>
            <TextView
                    android:layout_column="1"
                    android:text="VIN: "
                    android:id="@+id/vin_txt"
                    android:gravity="right"
                    android:textSize="@dimen/ship_header_txt_sz"/>
            <TextView
                    android:layout_column="2"
                    android:id="@+id/vin"
                    android:textSize="@dimen/ship_header_txt_sz"/>
        </TableRow>
        <TableRow>
            <TextView
                    android:layout_column="1"
                    android:text="Model: "
                    android:gravity="right"
                    android:id="@+id/ymm_txt"
                    android:textSize="@dimen/ship_header_txt_sz"/>
            <TextView
                    android:layout_column="2"
                    android:id="@+id/ymm"
                    android:textSize="@dimen/ship_header_txt_sz"/>
        </TableRow>
    </TableLayout>
    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:layout_below="@id/header"
            android:layout_alignParentBottom="true">
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:background="@android:color/holo_red_dark">
            <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.5"
                    android:rotation="90"
                    android:background="@android:color/holo_red_light"/>
            <ImageView
                    android:id="@+id/image2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.5"
                    android:rotation="90"/>
        </LinearLayout>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:background="@android:color/holo_blue_dark">
            <ImageView
                    android:id="@+id/image3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/holo_blue_bright"
                    android:layout_weight="0.5"
                    android:rotation="90"/>
            <ImageView
                    android:id="@+id/image4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.5"
                    android:rotation="90"/>
        </LinearLayout>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:background="@android:color/holo_green_dark">
            <ImageView
                    android:id="@+id/image5"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@android:color/holo_green_light"
                    android:layout_weight="0.5"
                    android:rotation="90"/>
            <ImageView
                    android:id="@+id/image6"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="0.5"
                    android:rotation="90"/>
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>