安卓水平RecyclerView加载图片间距过大如何修复？

问题根因分析 #

• 列表项（item）根布局宽度设置为match_parent：水平滚动场景下，每个item会占满整个RecyclerView的宽度，导致单个item占满可见区域，滑动才会显示下一个item，视觉上就是间距极大
• 边距设置逻辑不合理：当前边距直接写在ImageView的左侧，所有item都统一加左侧边距，间距控制灵活性差
• RecyclerView宽度写死416dp，不同设备适配存在问题，也可能间接影响视觉间距

具体修复步骤 #

1. 修改列表项布局 #

将item根布局的android:layout_width从match_parent改为wrap_content，如果不需要根布局额外嵌套的话，甚至可以直接把ImageView作为根布局减少层级。修改后代码如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="106dp"
        android:layout_height="171dp"
        android:layout_marginStart="19dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

</androidx.constraintlayout.widget.ConstraintLayout>

如果要让第一个item左侧没有边距，最后一个item右侧加边距，可以把ImageView的android:layout_marginStart去掉，改用ItemDecoration统一控制间距。

2. （可选）使用ItemDecoration统一控制间距 #

这种方式更灵活，可以自定义任意位置的间距，避免所有item统一加边距导致首项左偏移、末项右侧没有边距的问题，示例代码如下：
首先创建自定义Decoration类：

class HorizontalSpaceItemDecoration(private val space: Int) : RecyclerView.ItemDecoration() {
    override fun getItemOffsets(outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State) {
        val position = parent.getChildAdapterPosition(view)
        // 所有项都加右侧间距
        outRect.right = space
        // 第一项额外加左侧间距
        if (position == 0) {
            outRect.left = space
        }
    }
}

然后在初始化RecyclerView的时候添加：

// 单位是像素，如果你用dp的话需要先转px
recyclerView.addItemDecoration(HorizontalSpaceItemDecoration(19.dpToPx()))
// dp转px的扩展函数可以自己实现，或者直接传像素值

3. 优化RecyclerView布局 #

将RecyclerView的宽度从写死的416dp改为match_parent，适配不同屏幕宽度：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="174dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0" />

内容的提问来源于stack exchange，提问作者Yagami AMV