如何实现两个横向RecyclerView空间足够并排否则上下堆叠的自适应布局

你当前遇到的异常是因为flow_wrapMode设置为chain导致的，chain模式仅会将元素在单行内做链式布局，超出宽度时不会自动将剩余元素移到下一行，因此出现第二个RV超出约束范围的问题。layout_constrainedWidth是针对直接受ConstraintLayout约束的子View生效的，Flow的子View不受该属性管控，所以你加了也没有效果。

可选解决方法 #

方法一：调整Flow配置（无需引入额外依赖） #

修改Flow和两个RecyclerView的属性即可：

1. 将Flow的app:flow_wrapMode从chain改为wrap，这是自动换行的必需配置
2. 给每个RecyclerView新增android:maxWidth属性，值为Flow的可用宽度，你可以在代码中测量Flow的宽度后动态给RV设置，也可以用约束属性做限制：

<!-- Flow的配置修改 -->
<androidx.constraintlayout.helper.widget.Flow
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:constraint_referenced_ids="rvSport,rvLevel"
    android:orientation="horizontal"
    app:flow_wrapMode="wrap"
    app:layout_constraintStart_toEndOf="@id/ivPersonImage"
    app:layout_constraintEnd_toStartOf="@+id/barrier2"
    app:layout_constraintTop_toBottomOf="@id/tvPersonName"
    app:layout_constraintBottom_toBottomOf="@id/ivPersonImage"
    app:flow_horizontalGap="10dp"
    app:flow_horizontalAlign="start"/>

<!-- 每个RV新增maxWidth限制 -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvSport"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:orientation="horizontal"
    android:maxWidth="250dp" <!-- 你可以根据实际布局可用宽度调整，或者代码动态计算 -->
    app:layoutManager=".WrapContentLinearLayoutManager"
    tools:itemCount="3"/>

这个方法的缺点是在不同尺寸设备上需要动态计算最大宽度，适配成本略高。

方法二：使用FlexboxLayout（更稳定，适配所有场景，推荐） #

FlexboxLayout对自动换行场景的支持更成熟，没有ConstraintLayout Flow的版本兼容问题，配置也更简单：

1. 先在模块级build.gradle中引入依赖（如果之前没加）：

dependencies {
    implementation "com.google.android.flexbox:flexbox:3.0.0"
}

2. 替换原来的Flow和RV配置：

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignItems="center"
    app:layout_constraintStart_toEndOf="@id/ivPersonImage"
    app:layout_constraintEnd_toStartOf="@+id/barrier2"
    app:layout_constraintTop_toBottomOf="@id/tvPersonName"
    app:layout_constraintBottom_toBottomOf="@id/ivPersonImage">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvSport"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_maxWidth="match_parent"
        app:layout_flexShrink="0"
        app:layoutManager=".WrapContentLinearLayoutManager"
        tools:itemCount="3"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvLevel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:orientation="horizontal"
        app:layout_maxWidth="match_parent"
        app:layout_flexShrink="0"
        app:layoutManager=".WrapContentLinearLayoutManager"
        tools:itemCount="8"/>

</com.google.android.flexbox.FlexboxLayout>

这个配置可以完美覆盖你所有的需求场景：

• 两个RV总宽度小于可用宽度：自动并排展示
• 总宽度超出可用宽度：第二个RV自动换行到下一行
• 单个RV宽度超出可用宽度：自动限制为行宽，支持横向滚动

内容的提问来源于stack exchange，提问作者Charlie Walker