Android：玩转购物车界面和逻辑只需要一层Recyclerv
距离上一次写文章已经算是有点时间了，最近在公司比较忙，所以很难抽时间时间出来研究什么黑科技。所以，这次就想分享一下自己的项目经验，在外包公司里面必须遇到和学会的购物车界面和逻辑。有人说购物车一般需要做3天或者5天，但我看来，第一次做只需要用两到三个小时想好后台回来的数据处理，和处理好该有的逻辑就好了。在分析自己的做法之前先看看我做的购物车的效果。
购物车效果图.gif
我自己觉得，效果还不懒，哈哈。那接下来就分析一下我自己的理解和做法。
如果不想听我啰嗦的人可以直接去下载源码源码下载链接
首先我们看看后台返回来的数据类型是怎么样的，再决定怎么去做相应的界面。
{
"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的布局.png
很明显，每个item都含有商铺名字的header，那下面我就要具体讲讲整个购物车的界面逻辑怎么去做了。
首先我们要在商品的实体类中加入三个属性：
添加三个关键属性.png
看到isSelect和isShopSelect两个属性可能大家都明白这是用来干什么的，唯独isFirst这个属性可能大家不是很懂。那下面我来解释一下：
我们用一层的RecyclerView来做到效果图那样看上去有两层嵌套的效果，必须依赖isFirst这个属性。看下下面的数据类型大家就会明白：
数据类型.png
我们拿到数据之后直接舍弃了第一层的商铺的一些信息，然后把所有的商品信息放到同一条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。
3(I[72}K2W70Z]6@64BV`YG.png
是否显示头部商铺名.png
界面效果图.png
好了，以上购物车的界面就算完成了，是不是很简单？
下面我们来讲讲剩下的一半，购物车的逻辑，也就是各种选中与未选中的控制。首先，让商铺的勾选与商铺下的商品的勾选连上关系。
用商铺的勾选跟商品的勾选连上关系.png
我思前想后，发现用一个二层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循环处理好数据，只需要按属性来判断显示选中情况就好了
根据属性显示该商品或商铺的选中情况.png
如果还想让外层与RecyclerView的子项互相控制的话像这样：
外层与RecyclerView的子项互相控制.png
很简单，我们只需要像RecyclerView的子项监听一样，写个接口，就可以很容易与Activity的其他控件互相控制
实时更新的接口.png
adapter的方法.png
Activity需要怎么写.png
好了，以上就是我自己做的一个购物车，看上去很复杂，其实用很简单的原理就可以实现，只需要三个属性isSelect、isShopSelect和isFirst,一层RecyclerView和一个二层for循环完美实现整个购物车的所有功能，无需嵌套布局。有兴趣的同学可以下载源码下来慢慢研究琢磨，一起进步！
源码下载链接
