Android ImageViews in GridLayout 渲染问题

Question

我对包含 ImageViews 的 GridLayout 有一个奇怪的问题。

这是我的布局：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:columnCount="2"
    android:rowCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_row="1"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="2"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="1"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_row="2"
        android:layout_column="1"
        android:src="@drawable/test" />

</GridLayout>

这是我想要实现的目标：

但是，布局似乎根本没有缩放，看起来像这样（取决于屏幕大小）：

我尝试过的（但没有成功）：

• 在 GridLayout 中添加android:clipChildren="false"
• 将 ImageViews 的 scaleType 设置为 fitXY、fitCenter 和 centerCrop
• 将 ImageViews 的 layout_width 和 layout_height 设置为 wrap_content、match_parent 及其排列（但是，我希望 GridLayout 自动设置其子项的大小）

能否请更有经验的人告诉我如何实现我的目标？ :D 谢谢！

PS：如果我可以使用任何其他布局来实现所需的外观，请告诉我。

Answer 1

您需要为子视图指定layout_width / layout_height 和layout_columnWeight / layout_rowWeight。类似于 LinearLayout 中的权重。

像这样使用它：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:columnCount="2"
    android:rowCount="3"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="1"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="2"
        android:layout_column="0"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="0"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="1"
        android:layout_column="1"
        android:src="@drawable/test" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_row="2"
        android:layout_column="1"
        android:src="@drawable/test" />

</GridLayout>

顺便说一句，我建议您使用 JetPack (AndroidX) 中的 GridLayout，因为它修复了一些错误，并且对于不同的 Android 版本具有更好的整体实现 - https://developer.android.com/jetpack/androidx/releases/gridlayout

当使用这个 AndroidX 版本时，你只需将 layout_rowWeight / columnWeight / layout_row / layout_column 的 android:* 命名空间替换为 app:* 命名空间。