仿饿了么购物车下单效果
来源:互联网 发布:道格克里斯蒂数据 编辑:程序博客网 时间:2024/05/02 04:52
仿饿了么购物车下单效果
前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。
效果图如下:
主要的功能:
就是左侧展示分类,右侧展示分类下商品的,点击右侧分类下的商品,如果商品是套餐类型的话,点击可以看套餐详情,下单选择完商品后,可以在购物车里面添加或减少商品数量。
主要功能实现:
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中效果如下:
添加商品是有0到1,减少商品有1到0动画效果其实就是利用了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。
- 仿饿了么购物车下单效果
- 仿饿了么点击购物效果
- 仿饿了么购物车下单动画效果
- 仿饿了么购物车效果(UI效果)
- iOS 仿百度外卖,饿了么-点餐效果(加入购物车效果)
- android 仿饿了么购物车
- android 仿饿了么购物车
- 仿饿了么加入购物车旋转控件
- 仿饿了么加入购物车旋转控件
- 仿饿了么加入购物车旋转控件
- 仿饿了么加入购物车旋转控件
- 仿饿了么悬浮购物车按钮
- 仿饿了么下拉刷新效果
- 饿了么购物车效果(附源码)
- 仿Android端饿了么外卖的效果
- 仿饿了么加入购物车旋转控件 - 自带闪转腾挪动画 的按钮
- Android之仿饿了吗购物车抛物线动画
- 仿饿了吗配送时间效果
- NYOJ 925 最小生成树(按权值大小排序生成树)+查重函数unique
- 多边形和虚线矩形框
- H - Wormholes
- Java多线程完整版基础知识
- iOS segment的分页使用
- 仿饿了么购物车下单效果
- Service的使用
- X 射线
- Retrofit项目封装使用
- 通过案例一步学习理解java反射机制
- SAS导入外部数据
- Hbase 日常运维
- 安装git
- JAVA基础再回首(四)——面向对象思想、类与对象、成员/局部变量、匿名对象、封装、private、this、构造方法