Android仿饿了么购物车效果

作者: digtal_ | 来源:发表于2018-08-06 17:48 被阅读216次

Android仿饿了么购物车效果
仿饿了么购物车下单效果
沪江学习Android端应用架构重构
android精仿今日头条源码，饿了么点餐源码等
仿饿了么添加购物车效果
Android仿饿了么购物车功能
Android仿饿了么购物车功能
Android停止Animation动画
[笔记] Vue 实现加入购物车效果小球抛物线
Android仿淘宝购物车

先看下效果图:

ezgif-1-8f133ca916.gif

1.首先列表布局采用Recycleview

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/container"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.v7.widget.RecyclerView>

    <LinearLayout
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/iv_shop_cart"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:padding="2dp"
                android:src="@mipmap/icon_shop_shopcart"/>

            <TextView
                android:visibility="gone"
                android:gravity="center"
                android:text="11"
                android:id="@+id/tv_num"
                android:textColor="#fff"
                android:layout_gravity="right"
                android:background="@drawable/cart_num"
                android:layout_width="20dp"
                android:layout_height="20dp"/>
        </FrameLayout>
        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="80dp"
            android:layout_height="30dp"
            android:layout_marginRight="6dp"
            android:background="#f17334"
            android:gravity="center"
            android:text="购买"
            android:textColor="#ffffff"/>

    </LinearLayout>

</RelativeLayout>

2.购物车item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:background="#fff"
                android:orientation="horizontal">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:src="@mipmap/icon_shop_goods"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/iv"
        android:text="麻辣牛肉粉"
        android:textColor="#000"/>

    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/iv"
        android:text="精选上等黄牛肉,加上特制秘方..."
        android:textSize="12sp"/>

    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv2"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/iv"
        android:background="@drawable/shape_discount"
        android:paddingLeft="4dp"
        android:paddingRight="2dp"
        android:text="8折"
        android:textColor="#fff"
        android:textSize="12sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv2"
        android:layout_marginTop="10dp"
        android:layout_toRightOf="@+id/tv3"
        android:background="@drawable/shape_users"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="饿了么vip专享"
        android:textColor="#fff"
        android:textSize="12sp"/>

    <TextView
        android:id="@+id/tv_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="40dp"
        android:layout_toRightOf="@+id/iv"
        android:text="￥19.99元"
        android:textColor="#ff00"/>

    <TextView
        android:id="@+id/tv_old"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/tv_price"
        android:layout_marginLeft="5dp"
        android:text="￥28.50元"
        android:textSize="13sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/iv_reduce"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignBottom="@+id/tv_price"
        android:layout_toLeftOf="@+id/tvamount"
        android:src="@mipmap/icon_shop_reduce"/>

    <TextView
        android:id="@+id/tvamount"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignBottom="@+id/tv_price"
        android:layout_centerInParent="true"
        android:layout_toLeftOf="@+id/iv_add"
        android:gravity="center"
        android:text="1"
        android:textColor="#000"/>
    <ImageView
        android:id="@+id/iv_add"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignBottom="@+id/tv_price"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:src="@mipmap/icon_shop_add"/>

</RelativeLayout>

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

  //得到加号在屏幕的坐标
                int[] addLocation = new int[2];
                v.getLocationInWindow(addLocation);
                //得到购物车图标的坐标
                int[] cartLocation = mActivity.getCartLocation();
                //添加一个imageview
                final ImageView iv = new ImageView(v.getContext());
                iv.setBackgroundResource(R.mipmap.icon_shop_add);
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(v.getWidth(), v.getHeight());
                lp.leftMargin = addLocation[0];
                lp.topMargin = addLocation[1] - v.getHeight();

                mActivity.getContainer().addView(iv, lp);
                //横向移动
                ObjectAnimator oaX = ObjectAnimator.ofFloat(iv, "translationX", cartLocation[0] - addLocation[0] + v.getWidth() / 2);
                //纵向
                ObjectAnimator oaY = ObjectAnimator.ofFloat(iv, "translationY", cartLocation[1] - addLocation[1]);
                oaX.setInterpolator(new LinearInterpolator());
                oaY.setInterpolator(new AccelerateInterpolator());
                AnimatorSet set = new AnimatorSet();
                set.play(oaX).with(oaY);
                set.setDuration(500).start();

