现在商城应用上,购物车功能可以说是不可缺少的,每个应用的购物车模块实现方式都差不多,这篇我们来仿一下饿了么的购物车功能,用过的童鞋都知道,印象最深刻的应该是添加或减少数量时,抛物线的动画效果,话不多说,现在让我们来看看是怎么实现的吧.
先看效果图
效果图可以看出,这个布局还是比较简单的,重点应该还是在抛物线的动画上.
1、列表布局文件
<?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:background="#ffffff">
<RelativeLayout
android:id="@+id/rl_main"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#ffffff"
android:orientation="vertical">
<ImageView
android:id="@+id/tv_titlebar_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:padding="5dp"
android:src="@drawable/danghanglan_fanhui" />
<TextView
android:id="@+id/tv_titlebar_center"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:gravity="center"
android:maxLength="18"
android:singleLine="true"
android:text="购物车"
android:textColor="#2f302b"
android:textSize="17sp"
android:visibility="visible" />
<TextView
android:id="@+id/tv_titlebar_right"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="@null"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:singleLine="true"
android:text="编辑"
android:textColor="#2f302b"
android:textSize="14sp"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_alignParentBottom="true"
android:background="#cccccc" />
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/rl_main"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fff"
android:gravity="center_vertical"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp">
<ImageView
android:id="@+id/iv_shop_cart"
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="2dp"
android:src="@mipmap/img_revision_shopping_car" />
<TextView
android:id="@+id/tv_num"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="right"
android:background="@drawable/tip_message_revision_bg"
android:gravity="center"
android:text="11"
android:textColor="#fff"
android:visibility="gone" />
</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="10dp"
android:background="#d4ab7f"
android:gravity="center"
android:text="购买"
android:textColor="#ffffff" />
</LinearLayout>
</RelativeLayout>
2、模拟初始化数据
//添加商品数据
final List<CartModel> list = new ArrayList<>();
for (int i = 0; i < 20; i++) {
CartModel cartModel = new CartModel();
cartModel.setName("麻辣肉碎面-----" + i);
list.add(cartModel);
}
3、设置数据
final ShoppingAdapter shoppingAdapter = new ShoppingAdapter(this, list);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
mRecyclerView.setAdapter(shoppingAdapter);
4、点击加号操作这里分二钟情况:
一是当数量为0时减号会执行旋转和平移渐变的动画,
二是数量不为0时只会进行抛物线动画,其中抛物线动画实现思路就是得到加号和购物车的坐标,然后得到最外层容器添加一个view来执行这个动画,动画执行完成后移除这个动画:
//点击加号
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.drawable.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) {}
});
}
});
5、减法动画效果
//点击减号
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();
}
}
});
该功能的实现重点在抛物线的动画效果上,这里就不把完整的代码添加进去了,不然影响阅读体验,需要完整源码的童鞋底部关注公众号回复:"仿饿了么购物车" 即可获得哦.
到这里就结束啦.
小编整理了一份Android电子书籍,需要的童鞋关注公众号回复:"e_books" 即可获取哦!
欢迎关注公众号(longxuanzhigu),获得更多福利、精彩内容哦!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。