登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

Android:玩转购物车界面和逻辑只需要一层Recyclerview,一个二层for循环和三个属性 ...

2017-1-10 23:09
19snow93 阅读:399 评论:0 赞:2
Tag:  Android购物车

距离上一次写文章已经算是有点时间了,最近在公司比较忙,所以很难抽时间时间出来研究什么黑科技。所以,这次就想分享一下自己的项目经验,在外包公司里面必须遇到和学会的购物车界面和逻辑。有人说购物车一般需要做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。
头部
头部.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的方法:
adapter的方法.png
Activity需要怎么写:
Activity需要怎么写.png
好了,以上就是我自己做的一个购物车,看上去很复杂,其实用很简单的原理就可以实现,只需要三个属性isSelect、isShopSelect和isFirst,一层RecyclerView和一个二层for循环完美实现整个购物车的所有功能,无需嵌套布局。有兴趣的同学可以下载源码下来慢慢研究琢磨,一起进步!
源码下载链接https://github.com/19snow93/ShopCartLogic

欢迎来我的简书博客http://www.jianshu.com/u/b538ca57f640

分享到:
我来说两句
您需要登录后才可以评论 登录 | 立即注册
所有评论(0)

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /7 下一条

广告投放| Github|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

返回顶部