使用gridlayout的Recyclerview显示额外的间距

时间:2019-10-16 13:51:15

标签: android android-recyclerview gridlayoutmanager

我想使用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>

下面是有错误的图片

Image with error

2 个答案:

答案 0 :(得分:0)

将android:layout_height =“ wrap_content”设置为android:layout_height =“ match_parent”

答案 1 :(得分:0)

我一直在检查,我相信这个名为Library的flexbox可以为您带来帮助,它会进行一些转换,但是使用起来相当容易,并且非常适合您想要的仪表板 >

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

第二个是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容器中很大。