4.完整代码:

  private RecyclerView mRecyclerView;
    private ImageView mIvCart;
    private RelativeLayout mContainer;
    private TextView mtvNum;
    public int mCount = 0;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shopping_cart);
        mRecyclerView = findViewById(R.id.rv);
        mIvCart = findViewById(R.id.iv_shop_cart);
        mContainer = findViewById(R.id.container);
        mtvNum = findViewById(R.id.tv_num);
        final List<CartModel> list = new ArrayList<>();
        for (int i = 0; i < 20; i++) {
            CartModel cartModel = new CartModel();
            cartModel.setName("红烧牛肉面" + i);
            list.add(cartModel);
        }
        final ShoppingAdapter shoppingAdapter = new ShoppingAdapter(this, list);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        mRecyclerView.setAdapter(shoppingAdapter);
        //购物车点击事件的回调
    }

    /**
     * 得到布局最外层
     *
     * @return
     */
    public RelativeLayout getContainer() {
        return this.mContainer;
    }

    /**
     * 得到购物车在窗体上的坐标
     *
     * @return
     */
    public int[] getCartLocation() {
        int[] cartLocation = new int[2];
        mIvCart.getLocationInWindow(cartLocation);
        return cartLocation;
    }


    public void setMtvNum() {
        if (mCount > 0) {
            mtvNum.setText(String.valueOf(mCount));
            mtvNum.setVisibility(View.VISIBLE);
        }else {
            mtvNum.setVisibility(View.GONE);
        }
    }

  private List<CartModel> mDatas;
    private int mAmountLeft;
    private int mReduceLeft;
    private int mAddLeft;
    private ShoppingCartActivity mActivity;

    public ShoppingAdapter(Activity activity, List<CartModel> list) {
        mDatas = list;
        this.mActivity = (ShoppingCartActivity) activity;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_shopping_cart, parent, false);
        MyHolder holder = new MyHolder(view);
        return holder;
    }

       @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
        final MyHolder myHolder = (MyHolder) holder;
        myHolder.setItem(position);
        //点击加号
        myHolder.imageViewAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final CartModel cartModel = mDatas.get(position);
                //如果该商品数量为0就进行这个动画
                if (cartModel.getCount() == 0) {
                    myHolder.imageViewReduce.setVisibility(View.VISIBLE);
                    myHolder.tvAmount.setVisibility(View.VISIBLE);
                    AnimatorSet set = new AnimatorSet();
                    //减号
                    ObjectAnimator ta1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "translationX", mAddLeft - mReduceLeft, 0);
                    ObjectAnimator ra1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "rotation", 0, 360);
                    ObjectAnimator aa1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "alpha", 0, 1);

                    //数字
                    ObjectAnimator ta2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "translationX", mAddLeft - mAmountLeft, 0);
                    ObjectAnimator ra2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "rotation", 0, 360);
                    ObjectAnimator aa2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "alpha", 0, 1);
                    set.play(ta1).with(ra1).with(ta2).with(ra2).with(aa1).with(aa2);
                    set.setDuration(500).start();
                }
                //addGoods2CartAnim((ImageView) v,cartModel);
                //得到加号在屏幕的坐标
                int[] addLocation = new int[2];
                v.getLocationInWindow(addLocation);
                //得到购物车图标的坐标
                int[] cartLocation = mActivity.getCartLocation();
                //添加一个imageview
                final ImageView iv = new ImageView(v.getContext());
                iv.setBackgroundResource(R.mipmap.icon_shop_add);
                RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(v.getWidth(), v.getHeight());
                lp.leftMargin = addLocation[0];
                lp.topMargin = addLocation[1] - v.getHeight();

                mActivity.getContainer().addView(iv, lp);
                //横向移动
                ObjectAnimator oaX = ObjectAnimator.ofFloat(iv, "translationX", cartLocation[0] - addLocation[0] + v.getWidth() / 2);
                //纵向
                ObjectAnimator oaY = ObjectAnimator.ofFloat(iv, "translationY", cartLocation[1] - addLocation[1]);
                oaX.setInterpolator(new LinearInterpolator());
                oaY.setInterpolator(new AccelerateInterpolator());
                AnimatorSet set = new AnimatorSet();
                set.play(oaX).with(oaY);
                set.setDuration(500).start();
                set.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {}

                    @Override
                    public void onAnimationEnd(Animator animation) {
                        //移除这个view
                        mActivity.getContainer().removeView(iv);
                        //跟新购物车
                        cartModel.setCount(cartModel.getCount() + 1);
                        ((MyHolder) holder).tvAmount.setText(String.valueOf(cartModel.getCount()));
                        mActivity.mCount++;
                        mActivity.setMtvNum();
                    }

                    @Override
                    public void onAnimationCancel(Animator animation) {}

                    @Override
                    public void onAnimationRepeat(Animator animation) {}
                });
            }
        });

        //点击减号
        myHolder.imageViewReduce.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final CartModel cartModel = mDatas.get(position);
                //如果该商品数量为1就进行这个动画
                if (cartModel.getCount() == 1) {
                    AnimatorSet set = new AnimatorSet();
                    //减号
                    ObjectAnimator ta1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "translationX", 0, mAddLeft - mReduceLeft);
                    ObjectAnimator ra1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "rotation", 0, 360);
                    ObjectAnimator aa1 = ObjectAnimator.ofFloat(myHolder.imageViewReduce, "alpha", 1, 0);

                    //数字
                    ObjectAnimator ta2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "translationX", 0, mAddLeft - mAmountLeft);
                    ObjectAnimator ra2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "rotation", 0, 360);
                    ObjectAnimator aa2 = ObjectAnimator.ofFloat(myHolder.tvAmount, "alpha", 1, 0);
                    set.play(ta1).with(ra1).with(ta2).with(ra2).with(aa1).with(aa2);
                    set.setDuration(500).start();
                    set.addListener(new Animator.AnimatorListener() {
                        @Override
                        public void onAnimationStart(Animator animation) {}

                        @Override
                        public void onAnimationEnd(Animator animation) {
                            cartModel.setCount(cartModel.getCount() - 1);
                            myHolder.tvAmount.setText(String.valueOf(cartModel.getCount()));
                            if(cartModel.getCount()==0){
                                myHolder.tvAmount.setVisibility(View.INVISIBLE);
                                myHolder.imageViewReduce.setVisibility(View.INVISIBLE);
                            }
                            mActivity.mCount--;
                            mActivity.setMtvNum();
                        }

                        @Override
                        public void onAnimationCancel(Animator animation) {}

                        @Override
                        public void onAnimationRepeat(Animator animation) {}
                    });

                } else {
                    cartModel.setCount(cartModel.getCount() - 1);
                    myHolder.tvAmount.setText(String.valueOf(cartModel.getCount()));
                    mActivity.mCount--;
                    mActivity.setMtvNum();
                }

            }
        });
    }

    @Override
    public int getItemCount() {
        return mDatas.size();
    }

    class MyHolder extends RecyclerView.ViewHolder {
        TextView title;
        ImageView imageViewAdd;
        ImageView imageViewReduce;
        TextView tvAmount;
        TextView tvOld;

        public MyHolder(View itemView) {
            super(itemView);
            title = itemView.findViewById(R.id.tv);
            imageViewAdd = itemView.findViewById(R.id.iv_add);
            imageViewReduce = itemView.findViewById(R.id.iv_reduce);
            tvAmount = itemView.findViewById(R.id.tvamount);
            tvOld = itemView.findViewById(R.id.tv_old);
            tvOld.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG);

            imageViewAdd.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    //得到加号的左边位置
                    mAddLeft = imageViewAdd.getLeft();
                    imageViewAdd.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
            });

            imageViewReduce.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    //得到减号的左边位置
                    mReduceLeft = imageViewReduce.getLeft();
                    imageViewReduce.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
            });

            tvAmount.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    //得到价格的左边位置
                    mAmountLeft = tvAmount.getLeft();
                    tvAmount.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                }
            });
        }

        public void setItem(int position) {
            CartModel cartModel = mDatas.get(position);
            title.setText(cartModel.getName());
            tvAmount.setText(String.valueOf(cartModel.getCount()));

            if (cartModel.getCount() > 0) {//数目大于0就显示
                imageViewReduce.setVisibility(View.VISIBLE);
                tvAmount.setVisibility(View.VISIBLE);
            } else {//数目小于0就隐藏
                imageViewReduce.setVisibility(View.INVISIBLE);
                tvAmount.setVisibility(View.INVISIBLE);
            }
        }
    }

