Android RecycleView实现瀑布流(解决位置错乱)

2020-11-12 本文已影响0人 hao_developer

实现效果：

image.png
布局效果：

image.png
布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/dp_3">

    <androidx.cardview.widget.CardView
        android:id="@+id/cvLay"
        android:layout_width="@dimen/dp_167"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="@dimen/dp_1"
        app:cardCornerRadius="@dimen/dp_10"
        app:cardElevation="@dimen/dp_0">

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

            <ImageView
                android:id="@+id/ivImg"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp_167"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_image_6" />

            <TextView
                android:id="@+id/tvName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/dp_10"
                android:layout_marginTop="@dimen/dp_5"
                android:layout_marginRight="@dimen/dp_10"
                android:layout_marginBottom="@dimen/dp_3"
                android:maxLines="2"
                android:ellipsize="end"
                android:text="闪魔iphoneX钢化膜11pro 防偷窥膜苹果x防窥XR…"
                android:textColor="@color/hui_ff6"
                android:textSize="@dimen/sp_14" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/dp_10"
                android:layout_marginTop="@dimen/dp_10"
                android:orientation="horizontal">

                <TextView
                    android:layout_width="@dimen/dp_15"
                    android:layout_height="@dimen/dp_15"
                    android:background="@drawable/orange_3_circle_shape"
                    android:gravity="center"
                    android:text="市"
                    android:textColor="@color/white"
                    android:textSize="@dimen/sp_10" />

                <TextView
                    android:id="@+id/tvOldMoney"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/dp_4"
                    android:text="¥28"
                    android:textColor="@color/hui_ff9"
                    android:textSize="@dimen/sp_10" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/dp_4"
                    android:text="市场价"
                    android:textColor="@color/hui_ff9"
                    android:textSize="@dimen/sp_10" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/dp_10"
                android:layout_marginRight="@dimen/dp_10"
                android:layout_marginTop="@dimen/dp_5"
                android:layout_marginBottom="@dimen/dp_10"
                android:orientation="horizontal">

                <TextView
                    android:layout_gravity="center"
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/dp_15"
                    android:background="@drawable/red_3_circle_shape"
                    android:gravity="center"
                    android:text="活动"
                    android:paddingLeft="@dimen/dp_2"
                    android:paddingRight="@dimen/dp_2"
                    android:textColor="@color/white"
                    android:textSize="@dimen/sp_10" />

                <TextView
                    android:id="@+id/tvJmoney"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/dp_4"
                    android:text="¥20.8"
                    android:textColor="@color/red_ffe"
                    android:textSize="@dimen/sp_12" />

                <TextView
                    android:id="@+id/tvSaleCount"
                    android:gravity="right"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/dp_4"
                    android:text="已售：115"
                    android:textColor="@color/hui_ff6"
                    android:textSize="@dimen/sp_10" />

            </LinearLayout>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

实现adapter并设置给RecycleView

sglm = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
goodsAdapter = SelfUneGoodsAdapter(this,skuList)
goodsAdapter?.setAdapterClickListener(this)
with(rvList){
    addItemDecoration(GridSpaceItemDecoration(2,10,10))
    adapter = goodsAdapter
    layoutManager = sglm
}

间距

import android.graphics.Rect;
import android.util.Log;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

/**
 * 描述 : RecyclerView GridLayoutManager 等间距。
 * <p>
 * 等间距需满足两个条件：
 * 1.各个模块的大小相等，即 各列的left+right 值相等；
 * 2.各列的间距相等，即 前列的right + 后列的left = 列间距；
 * <p>
 * 在{@link #getItemOffsets(Rect, View, RecyclerView, RecyclerView.State)} 中针对 outRect 的left 和right 满足这两个条件即可
 * <p>
 * 作者 : shiguotao
 * 版本 : V1
 * 创建时间 : 2020/3/19 4:54 PM
 */
public class GridSpaceItemDecoration extends RecyclerView.ItemDecoration {

    private final String TAG = "GridSpaceItemDecoration";

    private int mSpanCount;//横条目数量
    private int mRowSpacing;//行间距
    private int mColumnSpacing;// 列间距

    /**
     * @param spanCount     列数
     * @param rowSpacing    行间距
     * @param columnSpacing 列间距
     */
    public GridSpaceItemDecoration(int spanCount, int rowSpacing, int columnSpacing) {
        this.mSpanCount = spanCount;
        this.mRowSpacing = rowSpacing;
        this.mColumnSpacing = columnSpacing;
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view); // 获取view 在adapter中的位置。
        int column = position % mSpanCount; // view 所在的列

        outRect.left = column * mColumnSpacing / mSpanCount; // column * (列间距 * (1f / 列数))
        outRect.right = mColumnSpacing - (column + 1) * mColumnSpacing / mSpanCount; // 列间距 - (column + 1) * (列间距 * (1f /列数))

        // 如果position > 行数，说明不是在第一行，则不指定行高，其他行的上间距为 top=mRowSpacing
        if (position >= mSpanCount) {
            outRect.top = mRowSpacing; // item top
        }
    }
}

解决滑动到顶部位置错乱：
可以在 $\color{red}{RecycleView的外层嵌套一层NestedScrollView}$
如果导致不能显示在顶部，可以听添加一下设置：

//scroView是NestedScrollView的id，这种写法会有一种过渡的动画效果
scroView.fling(0)
scroView.smoothScrollTo(0,0)

以上解决方法，是项目中遇到的问题，如果有更好的方法，可以在下方进行评论，留下您的宝贵方法和思路，谢谢！！！

Android RecycleView实现瀑布流(解决位置错乱)

猜你喜欢

热点阅读