Recyclerview 使用显示额外间距的网格布局答案

【问题标题】：Recyclerview using gridlayout showing extra spacingRecyclerview 使用显示额外间距的网格布局
【发布时间】：2019-10-16 13:51:15
【问题描述】：

我想使用 GridLayoutManager 在 recyclerview 中显示列表项，我能够显示数据，但有时 recyclerview 会在行中显示额外的间距，如下所示，那么我该如何避免这种额外的间距。我也想将 recyclerview 扩展到全高

下面是片段的布局代码

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorShopListingBackground"
    android:orientation="vertical">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="@dimen/margin_124"
        android:background="@android:color/white" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin_8"
        android:layout_marginTop="@dimen/margin_8"
        android:layout_marginRight="@dimen/margin_8"
        android:layout_marginBottom="@dimen/margin_16"
        android:background="@drawable/bg_dashboard_categories"
        android:elevation="@dimen/margin_16"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/margin_16"
            android:layout_marginRight="@dimen/margin_16"
            android:layout_marginTop="@dimen/margin_16"
            android:fontFamily="@font/montserrat_bold"
            android:textSize="@dimen/text_size_18"
            android:textColor="@color/colorHandPickedOffer"
            android:text="@string/txt_handpicked_offers" />

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rv_categories"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_16"
            android:background="@drawable/bg_dashboard_categories"
            android:layout_below="@id/tv_title"
            android:layoutAnimation="@anim/grid_layout_animation_from_bottom"/>

    </RelativeLayout>
</LinearLayout>

下面是列表项

<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@color/colorCategoryDivider"
    android:paddingRight="@dimen/margin_1"
    android:paddingEnd="@dimen/margin_1"
    android:paddingBottom="@dimen/margin_1"
    android:paddingTop="@dimen/margin_1"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/rl_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:paddingBottom="@dimen/margin_16"
        android:minWidth="@dimen/margin_136">

        <ImageView
            android:id="@+id/iv_category_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/margin_16"
            android:src="@drawable/fashion" />

        <TextView
            android:id="@+id/tv_category_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/iv_category_image"
            android:fontFamily="@font/montserrat_semi_bold"
            android:hint="@string/txt_category_name"
            android:layout_marginTop="@dimen/margin_16"
            android:gravity="center"
            android:textSize="@dimen/text_size_12"
            android:textColor="@color/colorCategoryText"
            android:textStyle="bold" />

    </LinearLayout>

</LinearLayout>

以下是错误图片

【问题讨论】：

设置边距和内边距
在您的 RelativeLayout 中将 android:layout_height="wrap_content" 更改为 android:layout_height="match_parent" 以获得完整高度
@RubenMeiring 我应该为 recyclerview 或列表项设置边距和填充？
为列表项设置边距和内边距，同时检查 recyclerview 上的约束、边距和内边距，玩弄这些直到它看起来像你想要的那样，还要检查项目和回收站视图的高度和宽度
从 LinearLayout 中移除 minWidth。

标签： android android-recyclerview gridlayoutmanager

【解决方案1】：

将 android:layout_height="wrap_content" 设置为 android:layout_height="match_parent"

【讨论】：

感谢重播，我试过了，但我仍然遇到同样的问题。

【解决方案2】：

我一直在检查，我相信这个名为 flexbox 的 Library 会对您有所帮助，它需要进行一些转换，但它非常易于使用，并且非常适合您想要的仪表板

这是我认为对您有很大帮助的页面摘录

第二个是FlexboxLayoutManager，可以在RecyclerView中使用。

RecyclerView recyclerView = (RecyclerView) context.findViewById(R.id.recyclerview);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.COLUMN);
layoutManager.setJustifyContent(JustifyContent.FLEX_END);
recyclerView.setLayoutManager(layoutManager);
or for the attributes for the children of the FlexboxLayoutManager you can do like:

mImageView.setImageDrawable(drawable);
ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
    FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
    flexboxLp.setFlexGrow(1.0f);
    flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}

使用 FlexboxLayoutManager 的优势在于，它会回收屏幕外的视图，以便在用户滚动时重新使用出现的视图，而不是膨胀每个单独的视图，这消耗的内存要少得多，尤其是当包含的项目数Flexbox 容器中的内容很大。

【讨论】：