Android之仿饿了吗购物车抛物线动画

叶已初秋

已于 2025-02-24 16:47:27 修改

阅读量2.2w

点赞数 4

分类专栏： Android进阶文章标签： Android 购物车抛物线弹出动画购物车抛物线

于 2017-02-23 11:11:33 首次发布

本文链接：https://blog.youkuaiyun.com/Android_Cll/article/details/56667267

版权

Android进阶专栏收录该内容

27 篇文章

订阅专栏

一：效果图、

二：实现的步骤：

1.在主工程build.gradle文件下加入包并引用，这个必须得要

compile 'com.android.support:design:23.3.0'
compile 'com.flipboard:bottomsheet-core:1.5.1'
compile 'se.emilsjolander:stickylistheaders:2.7.0'

2.主activity的xml布局

<!--底部购物车-->
<RelativeLayout
    android:id="@+id/bottom"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:background="#aa000000"
    android:clickable="true"
    android:gravity="center_vertical"
    android:onClick="onClick"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/relative_gwc"
        android:layout_width="60dp"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imgCart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/chaoshi_shopping_nav_icon" />

        <TextView
            android:id="@+id/tvount"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:background="@drawable/circle_red"
            android:gravity="center"
            android:text="0"
            android:textColor="#fff"
            android:textSize="12sp"
            android:visibility="gone" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tvCost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@+id/relative_gwc"
        android:text="￥ 0.0"
        android:textColor="#fff"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/manps"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvCost"
        android:layout_toRightOf="@+id/relative_gwc"
        android:text="满20免费配送"
        android:textColor="#fff" />

    <TextView
        android:id="@+id/tvSubmit"
        android:layout_width="120dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#22c222"
        android:clickable="true"
        android:gravity="center"
        android:onClick="onClick"
        android:text="去结算"
        android:textColor="#fff"
        android:textSize="18sp" />
</RelativeLayout>

3.listview的item布局

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="110dp"
    android:background="#ffffff"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/relativecll"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/imgnl"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_centerVertical="true"
            android:layout_margin="10dp"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/textItem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@+id/imgnl"
            android:ellipsize="end"
            android:lines="2"
            android:maxLines="2"
            android:text="哈哈"
            android:textColor="#262626"
            android:textSize="14dp" />

        <TextView
            android:id="@+id/jiage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textItem"
            android:layout_toRightOf="@+id/imgnl"
            android:text="￥3.5"
            android:textColor="#e92c24"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/xiaoliang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/jiage"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/imgnl"
            android:text="销量:236"
            android:textColor="#999999"
            android:textSize="12dp" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/bdgwc"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="15dp"
        android:src="@mipmap/chaoshi_shopingjia_icon"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="15dp"
        android:layout_marginRight="10dp"
        android:gravity="right">

        <TextView
            android:id="@+id/tvMinus"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@mipmap/button_minus"
            android:clickable="true"
            android:gravity="center"
            android:textStyle="bold"
            android:visibility="gone" />

        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginBottom="3dp"
            android:gravity="center"
            android:minWidth="20dp"
            android:text="0"
            android:textSize="16sp"
            android:visibility="gone" />

        <TextView
            android:id="@+id/tvAdd"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginBottom="7dp"
            android:background="@mipmap/button_add"
            android:clickable="true"
            android:gravity="center"
            android:textStyle="bold" />
    </LinearLayout>
</RelativeLayout>

4.因为我数据原因，所以我写了两个Adapter，所以写了一个公共的方法，一个适配器的直接可以把这个方法写到Adapter里面

package com.zjtd.bzcommunity.view;

import android.view.View;

/**
 * Created by dong.he on 2017/2/22.
 */

public interface AddPriceListener {
    /**
     * 添加商品到购物车
     *
     * @param position
     * @param showCountView
     */
    void addGoods(int position, View showCountView);

    /**
     * 从购物车减去商品
     *
     * @param position
     * @param showCountView
     */
    void decreaseGoods(int position, View showCountView);
}

5.Adapterr，里面都写好了注释，就不用一步一步的给你们解释了，自己看注释

package com.zjtd.bzcommunity.adapter;

import android.annotation.SuppressLint;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import com.common.base.http.HttpPost;
import com.common.base.http.model.GsonObjModel;
import com.common.base.service.BaseServerConfig;
import com.common.base.util.BitmapHelp;
import com.lidroid.xutils.http.RequestParams;
import com.zjtd.bzcommunity.R;
import com.zjtd.bzcommunity.activity.RecyleActivity;
import com.zjtd.bzcommunity.bean.ChaoshidianpuBean;
import com.zjtd.bzcommunity.util.ConstantUtil;
import com.zjtd.bzcommunity.util.SpUtil;
import com.zjtd.bzcommunity.view.AddPriceListener;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.List;