Android仿饿了么购物车效果
先看下效果图: 1.首先列表布局采用Recycleview 2.购物车item布局 3.点击加号操作这里分二钟情况...
仿饿了么购物车下单效果
仿饿了么购物车下单效果前一段由于新项目需要，开发一个类似饿了么购物车下单效果，电商类、外卖类、点餐类项目都可以用...
沪江学习Android端应用架构重构
第154期：沪江学习Android端应用架构重构 Android开发仿饿了么加入购物车旋转控件 - 自带闪转腾挪...
android精仿今日头条源码，饿了么点餐源码等
Android精选源码仿饿了么点餐页面精仿今日头条 Android漂亮的音乐歌词控件，仿网易云音乐滑动效果 A...
仿饿了么添加购物车效果
本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布最近有一个需求,要实现一个像饿了么添加购物车的...
Android仿饿了么购物车功能
https://blog.csdn.net/longxuanzhigu/article/details/10935...
Android仿饿了么购物车功能
购物车功能在电商项目中可以说是一个必不可少的功能了，但是在项目当中我们还是想将这个功能给尽可能的做的好看点、可观赏...
Android停止Animation动画
开发过程中遇到了仿饿了么购物车的icon的动画效果；在动画执行过程中，如果点击跳转再返回，图片的动画效果会出现问...
[笔记] Vue 实现加入购物车效果小球抛物线
参考 vue实现类似添加购物车抛物线效果（类似饿了么，京东到家）
Android仿淘宝购物车
【参考借鉴】Android仿淘宝购物车，玩转电商购物车首先看一下效果购物车主要由ExpandableListV...