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);
            }
        }
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,905评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,140评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,791评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,483评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,476评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,516评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,905评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,560评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,778评论 1赞 296
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,338评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,925评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,376评论 25赞 707
  • 5.11闭嘴！写吧！
    五年级的时候，经常在一些活动中看到四班的一个精彩的女孩阳光璀璨的站在台上，笑着主持节目，朗声的演讲，...
    七_911阅读 310评论 4赞 2
  • [jQuery] 事件传递参数
    （1）绑定事件 注：参数可以通过[].slice.call(arguments, 1)=[arg0,arg1,.....
    何幻阅读 289评论 0赞 0