仿饿了么购物车下单效果
2016-07-13 00:11
651 查看
仿饿了么购物车下单效果
前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:
![](https://raw.githubusercontent.com/917386389/shopcar/master/screenshot/1.gif)
主要的功能:
就是左侧展示分类,右侧展示分类下商品的,点击右侧分类下的商品,如果商品是套餐类型的话,点击可以看套餐详情,下单选择完商品后,可以在购物车里面添加或减少商品数量。
主要功能实现:
1:分类及商品及购物车里面商品数量的联动效果2:底部购物车商品列表
3:选择左侧分类效果
4:添加商品是有0到1,减少商品有1到0动画效果
5:下单动画
1:分类及商品及购物车里面商品数量的联动效果
商品的分类和商品展示分别是两个列表,每一个商品的数量取商品的number、商品分类是取每一个分类下的商品list里面遍历商品取商品数量之和。然后商品列表的GoodsAdapter里面有一个参数传的是商品分类的CatograyAdapter,当下单时减少或则添加商品时,都会调 MainActivity的handlerCarNum方法。
减少时type传0,添加时传1。通过一个SparseArray,key是商品的product_id,value为商品的下单个数。1:当添加商品都会传入一个商品对象goodsBean,通过product_id取到这个商品对象,如果商品对象为空时,给传入的对象下单数量goodsBean.setNum(1),否则goodsBean.setNum(++i)。2:当减少商品时,通过product_id取到这个商品对象,通过对象取对象的下单数量如果小与2的时候goodsBean.setNum(0),并将该对象从SparseArray中remove否goodsBean.setNum(–i)。最后调update方法更新GoodsAdapter,CatograyAdapter.
public void handlerCarNum(int type, GoodsBean goodsBean, boolean refreshGoodList){ if (type == 0) { GoodsBean temp = selectedList.get(goodsBean.getProduct_id()); if(temp!=null){ if(temp.getNum()<2){ goodsBean.setNum(0); selectedList.remove(goodsBean.getProduct_id()); }else{ int i = goodsBean.getNum(); goodsBean.setNum(--i); } } } else if (type == 1) { GoodsBean temp = selectedList.get(goodsBean.getProduct_id()); if(temp==null){ goodsBean.setNum(1); selectedList.append(goodsBean.getProduct_id(), goodsBean); }else{ int i= goodsBean.getNum(); goodsBean.setNum(++i); } } update(refreshGoodList); }
//刷新布局 总价、购买数量等 private void update(boolean refreshGoodList){ int size = selectedList.size(); int count =0; for(int i=0;i<size;i++){ GoodsBean item = selectedList.valueAt(i); count += item.getNum(); totleMoney += item.getNum()*Double.parseDouble(item.getPrice()); } tv_totle_money.setText("¥"+String.valueOf(df.format(totleMoney))); totleMoney = 0.00; if(count<1){ bv_unm.setVisibility(View.GONE); }else{ bv_unm.setVisibility(View.VISIBLE); } bv_unm.setText(String.valueOf(count)); if(productAdapter!=null){ productAdapter.notifyDataSetChanged(); } if(goodsAdapter!=null){ goodsAdapter.notifyDataSetChanged(); } if(catograyAdapter!=null){ catograyAdapter.notifyDataSetChanged(); } if(bottomSheetLayout.isSheetShowing() && selectedList.size()<1){ bottomSheetLayout.dismissSheet(); } }
2:底部购物车商品列表
点击购物车查看购物车列表时,就是给含有下单商品的HashMap作为参数传入ProductAdapter中,在购物车中添加或减少商品数量同样是调 MainActivity的handlerCarNum方法。除此之外,购物车列表弹起的效果可以用一个bottomsheet效果。as直接集成
compile’com.flipboard:bottomsheet-core:1.5.1’即可。
3:选择左侧分类效果
由于选择分类时,既要改变分类的背景色也要改变选择分类文字的颜色,就不能直接在xml里面设置了,需要在getview里面根据外面传进来选择的selection与position比较后设置。public void setSelection(int selection) { this.selection = selection; }
if (position == selection) { viewholder.tv_catogray.setBackgroundResource(R.drawable.rec_red_left_stroke); viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.black)); } else { viewholder.tv_catogray.setBackgroundResource(R.drawable.empty); viewholder.tv_catogray.setTextColor(context.getResources().getColor(R.color.gray)); }
4:添加商品是有0到1,减少商品有1到0动画效果
其实动画效果做起来也不是特别复杂,首先要搞清android的几种动画效果,分为在Android3.0(即API Level11)以前,Android仅支持2种动画:分别是Frame Animation(逐帧动画)和Tween Animation(补间动画),在3.0之后Android支持了一种新的动画系统,称为:Property Animation(属性动画)。最常用的补间动画最常用的4中效果如下:
alpha | 渐变透明度动画效果 |
scale | 渐变尺寸伸缩动画效果 |
translate | 画面转换位置移动动画效果 |
rotate | 画面转移旋转动画效果 |
//显示减号的动画 private Animation getShowAnimation(){ AnimationSet set = new AnimationSet(true); RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f); set.addAnimation(rotate); TranslateAnimation translate = new TranslateAnimation( TranslateAnimation.RELATIVE_TO_SELF,2f ,TranslateAnimation.RELATIVE_TO_SELF,0 ,TranslateAnimation.RELATIVE_TO_SELF,0 ,TranslateAnimation.RELATIVE_TO_SELF,0); set.addAnimation(translate); AlphaAnimation alpha = new AlphaAnimation(0,1); set.addAnimation(alpha); set.setDuration(500); return set; } //隐藏减号的动画 private Animation getHiddenAnimation(){ AnimationSet set = new AnimationSet(true); RotateAnimation rotate = new RotateAnimation(0,720,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f); set.addAnimation(rotate); TranslateAnimation translate = new TranslateAnimation( TranslateAnimation.RELATIVE_TO_SELF,0 ,TranslateAnimation.RELATIVE_TO_SELF,2f ,TranslateAnimation.RELATIVE_TO_SELF,0 ,TranslateAnimation.RELATIVE_TO_SELF,0); set.addAnimation(translate); AlphaAnimation alpha = new AlphaAnimation(1,0); set.addAnimation(alpha); set.setDuration(500); return set; }
5:下单动画
下单动画首先要获取添加商品时的初始位置坐标,通过getLocationInWindow方法获取初始位置的心x,y坐标,然后获取添加商品要消失的地方的坐标,一般都选择购物车logo的坐标。然后计算x,y的位移值后,通过TranslateAnimation转换移动效果,x,y同时移动就实现了抛物线的效果。最后不要忘记设置当动画结束的时候隐藏抛过来的小图标。public void setAnim(final View v, int[] startLocation) { anim_mask_layout = null; anim_mask_layout = createAnimLayout(); anim_mask_layout.addView(v);//把动画小球添加到动画层 final View view = addViewToAnimLayout(anim_mask_layout, v, startLocation); int[] endLocation = new int[2];// 存储动画结束位置的X、Y坐标 tv_car.getLocationInWindow(endLocation); // 计算位移 int endX = 0 - startLocation[0] + 40;// 动画位移的X坐标 int endY = endLocation[1] - startLocation[1];// 动画位移的y坐标 TranslateAnimation translateAnimationX = new TranslateAnimation(0,endX, 0, 0); translateAnimationX.setInterpolator(new LinearInterpolator()); translateAnimationX.setRepeatCount(0);// 动画重复执行的次数 translateAnimationX.setFillAfter(true); TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY); translateAnimationY.setInterpolator(new AccelerateInterpolator()); translateAnimationY.setRepeatCount(0);// 动画重复执行的次数 translateAnimationY.setFillAfter(true); AnimationSet set = new AnimationSet(false); set.setFillAfter(false); set.addAnimation(translateAnimationY); set.addAnimation(translateAnimationX); set.setDuration(800);// 动画的执行时间 view.startAnimation(set); // 动画监听事件 set.setAnimationListener(new Animation.AnimationListener() { // 动画的开始 @Override public void onAnimationStart(Animation animation) { v.setVisibility(View.VISIBLE); } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } // 动画的结束 @Override public void onAnimationEnd(Animation animation) { v.setVisibility(View.GONE); } }); }
最后肯定少不了源码下载地址:shopcar 感觉需要的朋友欢迎star,fork,有问题可以提issue。
相关文章推荐
- 雷军:搅和不是要把大家搞死(用互联网的方式和实体经济结合的方法,希望帮助100个行业进步)
- Windows 7个性化配置,关闭Win7动画效果,设置窗口背景为“ 豆绿色”,移动“我的文档”
- H - Wormholes
- 多边形和虚线矩形框
- 如何修改 Total commander 配置文件的路径
- NYOJ 925 最小生成树(按权值大小排序生成树)+查重函数unique
- UDP,TCP,SCTP使用场合
- 基本数据类型在不同字长机器上所占的位数
- 【荐2】Total Commander 7.57 配置选项 个性化设置备份,,,开启时如何自动最大化???(二)
- SCU2016-04 G题 01trie树第k大,树上异或路径
- 自定义无内存泄漏的Handler内部类
- 谈谈PE和ELF结构中的那些小事
- 装饰者模式vs适配器模式
- 【荐1】Total Commander 7.57 个人使用设置 及 常用快捷键 备忘
- 【greenDAO3】 项目搭建与增删改查操作
- Android基础之LaunchMode
- Java集成Weka做逻辑回归(Logistic Regression)
- C语言指针的易错点
- 开源流媒体云视频平台EasyDarwin中EasyCMS服务是如何进行命令转发和消息路由的
- 开源流媒体云视频平台EasyDarwin中EasyCMS服务是如何进行命令转发和消息路由的