Android:玩轉(zhuǎn)購(gòu)物車界面和邏輯只需要一層Recyclerview,一個(gè)二層for循環(huán)和三個(gè)屬性 ...
距离上一次写文章已经算是有点时间了,最近在公司比较忙,所以很难抽时间时间出来研究什么黑科技。所以,这次就想分享一下自己的项目经验,在外包公司里面必须遇到和学会的购物车界面和逻辑。有人说购物车一般需要做3天或者5天,但我看来,第一次做只需要用两到三个小时想好后台回来的数据处理,和处理好该有的逻辑就好了。在分析自己的做法之前先看看我做的购物车的效果。
我自己觉得,效果还不懒,哈哈。那接下来就分析一下我自己的理解和做法。
如果不想听我啰嗦的人可以直接去下载源码源码下载链接
首先我们看看后台返回来的数据类型是怎么样的,再决定怎么去做相应的界面。
{ "message": "查询成功", "status": "200", "result": [ { "shopId": 2,//店铺 "shopName": null,//店铺名称 "cartlist": [//购物车商品 { "id": 2,//购物车 "shopId": 2, "shopName": null, "defaultPic": "111.jpg",//默认略缩图 "productId": 2,//商品 "productName": null,//商品名称 "color": null,//颜色 "size": null,//尺寸 "price": null,//单价 "count": null//数量 }, { "id": 2,//购物车 "shopId": 2, "shopName": null, "defaultPic": "111.jpg",//默认略缩图 "productId": 2,//商品 "productName": null,//商品名称 "color": null,//颜色 "size": null,//尺寸 "price": null,//单价 "count": null//数量 } ] }, { "shopId": 2,//店铺 "shopName": null,//店铺名称 "cartlist": [//购物车商品 { "id": 2,//购物车 "shopId": 2, "shopName": null, "defaultPic": "111.jpg",//默认略缩图 "productId": 2,//商品 "productName": null,//商品名称 "color": null,//颜色 "size": null,//尺寸 "price": null,//单价 "count": null//数量 }, { "id": 2,//购物车 "shopId": 2, "shopName": null, "defaultPic": "111.jpg",//默认略缩图 "productId": 2,//商品 "productName": null,//商品名称 "color": null,//颜色 "size": null,//尺寸 "price": null,//单价 "count": null//数量 } ] } ] }
看看我们的界面,我们需要做到的是每间商铺的第一个商品的头部显示商铺的名字。同一间商铺的第二个商品开始就不显示商铺的名字。看到上面的数据,我们很明显看到有两层数据第一层是以商铺来分的list,第二层是以每间商铺的商品来分的list。结合我们的需求和后台返回来的数据结构,我想到了两种方式去构造这个界面。
1.用RecyclerView嵌套RecyclerView, 商铺是第一层RecyclerView的item,每间商铺的商品显示是第二层RecyclerView。2.一层RecyclerView解决问题: (1)分两种布局去做,第一种布局是含有商铺名字header的item, 第二种是不含有商铺名字no_header的item。 (2)一种布局完成所有操作,具体做法是,记录以同一间商铺id的第一件商品的位置, 然后通过这样的记录在adapter里面去显示和隐藏每个item相应的header。
好吧,我想到的方法都在上面罗列出来了,很明显,看过我之前文章的朋友都知道我是一个很懒的人,什么都喜欢简洁。而且基于安卓各种View的嵌套会出现各种各样的问题,所以我采取了第2种的(2)解决问题,也就是用一层RecyclerView来解决整个购物车的所有问题。
下面看看RecyclerView的item布局
很明显,每个item都含有商铺名字的header,那下面我就要具体讲讲整个购物车的界面逻辑怎么去做了。
首先我们要在商品的实体类中加入三个属性:
看到isSelect和isShopSelect两个属性可能大家都明白这是用来干什么的,唯独isFirst这个属性可能大家不是很懂。那下面我来解释一下:
我们用一层的RecyclerView来做到效果图那样看上去有两层嵌套的效果,必须依赖isFirst这个属性。看下下面的数据类型大家就会明白:
我们拿到数据之后直接舍弃了第一层的商铺的一些信息,然后把所有的商品信息放到同一条list里面。
ArrayList<商品> mGoPayList = new ArrayList<>(); mGoPayList.addall(商铺.商品);
然后直接利用每件商品里面的Shopid来标记一下哪件商品是在商铺的第一个商品:
public static void isSelectFirst(List<ShopCartBean.CartlistBean> list){ if(list.size() > 0) { //头个商品一定属于它所在商铺的第一个位置,isFirst标记为1. list.get(0).setIsFirst(1); for (int i = 1; i < list.size(); i++) { //每个商品跟它前一个商品比较,如果Shopid相同isFirst则标记为2, //如果Shopid不同,isFirst标记为1. if (list.get(i).getShopId() == list.get(i - 1).getShopId()) { list.get(i).setIsFirst(2); } else { list.get(i).setIsFirst(1); } } } }
然后我们利用这个isFirst属性在adapter来判断子项是否显示它属于哪间商铺的header。
头部
是否显示头部商铺名
界面效果图
好了,以上购物车的界面就算完成了,是不是很简单?
下面我们来讲讲剩下的一半,购物车的逻辑,也就是各种选中与未选中的控制。首先,让商铺的勾选与商铺下的商品的勾选连上关系。
我思前想后,发现用一个二层for循环就可以做到这样的效果,我利用的就是上面我让大家去给商品加的三个属性,isSelect、isShopSelect和isFirst。
holder.ivShopCartClothSel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { data.get(position).setSelect(!data.get(position).getIsSelect()); //通过循环找出不同商铺被标记的第一个商品的位置 for(int i = 0;i < data.size(); i++){ if(data.get(i).getIsFirst() == 1) { //遍历去找出同一家商铺的所有商品的勾选情况 for(int j = 0;j < data.size();j++){ //如果是同一家商铺的商品,并且其中一个商品是未选中, //那么商铺的全选勾选取消 if(data.get(j).getShopId() == data.get(i).getShopId() && !data.get(j).getIsSelect()){ data.get(i).setShopSelect(false); break; }else{ //如果是同一家商铺的商品,并且所有商品是选中,那么商铺的选中全选勾选 data.get(i).setShopSelect(true); } } } } notifyDataSetChanged(); } });
然后我们看看商铺的勾选控制商品的勾选情况是怎么做到的:
holder.ivShopCartShopSel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //如果position的isFirst为1,证明是每个商铺的第一件商品 //而且这件商品有商铺的头部header if(data.get(position).getIsFirst() == 1) { //isShopSelect取反选 data.get(position).setShopSelect(!data.get(position).getIsShopSelect()); for(int i = 0;i < data.size();i++){ //如果Shopid与position的Shopid相同, // 则设置它的选中情况与position的isShopSelect选中情况一样 if(data.get(i).getShopId() == data.get(position).getShopId()){ data.get(i).setSelect(data.get(position).getIsShopSelect()); } } notifyDataSetChanged(); } } });
用一个二层的for循环处理好数据,只需要按属性来判断显示选中情况就好了
如果还想让外层与RecyclerView的子项互相控制的话像这样:
很简单,我们只需要像RecyclerView的子项监听一样,写个接口,就可以很容易与Activity的其他控件互相控制
实时更新的接口:
adapter的方法:
Activity需要怎么写:
好了,以上就是我自己做的一个购物车,看上去很复杂,其实用很简单的原理就可以实现,只需要三个属性isSelect、isShopSelect和isFirst,一层RecyclerView和一个二层for循环完美实现整个购物车的所有功能,无需嵌套布局。有兴趣的同学可以下载源码下来慢慢研究琢磨,一起进步!
共同學(xué)習(xí),寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章