/**
 * Created by Administrator on 2016/12/24.
 */
public class RecyleActivityrexiaoAdapter extends BaseAdapter {
    private List<ChaoshidianpuBean.Rexiao> mListy;
    private LayoutInflater inflater;
    private RecyleActivity mContext;
    private int goodsCount = 0;
    private AddPriceListener listener;

    public RecyleActivityrexiaoAdapter(RecyleActivity context) {
        this.mContext = context;
        this.inflater = LayoutInflater.from(mContext);
    }

    public void setData(List<ChaoshidianpuBean.Rexiao> mPageList) {
        this.mListy = mPageList;
    }

    @Override
    public int getCount() {
        return mListy == null ? 0 : mListy.size();
    }

    @Override
    public Object getItem(int position) {
        return mListy != null ? mListy.get(position) : 0;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    class ViewHolder {
        public TextView content, jiage, xiaoliang, tvAdd, tvMinus, tvCount;
        public ImageView imgnl, bdgwc;
    }

    @SuppressLint("InflateParams")
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        final ViewHolder holder;
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.list_item, null);
            holder = new ViewHolder();
            holder.content = (TextView) convertView.findViewById(R.id.textItem);
            holder.jiage = (TextView) convertView.findViewById(R.id.jiage);
            holder.xiaoliang = (TextView) convertView.findViewById(R.id.xiaoliang);
            holder.imgnl = (ImageView) convertView.findViewById(R.id.imgnl);
            holder.bdgwc = (ImageView) convertView.findViewById(R.id.bdgwc);
            holder.tvCount = (TextView) convertView.findViewById(R.id.count);
            holder.tvMinus = (TextView) convertView.findViewById(R.id.tvMinus);
            holder.tvAdd = (TextView) convertView.findViewById(R.id.tvAdd);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        // 绑定数据
        final ChaoshidianpuBean.Rexiao data = (ChaoshidianpuBean.Rexiao) getItem(position);
        holder.content.setText(data.title);
        BitmapHelp.displayOnImageView(mContext, holder.imgnl,
                data.lbpic, R.drawable.ic_launcher,
                R.drawable.ic_launcher);
        holder.jiage.setText("¥ " + data.price);
        holder.xiaoliang.setText("销量：" + data.sales_number);
        final ViewHolder finalHolder = holder;
        /**
         * 初始化数量为0，判断数量大于0显示数量和减号，否则隐藏
         */
        if (goodsCount < 1) {
            holder.tvCount.setVisibility(View.GONE);
            holder.tvMinus.setVisibility(View.GONE);
        } else {
            holder.tvCount.setVisibility(View.VISIBLE);
            holder.tvMinus.setVisibility(View.VISIBLE);
        }

        holder.tvCount.setText(data.getCount() + "");
        /**
         * 获取变化后的数量再判断数量大于0显示数量和减号，否则隐藏
         */
        if (data.getCount() > 0) {
            holder.tvMinus.setVisibility(View.VISIBLE);
            holder.tvCount.setVisibility(View.VISIBLE);
        } else {
            holder.tvMinus.setVisibility(View.GONE);
            holder.tvCount.setVisibility(View.GONE);
        }

        /**
         * 加
         */
        holder.tvAdd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                RecyleActivity activity = mContext;

                //接口回调商品价格
                listener.addGoods(position, holder.tvCount);
                //获取数量判断，如果小于1就执行减号弹出动画
                if (data.getCount() < 1) {
                    holder.tvMinus.setAnimation(getShowAnimation());
                    holder.tvMinus.setVisibility(View.VISIBLE);
                    holder.tvCount.setVisibility(View.VISIBLE);
                }
                int[] loc = new int[2];
                //执行点击加号抛物线动画，该方法在activity中
                view.getLocationInWindow(loc);
                activity.playAnimation(loc);

            }
        });

        /**
         * 减
         */
        holder.tvMinus.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                listener.decreaseGoods(position, holder.tvCount);
                //获取数量判断，如果小于1就执行减号弹回动画
                if (data.getCount() < 1) {
                    holder.tvMinus.setAnimation(getHiddenAnimation());
                    holder.tvMinus.setVisibility(View.GONE);
                    holder.tvCount.setVisibility(View.GONE);
                }

            }
        });

        return convertView;
    }

    /**
     * 点击加号减号弹出动画
     * @return
     */
    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;
    }

    /**
     * 点击减号减号弹回动画
     * @return
     */
    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;
    }

    /**
     * activity点击回调事件
     * @param listener
     */
    public void setOnClickGoodsListener(AddPriceListener listener) {
        this.listener = listener;
    }

}

