Android、以 GridLayoutManager 和 ImageView 作为单元格内容的 RecyclerView 不适合垂直 space
Android, RecyclerView with GridLayoutManager and ImageView as cell content does not fit the vertical space
我正在尝试实现一个简单的图像网格。
每个图像大小相同,问题是如果我缩小图像(例如,如果我设置一个 spanCount 以便网格布局必须调整图像大小以适合它们)“virtual-cell”包含图像不适应图像大小。
在这里你可以看到 spanCount=3 和 spanCount=4 之间的区别。
如果我对 imageView 使用 fitXY
,这就是结果,因此网格布局管理器减小了单元格宽度但不适合单元格高度。
我的网格布局xml:
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="4"
tools:itemCount="30"
tools:listitem="@layout/image_item" />
和image_item.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView 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:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
tools:srcCompat="@tools:sample/avatars" />
我的目标:
- 第 1 步:删除列之间的间隙
- 第 2 步:调整图像大小,使它们始终适合水平 space(在本例中,spanCount = 3,右侧可见一个小 space)
为了更清楚,我需要删除标记为红色的 space。
如果我可以尝试回答这个问题,在您的 image_item.xml
中,我建议您将布局宽度更改为 match_parent
,就像这样
<?xml version="1.0" encoding="utf-8"?>
<ImageView 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:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
tools:srcCompat="@tools:sample/avatars" />
这背后的逻辑是因为我们已经在使用 GridLayout 管理器并且我们的 spanCount 是 4,所以 match_parent
宽度将占据它可用的所有 space,在分配的任何 spanCount 中。
其次我觉得centerCrop
会更好。它可以自动调整你所有的图像,而不会让它们看起来被拉伸。
编辑:
我觉得您可以使用 ConstraintLayout 的魔力来完成这项工作,您必须按如下方式更新您的 image_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
tools:srcCompat="@tools:sample/avatars"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
这里的逻辑是 GridLayout 的 0dp 可以帮助您的图像占据任何可用的宽度,并且 dimensionRatio
是一个可以帮助您的宽度和高度匹配。
您似乎受到 spanCount
和 ItemCoun
t 以及 fitCenter
的影响。要解决这个问题,请执行此操作。
转到 gridLayoutManager 并在 gridLayoutManager 中指定所需的单元格数。
打开你的 image_item.xml 指定宽度为 match_parent
然后你必须指定高度例如100dp。不要包装内容,因为图像大小不同,我们这样做是为了强制单元格的大小相等,以便每张图像都以相同的方式适合。
在您的 ImageView 中 declare (android:scaleType="centerCrop")
不要忘记删除 spanCount、ItemCount 和 fitCenter。
现在如果 Java 方面一切正常,这应该可以正常工作。
我正在尝试实现一个简单的图像网格。
每个图像大小相同,问题是如果我缩小图像(例如,如果我设置一个 spanCount 以便网格布局必须调整图像大小以适合它们)“virtual-cell”包含图像不适应图像大小。
在这里你可以看到 spanCount=3 和 spanCount=4 之间的区别。
如果我对 imageView 使用 fitXY
,这就是结果,因此网格布局管理器减小了单元格宽度但不适合单元格高度。
我的网格布局xml:
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
app:spanCount="4"
tools:itemCount="30"
tools:listitem="@layout/image_item" />
和image_item.xml
<?xml version="1.0" encoding="utf-8"?>
<ImageView 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:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
tools:srcCompat="@tools:sample/avatars" />
我的目标:
- 第 1 步:删除列之间的间隙
- 第 2 步:调整图像大小,使它们始终适合水平 space(在本例中,spanCount = 3,右侧可见一个小 space)
为了更清楚,我需要删除标记为红色的 space。
如果我可以尝试回答这个问题,在您的 image_item.xml
中,我建议您将布局宽度更改为 match_parent
,就像这样
<?xml version="1.0" encoding="utf-8"?>
<ImageView 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:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
tools:srcCompat="@tools:sample/avatars" />
这背后的逻辑是因为我们已经在使用 GridLayout 管理器并且我们的 spanCount 是 4,所以 match_parent
宽度将占据它可用的所有 space,在分配的任何 spanCount 中。
其次我觉得centerCrop
会更好。它可以自动调整你所有的图像,而不会让它们看起来被拉伸。
编辑:
我觉得您可以使用 ConstraintLayout 的魔力来完成这项工作,您必须按如下方式更新您的 image_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
tools:srcCompat="@tools:sample/avatars"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
这里的逻辑是 GridLayout 的 0dp 可以帮助您的图像占据任何可用的宽度,并且 dimensionRatio
是一个可以帮助您的宽度和高度匹配。
您似乎受到 spanCount
和 ItemCoun
t 以及 fitCenter
的影响。要解决这个问题,请执行此操作。
转到 gridLayoutManager 并在 gridLayoutManager 中指定所需的单元格数。
打开你的 image_item.xml 指定宽度为
match_parent
然后你必须指定高度例如100dp。不要包装内容,因为图像大小不同,我们这样做是为了强制单元格的大小相等,以便每张图像都以相同的方式适合。在您的 ImageView 中
declare (android:scaleType="centerCrop")
不要忘记删除 spanCount、ItemCount 和 fitCenter。
现在如果 Java 方面一切正常,这应该可以正常工作。