公众号【刘桂林】

本文为实战类项目,所以陈述的逻辑为实现流程 + 核心代码,主要实现的还是购物车的动画与结算,首先我们来看下整体的效果图:

Android 商城类应用实战之购物车附源码_嵌套

购物车一般都是后台存储的,这里因为是模拟数据,所以就不用存储了,直接将数据储存在内存中即可,也算是偷个懒儿~

好了,我们一步步来

ViewPager轮播
首先我们要处理一下轮播,其实轮播还是比较简单的,就是一个ViewPager + Handler ,先来看下 PagerAdapter的代码吧!
Android 商城类应用实战之购物车附源码_嵌套_02
创建一个Class继承PagerAdapter,其中getCount为View个数,instantiateItem为添加View,destroyItem为销毁View,我们只需要这样初始化就可以实现ViewPager了
Android 商城类应用实战之购物车附源码_数据_03
那如何实现自动轮播呢? 自动轮播这里我使用了Handler去定时,这样做并不是很好,但是实现一个Demo效果还是没什么问题的
Android 商城类应用实战之购物车附源码_数据_04
每隔3s就去翻页,如果已经到最后一页则切换到第一个,就是这个逻辑了

RecyclerView商品列表
再来看下我们的商品列表,商品列表是一个RecyclerView,购物出里也有一个列表,大同小异罢了,我们来看他的Adapter实现
Android 商城类应用实战之购物车附源码_android_05
这个适配器现在并没有加入动画,我们按照流程一步步来,现在还是停留在实现UI上,可以看到,代码还是比较简洁的,我们可以利用点击事件去做数量的操作和购买,并且每次添加购物车都是对外的接口去处理的,我们来看下具体如何处理:
Android 商城类应用实战之购物车附源码_android_06
可以看到,我们在接口中先刷新了购物车,然后计算总价,这样我们的列表 + 数据提供,算是做好了,接下来就看看如何实现购物车了。

购物车窗体
接我们需要实现购物车的窗体,购物车的窗体虽然娇小,但是量还是比较大的,他里面同样有一个列表,而且需要一个Dialog,所以这里给大家看下自定义的Dialog
Android 商城类应用实战之购物车附源码_嵌套_07

其实就是重写了一下宽高,然后我们初始化购物车
Android 商城类应用实战之购物车附源码_android_08

购物车主要还是在提示框里进行操作,他的列表和商品列表异曲同工,没什么难度,我们只需要知道RecyclerView的Adapter如何去写,这些都不算什么,当然,大部分的人还是会封装一个通用的适配器,不然这么多适配器也太繁琐了。
Android 商城类应用实战之购物车附源码_android_09

基本上购物车也出来了
Android 商城类应用实战之购物车附源码_购物车_10

到这里基本上UI都是完成了的,如果不考虑动画的话,这个已经算是一个比较合格的商城了,但是重头戏来了,我们需要做添加购物车的动画,相信大家都见过这个动画,其实就是抛物线 + 缩放,使用补间组合动画就能实现的。

购物车动画
动画的实现思路大概如下:

1.获取到动画起始点的坐标
2.根据起始View创建一个新的View作为动画执行者
3.创建一个全透明屏幕大小的ViewGroup在其中操作新View去进行抛物线的动画
4.补间动画又平移到缩放产生视觉效果
5.最后监听动画开始则显示新View,结束则隐藏新View

所以我对ShopAdapter做了一些改动来传参动画所需的参数,并且封装了动画AnimationManager,让我们来看下代码:
Android 商城类应用实战之购物车附源码_购物车_11

点击商品列表的购买之后启动动画

AnimationManager.newInstance().startAnimation(viewHolder.iv_icon,mActivity,endView);

将起始View和终点View传入进行运算,最终得到动画效果如下Gif:
Android 商城类应用实战之购物车附源码_android_12

RecyclerView嵌套ScollView

RecyclerView嵌套ScollView,导致不能滑动,这个问题也是会出现的,因为我们的布局就是这样嵌套的,所以我们需要做一些改动,重写RecyclerView
Android 商城类应用实战之购物车附源码_android_13

至于布局和资源文件什么的,大家可以在下面的附件中直接查看源码