6.在activity里面写的抛物线动画方法

/**
 * 抛物线动画
 * @param start_location
 */
public void playAnimation(int[] start_location) {
    ImageView img = new ImageView(this);
    img.setImageResource(R.mipmap.button_add);
    setAnim(img, start_location);
}
//anim_mask_layout为主界面根布局id
private void setAnim(final View v, int[] start_location) {

    addViewToAnimLayout(anim_mask_layout, v, start_location);
    Animation set = createAnim(start_location[0], start_location[1]);
    set.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

        }

        @Override
        public void onAnimationEnd(final Animation animation) {
            mHanlder.postDelayed(new Runnable() {
                @Override
                public void run() {
                    anim_mask_layout.removeView(v);
                }
            }, 100);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    v.startAnimation(set);
}

private void addViewToAnimLayout(final ViewGroup vg, final View view,
                                 int[] location) {
    int x = location[0];
    int y = location[1];
    int[] loc = new int[2];
    vg.getLocationInWindow(loc);
    view.setX(x);
    view.setY(y - loc[1]);
    vg.addView(view);
}

private Animation createAnim(int startX, int startY) {
    int[] des = new int[2];
    imgCart.getLocationInWindow(des);
    AnimationSet set = new AnimationSet(false);
    Animation translationX = new TranslateAnimation(0, des[0] - startX, 0, 0);
    translationX.setInterpolator(new LinearInterpolator());
    Animation translationY = new TranslateAnimation(0, 0, 0, des[1] - startY);
    translationY.setInterpolator(new AccelerateInterpolator());
    Animation alpha = new AlphaAnimation(1, 0.5f);
    set.addAnimation(translationX);
    set.addAnimation(translationY);
    set.addAnimation(alpha);
    set.setDuration(500);
    return set;
}

7.activity类Adapter数据的绑定和加减法的操作

listViewAdpretrex.setData(haoshihomebean.rexiao);


listViewAdpretrex = new RecyleActivityrexiaoAdapter(RecyleActivity.this);
right_listview.setAdapter(listViewAdpretrex);

listViewAdpretrex.setOnClickGoodsListener(new AddPriceListener() {
    /**
     * 添加商品价格
     * @param position
     * @param showCountView
     * @param
     */
    @Override
    public void addGoods(int position, View showCountView) {
        ChaoshidianpuBean.Rexiao product = (ChaoshidianpuBean.Rexiao) listViewAdpretrex.getItem(position);
        int currentCount = product.getCount();
        currentCount++;
        product.setCount(currentCount);
        ((TextView) showCountView).setText(currentCount + "");
        listViewAdpretrex.notifyDataSetChanged();
        calculate();
    }

    /**
     * 删减商品价格
     * @param position
     * @param showCountView
     * @param
     */
    @Override
    public void decreaseGoods(int position, View showCountView) {
        ChaoshidianpuBean.Rexiao product = (ChaoshidianpuBean.Rexiao) listViewAdpretrex.getItem(position);
        int currentCount = product.getCount();
        if (currentCount == 0)
            return;
        currentCount--;
        product.setCount(currentCount);
        ((TextView) showCountView).setText(currentCount + "");
        listViewAdpretrex.notifyDataSetChanged();
        calculate();
    }

});

8.购买数量和价格的计算

private double totalPrice = 0.00;// 购买的商品总价
private int totalCount = 0;// 购买的商品总数量

/**
 * 统计操作
 * 1.先清空全局计数器
 * 2.遍历所有子元素，只要是被选中状态的，就进行相关的计算操作
 * 3.给底部的textView进行数据填充
 */
private void calculate() {
    totalCount = 0;
    totalPrice = 0.00;

    for (int j = 0; j < haoshihomebean.rexiao.size(); j++) {
        ChaoshidianpuBean.Rexiao product = haoshihomebean.rexiao.get(j);
        if (product.getCount() > 0) {
            totalCount += product.getCount();
            totalPrice += Double.parseDouble(product.getPrice()) * product.getCount();
        }
    }

    cll = totalPrice1 + totalPrice;
    tvCost.setText("￥" + cll);
    if (totalCount1 + totalCount > 0) {
        tvCount.setVisibility(View.VISIBLE);
        tvCount.setText(totalCount1 + totalCount + "");
    } else {
        tvCount.setVisibility(View.GONE);
    }
}

-----差不多就是这些了，有用的可以采纳一下，大神勿喷，有更好的建议欢迎提出、