购物车小球的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhiwenyan/article/details/52689408

在一些购物、点餐的App，我们购买东西的时候，这时候会点击添加的按钮，此时会有一个动画的效果，东西添加到了购物车里面，购物车会显示我们购买的件数；类似一个这样的功能这么实现呢？

先上一张图看效果：

具体的细节没有实现，主要是实现购买这个功能

  int[] startLocation = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
  v.getLocationInWindow(startLocation);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）

   int[] endLocation = new int[2]; //存储动画结束位置的X、Y坐标
   shopCart.getLocationInWindow(endLocation);  //shopCart购物车

主要是这几行代码, 获取购物车和购买按钮在屏幕X,Y轴的代码，计算它们的差值，来进行平移的动画；

详细的代码:

public class ShippingActivity extends AppCompatActivity implements View.OnClickListener {
    private ImageView iv_add;
    private TextView tv_count;
    private ImageView shopCart;//购物车
    private int buyNum;         //购买的数量
    private TextView tv_shop_count;  //购买的件数


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shipping);
        initView();
    }

    //初始化控件
    private void initView() {
        iv_add = (ImageView) findViewById(R.id.iv_add);
        tv_count = (TextView) findViewById(R.id.tv_count);
        shopCart = (ImageView) findViewById(R.id.shop_cart);
        tv_shop_count = (TextView) findViewById(R.id.tv_shop_count);
        iv_add.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        int[] startLocation = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
        v.getLocationInWindow(startLocation);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）
        ImageView redBall = new ImageView(this);
        redBall.setImageResource(R.mipmap.red);// 设置购买的图片
        setAnim(redBall, startLocation);// 开始执行动画
    }

    /**
     * 创建动画层
     *
     * @return animLayout
     */
    private ViewGroup createAnimLayout() {
        ViewGroup rootView = (ViewGroup) this.getWindow().getDecorView();
        LinearLayout animLayout = new LinearLayout(this);
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);
        animLayout.setLayoutParams(lp);
        animLayout.setBackgroundResource(android.R.color.transparent);
        rootView.addView(animLayout);
        return animLayout;
    }

    private View addViewToAnimLayout(final ViewGroup parent, final View view, int[] location) {
        int x = location[0];
        int y = location[1];
        LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lp.leftMargin = x;
        lp.topMargin = y;
        view.setLayoutParams(lp);
        return view;
    }

    public void setAnim(final View v, int[] startLocation) {
        ViewGroup anim_layout = createAnimLayout();
        anim_layout.addView(v); //把动画小球添加到动画层final
        View view = addViewToAnimLayout(anim_layout, v, startLocation);
        int[] endLocation = new int[2]; //存储动画结束位置的X、Y坐标
        shopCart.getLocationInWindow(endLocation);  //shopCart购物车
        // 计算位移
        int endX = endLocation[0] - startLocation[0];  //动画位移的X坐标
        int endY = endLocation[1] - startLocation[1];   //动画位移的y坐标
        Log.i("计算位移:", +endX + "," + endY);
        TranslateAnimation translateAnimationX = new TranslateAnimation(0, endX, 0, 0); //X轴平移动画
        translateAnimationX.setInterpolator(new LinearInterpolator());
        TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);//Y轴平移动画
        translateAnimationY.setInterpolator(new AccelerateInterpolator()); //动画加速器
        AnimationSet set = new AnimationSet(false);
        set.setFillAfter(false);
        set.addAnimation(translateAnimationY);
        set.addAnimation(translateAnimationX);
        set.setDuration(1000);// 动画的执行时间
        view.startAnimation(set);
        // 动画监听事件
        set.setAnimationListener(new Animation.AnimationListener() {
            // 动画的开始
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            // 动画的结束
            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束设置购买的图片为GONE
                v.setVisibility(View.GONE);
                buyNum++;//让购买数量加1
                tv_count.setText(buyNum + "");
                 //动画结束设置小球为VISIBLE
                tv_shop_count.setVisibility(View.VISIBLE);
                tv_shop_count.setText(buyNum + "");
            }
        });
    }
}

布局页面

<?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="wrap_content">

    <ImageView
        android:id="@+id/iv_pic"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_margin="8dp"
        android:background="@mipmap/c" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="8dp"
        android:layout_marginTop="30dp"
        android:orientation="horizontal">


        <ImageView
            android:id="@+id/iv_remove"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="4dp"
            android:src="@mipmap/r" />

        <TextView
            android:id="@+id/tv_count"
            android:layout_width="16dp"
            android:layout_height="match_parent"
            android:background="#fff"
            android:gravity="center"
            android:text="0"
            android:textColor="#f00" />


        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/add" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_toEndOf="@+id/iv_pic"
        android:layout_toRightOf="@+id/iv_pic"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:text="女装" />

        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:text="全场最低价" />

        <TextView
            android:id="@+id/tv_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="20dp"
            android:text="88.0¥"
            android:textColor="#f00" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#d2d2d2"
        android:orientation="horizontal"
        android:padding="8dp">

        <!--购物车-->
        <ImageView
            android:id="@+id/shop_cart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:src="@mipmap/shopping" />
        <!--小球-->
        <TextView
            android:visibility="invisible"
            android:id="@+id/tv_shop_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_data"
            android:gravity="center"
            android:maxLines="1"
            android:text="0"
            android:textColor="#fff"
            android:textSize="10sp" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="8dp">

            <TextView
                android:id="@+id/shop_count"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="件数:1"
                android:textColor="#ff0000" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/shop_count"
                android:text="价格:88¥"
                android:textColor="#ff0000" />

        </RelativeLayout>
    </RelativeLayout>

</RelativeLayout>

购物车上的小球(购买的件数) 是通过一个Xml文件实现的;

shape_data.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#f00000" />
    <padding
        android:bottom="1dp"
        android:left="2dp"
        android:right="2dp"
        android:top="1dp" />
    <solid android:color="#f00000" />
    <size
        android:width="15dp"
        android:height="15dp" />
</shape>

虽然shape的oval椭圆的,但是把size里面把宽和高设成一样的，就不变成了一个圆吗…..