RecyclerView展示购物车列表

官方介绍,RecyclerView用于在有限的窗口展现大量的数据,其实早已经有了类似的控件,如ListView、GridView,那么相比它们,RecyclerView有什么样优势呢?
RecyclerView标准化了ViewHolder,而且异常的灵活,可以轻松实现ListView实现不了的样式和功能,通过布局管理器LayoutManager可控制Item的布局方式,通过设置Item操作动画自定义Item添加和删除的动画,通过设置Item之间的间隔样式,自定义间隔。

先上效果图
在这里插入图片描述
大家可以明显的看到 是在一个RecyclerView下嵌套了另一个RecyclerView 今天简单实现一下这种效果

首先最重要的就是我们的依赖

	implementation 'com.android.support:design:28.+'
    implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30'
    不要忘了还有项目的maven库依赖
    maven { url "https://jitpack.io" }

然后是我们的布局

<android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/rc_store"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v7.widget.RecyclerView>

有了布局以后 就是最重要的步骤了 设置布局管理器 和适配器

		//设置布局管理器
        manager = new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false);
        rcStore.setLayoutManager(manager);
        //设置适配器
        adapter = new StoreAdapter(R.layout.store_layout, storeList);
        rcStore.setAdapter(adapter);

讲一下适配器 当前适配器是店铺条目的适配器 里面还要设置子条目商品条目的数据 下面把 两个条目的布局分别展示出来

public class StoreAdapter extends BaseQuickAdapter<GsonBean.DataBean,BaseViewHolder {

    public StoreAdapter(int layoutResId, @Nullable List<GsonBean.DataBean> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, final GsonBean.DataBean item) {
		//设置文字
        helper.setText(R.id.tv_store_name,item.getSellerName());
        
		//设置商品下的子商品条目
        RecyclerView goods = helper.getView(R.id.rc_goods);
        //子条目数据源
        List<GsonBean.DataBean.ListBean> goodsList = item.getList();
        //设置布局管理器
        LinearLayoutManager manager = new LinearLayoutManager(mContext, LinearLayoutManager.VERTICAL, false);
        goods.setLayoutManager(manager);
        //设置适配器
        adapter = new GoodsAdapter(R.layout.goods_layout, goodsList);
        goods.setAdapter(adapter);
    }

}

外层店铺条目布局
在这里插入图片描述

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <CheckBox
            android:id="@+id/cb_store"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center" />

        <TextView
            android:id="@+id/tv_store_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            android:paddingLeft="5dp"
            android:text="店名"
            android:textSize="22sp" />
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rc_goods"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

内层 商品条目布局
在这里插入图片描述

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        fresco:cardCornerRadius="@dimen/dp_4"
        fresco:contentPaddingBottom="@dimen/dp_4">


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp">

            <CheckBox
                android:id="@+id/cb_goods"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true" />

            <ImageView
                android:id="@+id/iv_goodsIcon"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_toRightOf="@id/cb_goods"
                android:paddingLeft="5dp"
                android:src="@mipmap/ic_launcher" />

            <LinearLayout
                android:layout_toRightOf="@id/iv_goodsIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/tv_goodsTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:hint="商品名称"
                    android:maxEms="20"
                    android:paddingLeft="5dp"
                    android:textStyle="bold" />

                <TextView
                    android:gravity="center"
                    android:id="@+id/tv_goodsPrice"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tv_goodsTitle"
                    android:layout_marginTop="@dimen/dp_10"
                    android:hint="商品价格" />

            </LinearLayout>

        </RelativeLayout>
    </android.support.v7.widget.CardView>

最后商品条目的适配器

public class GoodsAdapter extends BaseQuickAdapter<GsonBean.DataBean.ListBean,BaseViewHolder> {
   

    public GoodsAdapter(int layoutResId, @Nullable List<GsonBean.DataBean.ListBean> data) {
        super(layoutResId, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, final GsonBean.DataBean.ListBean item) {
        //设置文字
        helper.setText(R.id.tv_goodsPrice,"¥:"+item.getPrice());
        helper.setText(R.id.tv_goodsTitle,item.getTitle());

        //设置图片
        ImageView goodsIcon = helper.getView(R.id.iv_goodsIcon);
        String itemImages = item.getImages();

        String[] imagesStr = itemImages.split("\\|");
        Glide.with(mContext).load(imagesStr[0]).into(goodsIcon);
    }
}

猜你喜欢

转载自blog.csdn.net/CXiaoLiu/article/details/86552527