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布局令人难以置信地令人困惑和沮丧...

Answer 1

我可以通过将TableLayout更改为一组嵌套的LinearLayout来做到这一点。用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>

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

1 个答案: