Android仿饿了么购物车功能

布满荆棘的人生 2022-11-21 01:03 405阅读 0赞

现在商城应用上，购物车功能可以说是不可缺少的，每个应用的购物车模块实现方式都差不多，这篇我们来仿一下饿了么的购物车功能，用过的童鞋都知道，印象最深刻的应该是添加或减少数量时，抛物线的动画效果，话不多说，现在让我们来看看是怎么实现的吧.

先看效果图
在这里插入图片描述
效果图可以看出，这个布局还是比较简单的，重点应该还是在抛物线的动画上.

1、列表布局文件

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/container"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="#ffffff">
  8.     <RelativeLayout
  9.         android:id="@+id/rl_main"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="48dp"
  12.         android:background="#ffffff"
  13.         android:orientation="vertical">
  15.         <ImageView
  16.             android:id="@+id/tv_titlebar_left"
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:layout_centerVertical="true"
  20.             android:layout_marginLeft="15dp"
  21.             android:padding="5dp"
  22.             android:src="@drawable/danghanglan_fanhui" />
  24.         <TextView
  25.             android:id="@+id/tv_titlebar_center"
  26.             android:layout_width="200dp"
  27.             android:layout_height="match_parent"
  28.             android:layout_centerHorizontal="true"
  29.             android:ellipsize="end"
  30.             android:gravity="center"
  31.             android:maxLength="18"
  32.             android:singleLine="true"
  33.             android:text="购物车"
  34.             android:textColor="#2f302b"
  35.             android:textSize="17sp"
  36.             android:visibility="visible" />
  38.         <TextView
  39.             android:id="@+id/tv_titlebar_right"
  40.             android:layout_width="wrap_content"
  41.             android:layout_height="match_parent"
  42.             android:layout_alignParentRight="true"
  43.             android:background="@null"
  44.             android:gravity="center"
  45.             android:paddingLeft="15dp"
  46.             android:paddingRight="15dp"
  47.             android:singleLine="true"
  48.             android:text="编辑"
  49.             android:textColor="#2f302b"
  50.             android:textSize="14sp"
  51.             android:visibility="gone" />
  53.         <View
  54.             android:layout_width="match_parent"
  55.             android:layout_height="0.5dp"
  56.             android:layout_alignParentBottom="true"
  57.             android:background="#cccccc" />
  58.     </RelativeLayout>
  60.     <androidx.recyclerview.widget.RecyclerView
  61.         android:id="@+id/rv"
  62.         android:layout_width="match_parent"
  63.         android:layout_height="wrap_content"
  64.         android:layout_below="@id/rl_main"
  65.         android:layout_marginBottom="40dp"/>
  67.     <LinearLayout
  68.         android:layout_width="match_parent"
  69.         android:layout_height="wrap_content"
  70.         android:layout_alignParentBottom="true"
  71.         android:background="#fff"
  72.         android:gravity="center_vertical"
  73.         android:orientation="horizontal">
  75.         <FrameLayout
  76.             android:layout_width="wrap_content"
  77.             android:layout_height="wrap_content"
  78.             android:layout_marginLeft="10dp">
  80.             <ImageView
  81.                 android:id="@+id/iv_shop_cart"
  82.                 android:layout_width="40dp"
  83.                 android:layout_height="40dp"
  84.                 android:padding="2dp"
  85.                 android:src="@mipmap/img_revision_shopping_car" />
  87.             <TextView
  88.                 android:id="@+id/tv_num"
  89.                 android:layout_width="20dp"
  90.                 android:layout_height="20dp"
  91.                 android:layout_gravity="right"
  92.                 android:background="@drawable/tip_message_revision_bg"
  93.                 android:gravity="center"
  94.                 android:text="11"
  95.                 android:textColor="#fff"
  96.                 android:visibility="gone" />
  97.         </FrameLayout>
  99.         <View
  100.             android:layout_width="0dp"
  101.             android:layout_height="1dp"
  102.             android:layout_weight="1" />
  104.         <TextView
  105.             android:layout_width="80dp"
  106.             android:layout_height="30dp"
  107.             android:layout_marginRight="10dp"
  108.             android:background="#d4ab7f"
  109.             android:gravity="center"
  110.             android:text="购买"
  111.             android:textColor="#ffffff" />
  112.     </LinearLayout>
  113. </RelativeLayout>

2、模拟初始化数据

  1. //添加商品数据
  2.         final List<CartModel> list = new ArrayList<>();
  3.         for (int i = 0; i < 20; i++) {
  5.             CartModel cartModel = new CartModel();
  6.             cartModel.setName("麻辣肉碎面-----" + i);
  7.             list.add(cartModel);
  8.         }

3、设置数据

  1. final ShoppingAdapter shoppingAdapter = new ShoppingAdapter(this, list);
  2.  mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
  3.  mRecyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
  4.  mRecyclerView.setAdapter(shoppingAdapter);

4、点击加号操作这里分二钟情况：

一是当数量为0时减号会执行旋转和平移渐变的动画,
二是数量不为0时只会进行抛物线动画,其中抛物线动画实现思路就是得到加号和购物车的坐标，然后得到最外层容器添加一个view来执行这个动画，动画执行完成后移除这个动画:

  1. //点击加号
  2.  myHolder.imageViewAdd.setOnClickListener(new View.OnClickListener() {
  4.       @Override
  5.        public void onClick(View v)
  6.             final CartModel cartModel = mDatas.get(position);
  7.              //如果该商品数量为0就进行这个动画
  8.              if (cartModel.getCount() == 0) {
  10.                     myHolder.imageViewReduce.setVisibility(View.VISIBLE);
  11.                     myHolder.tvAmount.setVisibility(View.VISIBLE);
  12.                     AnimatorSet set = new AnimatorSet();
  13.                     //减号
  14.                     ObjectAnimator ta1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "translationX", mAddLeft - mReduceLeft, 0);
  15.                     ObjectAnimator ra1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "rotation", 0, 360);
  16.                     ObjectAnimator aa1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "alpha", 0, 1);
  18.                     //数字
  19.                     ObjectAnimator ta2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "translationX", mAddLeft - mAmountLeft, 0);
  20.                     ObjectAnimator ra2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "rotation", 0, 360);
  21.                     ObjectAnimator aa2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "alpha", 0, 1);
  22.                     set.play(ta1).with(ra1).with(ta2).with(ra2).with(aa1).with(aa2);
  23.                     set.setDuration(500).start();
  24.                 }
  25.                 //addGoods2CartAnim((ImageView) v,cartModel);
  26.                 //得到加号在屏幕的坐标
  27.                 int[] addLocation = new int[2];
  28.                 v.getLocationInWindow(addLocation);
  29.                 //得到购物车图标的坐标
  30.                 int[] cartLocation = mActivity.getCartLocation();
  31.                 //添加一个imageview
  32.                 final ImageView iv = new ImageView(v.getContext());
  33.                 iv.setBackgroundResource(R.drawable.icon_shop_add);
  34.                 RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(v.getWidth(), v.getHeight());
  35.                 lp.leftMargin = addLocation[0];
  36.                 lp.topMargin = addLocation[1] - v.getHeight();
  38.                 mActivity.getContainer().addView(iv, lp);
  39.                 //横向移动
  40.                 ObjectAnimator oaX = ObjectAnimator.ofFloat(iv, "translationX", cartLocation[0] - addLocation[0] + v.getWidth() / 2);
  41.                 //纵向
  42.                 ObjectAnimator oaY = ObjectAnimator.ofFloat(iv, "translationY", cartLocation[1] - addLocation[1]);
  43.                 oaX.setInterpolator(new LinearInterpolator());
  44.                 oaY.setInterpolator(new AccelerateInterpolator());
  45.                 AnimatorSet set = new AnimatorSet();
  46.                 set.play(oaX).with(oaY);
  47.                 set.setDuration(500).start();
  48.                 set.addListener(new Animator.AnimatorListener() {
  50.                     @Override
  51.                     public void onAnimationStart(Animator animation) {
  52.     }
  54.                     @Override
  55.                     public void onAnimationEnd(Animator animation) {
  57.                         //移除这个view
  58.                         mActivity.getContainer().removeView(iv);
  59.                         //跟新购物车
  60.                         cartModel.setCount(cartModel.getCount() + 1);
  61.                         ((MyHolder) holder).tvAmount.setText(String.valueOf(cartModel.getCount()));
  62.                         mActivity.mCount++;
  63.                         mActivity.setMtvNum();
  64.                     }
  66.                     @Override
  67.                     public void onAnimationCancel(Animator animation) {
  68.     }
  70.                     @Override
  71.                     public void onAnimationRepeat(Animator animation) {
  72.     }
  73.                 });
  74.             }
  75.         });

5、减法动画效果

  1. //点击减号
  2.         myHolder.imageViewReduce.setOnClickListener(new View.OnClickListener() {
  4.             @Override
  5.             public void onClick(View v) {
  7.                 final CartModel cartModel = mDatas.get(position);
  8.                 //如果该商品数量为1就进行这个动画
  9.                 if (cartModel.getCount() == 1) {
  11.                     AnimatorSet set = new AnimatorSet();
  12.                     //减号
  13.                     ObjectAnimator ta1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "translationX", 0, mAddLeft - mReduceLeft);
  14.                     ObjectAnimator ra1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "rotation", 0, 360);
  15.                     ObjectAnimator aa1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "alpha", 1, 0);
  17.                     //数字
  18.                     ObjectAnimator ta2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "translationX", 0, mAddLeft - mAmountLeft);
  19.                     ObjectAnimator ra2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "rotation", 0, 360);
  20.                     ObjectAnimator aa2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "alpha", 1, 0);
  21.                     set.play(ta1).with(ra1).with(ta2).with(ra2).with(aa1).with(aa2);
  22.                     set.setDuration(500).start();
  23.                     set.addListener(new Animator.AnimatorListener() {
  25.                         @Override
  26.                         public void onAnimationStart(Animator animation) {
  27.     }
  29.                         @Override
  30.                         public void onAnimationEnd(Animator animation) {
  32.                             cartModel.setCount(cartModel.getCount() - 1);
  33.                             myHolder.tvAmount.setText(String.valueOf(cartModel.getCount()));
  34.                             if(cartModel.getCount()==0){
  36.                                 myHolder.tvAmount.setVisibility(View.INVISIBLE);
  37.                                 myHolder.imageViewReduce.setVisibility(View.INVISIBLE);
  38.                             }
  39.                             mActivity.mCount--;
  40.                             mActivity.setMtvNum();
  41.                         }
  43.                         @Override
  44.                         public void onAnimationCancel(Animator animation) {
  45.     }
  47.                         @Override
  48.                         public void onAnimationRepeat(Animator animation) {
  49.     }
  50.                     });
  52.                 } else {
  54.                     cartModel.setCount(cartModel.getCount() - 1);
  55.                     myHolder.tvAmount.setText(String.valueOf(cartModel.getCount()));
  56.                     mActivity.mCount--;
  57.                     mActivity.setMtvNum();
  58.                 }
  60.             }
  61.         });

该功能的实现重点在抛物线的动画效果上，这里就不把完整的代码添加进去了，不然影响阅读体验，需要完整源码的童鞋底部关注公众号回复:“仿饿了么购物车” 即可获得哦.

到这里就结束啦.

小编整理了一份Android电子书籍，需要的童鞋关注底部公众号(longxuanzhigu)回复：“e_books” 即可获取哦！
在这里插入图片描述

以下是公众号(longxuanzhigu)，之后发布的文章会同步到该公众号，方便交流学习Android知识，欢迎关注：

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android仿饿了么购物车功能

    现在商城应用上，购物车功能可以说是不可缺少的，每个应用的购物车模块实现方式都差不多，这篇我们来仿一下饿了么的购物车功能，用过的童鞋都知道，印象最深刻的应该是添加或减少数量时，抛

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 406 阅读

    相关 Vue 仿淘宝购物车

    效果图： ![这里写图片描述][70] ![这里写图片描述][70 1] 我们只是做演示，其中的数据应该从后台来取得，这里我们模拟几条数据来显示。 页面布局：

    小灰灰小灰灰/ 0 赞/ 393 阅读