购物车小球的实现

在一些购物、点餐的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里面把宽和高设成一样的，就不变成了一个圆吗…..