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循环完美实现整个购物车的所有功能，无需嵌套布局。有兴趣的同学可以下载源码下来慢慢研究琢磨，一起进步！
源码下载链接