Android之实现京东底部添加到购物车的效果

最新推荐文章于 2024-05-15 08:52:02 发布
最新推荐文章于 2024-05-15 08:52:02 发布
阅读量2.9w 收藏 19
点赞数 5
分类专栏： ［ Android自定义控件 ］ Android开发笔记 文章标签： 京东购物车 动画 购物车 抛物线 Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hai_qing_xu_kong/article/details/50992567
版权

转载请标明出处:
http://blog.csdn.net/hai_qing_xu_kong/article/details/50992567
本文出自：【顾林海的博客】

##前言
美好的双休日快要结束了，昨天玩了一天，今天在家看了一整天的书，大体看了网络框架搭建的一个流程，自己也试了下，有些小问题，还在研究中。用过京东APP的都知道在商品详情页底部有个添加到购物车的按钮，一点击就会将商品以抛物线的形式放入购物车中，今天给大家带来的就是类似购物车的效果。

购物车

##原理讲解

将上面效果拆分成两部分的话，就是抛物线+图片缩放，抛物线关键点就是获取Y坐标，这里直接套用网上的公式：

	/**
	 * 这里是根据三个坐标点计算出来的抛物线方程
	 * 
	 * @param x
	 * @return
	 */
	private float getY(float x) {
		return a * x * x + 4 * x;
	}

整体的抛物线和缩放动画使用PropertyValuesHolder，达到同步播放的效果。

通过PropertyValuesHolder.ofKeyframe(“translationY”, keyframes);实现商品的向左平移的效果，这里面的keyframes是一个Keyframe对象的数组，看如下的整体取值：

Keyframe[] keyframes = new Keyframe[(int) count];
		final float keyStep = 1f / (float) count;
		float f = (float) (start_location[0] - end_location[0]) / count;
		float key = keyStep;
		for (int i = 0; i < count; ++i) {
			keyframes[i] = Keyframe.ofFloat(key, -i * f);
			key += keyStep;
		}

count是动画在执行过程中的步数，这里面拆分成300份，view在屏幕上向左平移时值为负数，因此Keyframe.ofFloat(key, -i * f)，这里面的f公式：

float f = (float) (start_location[0] - end_location[0]) / count;

sart_location[0]是获取的添加购物车按钮的X坐标，end_location[0]是购物车小图标的X坐标，相减得到按钮到购物车的距离，将距离进行平分，分成count份，因此通过for循环-i * f，进行向左的移动。

Y轴的平移，会发现先是向上平移（负数），平移到一半后，向下平移（正数），这样构成一个平滑的抛物线，通过上面的Y坐标的公式得出：

	key = keyStep;
	for (int i = 0; i < count; ++i) {
		keyframes[i] = Keyframe.ofFloat(key, -getY(i + 1));
		key += keyStep;
	}
	PropertyValuesHolder pvhY = PropertyValuesHolder.ofKeyframe("translationY", keyframes);

这时得到View进行抛物线移动时的X和Y坐标，接着会看到View的缩放，缩放代码如下：

PropertyValuesHolder scaleX = PropertyValuesHolder.ofFloat("scaleX",
				1f, 0.5f);
		PropertyValuesHolder scaleY = PropertyValuesHolder.ofFloat("scaleY",
				1f, 0.5f);

最后通过：

mObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(mShopView,
					pvhX, pvhY, scaleX, scaleY).setDuration(1500);

获取ObjectAnimator对象，进行start()就可动画的播放。

##如何应用到项目中

这里我创建了一个AnimUtils类，使用如下：

package com.example.addshowanimproject;

import com.example.addshowanimproject.animutil.AnimUtils;
import com.example.addshowanimproject.inter.IAddShopListener;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {
	
	/**
	 * 购物车小图标
	 */
	private ImageView iv_shop;
	
	/**
	 * 添加到购物车按钮
	 */
	private LinearLayout ll_btn_add;
	
	private AnimUtils mAnimUtils;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
		initEvent();
	}

	/**
	 * View的初始化
	 */
	private void initViews(){
		iv_shop=(ImageView) findViewById(R.id.iv_shop);
		ll_btn_add=(LinearLayout) findViewById(R.id.ll_btn_add);
	}
	
	/**
	 * 注册事件
	 */
	private void initEvent(){
		final ImageView imageView=new ImageView(this);
		imageView.setLayoutParams(new LayoutParams(30, 60));
		imageView.setImageResource(R.drawable.biancheng);
		ll_btn_add.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				Log.i("TAG","onClick");
				if(mAnimUtils==null){
					mAnimUtils=new AnimUtils(MainActivity.this, ll_btn_add, iv_shop, imageView);
				}
				mAnimUtils.addShopCart(new IAddShopListener() {
					
					@Override
					public void addSucess() {
						Toast.makeText(MainActivity.this, "添加了一个商品", Toast.LENGTH_SHORT).show();
					}
				});
				
			}
		});
	}
	
	
	
}

代码很简单，AnimUtils的初始化，接着调用AnimUtils的addShopCart方法进行动画播放完毕的监听。

以下是xml的布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
            <ImageView
                android:id="@+id/iv_shop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/shopping_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="购物车"
                android:textColor="@android:color/black"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_btn_add"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="2"
            android:background="@android:color/holo_red_light"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="加入购物车"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

当然有些人会说，你这购物车图片在按钮旁边，那我如果在底部最左边呢？放心，一样可以支持，我们将xml改为如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/iv_shop"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/shopping_cart" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="购物车"
                android:textColor="@android:color/black"
                android:textSize="12sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll_btn_add"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="2"
            android:background="@android:color/holo_red_light"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="加入购物车"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

运行程序如下：

购物车

怎么样，是不是很方便。

以下是完整的github项目地址，欢迎star,fork。
github项目源码地址：点击【项目源码】

IT界的吉祥物
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿外卖购物车的实现
06-02
仿饿了么购物车的简单实现 下载到的文件是个AS module，你可以在自己新建的工程中Import Module. 博客地址：http://blog.csdn.net/w804518214/article/details/51570975
Android 仿饿了么加入购物车特效控件(自定义View实战)
01-22
利用 纯自定义View，实现的仿饿了么加入购物车控件，自带闪转腾挪动画的按钮。
2024年安卓最全Android 购物车实现（思路+步骤+源码），2024年最新阿里面试轮次
最新发布
2401_84556681的博客
05-15 732
单选指的是单个店铺里单个商品选中，该店铺如果所有商品都选中，则店铺自动选中，而直接选中店铺则里面所有商品选中，这是单选也是多选，你选中店铺其实就是多选店铺中的商品。这么解释不知道你好不好理解，下面来说全选，全选就是所有商品或店铺选中，所有商品选中就是所有店铺选中，所有店铺选中就是所有商品选中，两者满足其一都是为全选，而全选也是可以主动和被动，主动就是用户点击这个全选按钮，然后选中所有商品或者店铺，被动就是通过对所有店铺的选中或者所有商品的选中来达成全选。这里面就一个关键点，那就是选中店铺的数量。
android 购物车布局,Android 加入购物车动画
weixin_35032861的博客
05-25 511
做了一个加入购物车动画，代码比较简单，先看下效果，可能因录制git图片软件问题，录制的git图片有些卡顿，实际效果流畅性还是不错的。 代码很简单首先布局文件：xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"android:layout_height="match_parent"and...
Android -- 购物车
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
08-11 8493
Android的简单购物车案例
Android中购物车
weixin_36495794的博客
06-29 1217
Android-----购物车（包含侧滑删除，商品筛选，商品增加和减少，价格计算，店铺分类等）电商项目中常常有购物车这个功能，做个很多项目了，都有不同的界面，选了一个来讲一下。主要包含了 店铺分类，侧滑删除，商品筛选，增加和减少，价格计算等功能。看看效果图： 代码下载https://download.csdn.net/download/weixin_36495794/10507231接下来给大家分...
高仿京东购物车listview_checkbox实现全选
03-15
为了实现全选功能，我们需要在ListView的头部或者底部添加一个全局的CheckBox，当用户点击这个全局CheckBox时，所有子ListView中的CheckBox状态都会随之改变。这需要监听全局CheckBox的选中状态，并通过遍历子...
Android 高仿京东商城
03-16
【Android 高仿京东商城】项目是一个专门为Android平台设计的应用程序源码，旨在模拟和学习京东商城的功能和界面设计。这个项目对开发者来说是一个宝贵的资源，可以用来提升Android开发技能，尤其是对于那些对电商...
Android仿京东商城底部菜单
03-16
这个项目"Android仿京东商城底部菜单"旨在实现类似京东App的底部导航栏，为用户提供方便的页面切换功能。底部菜单是许多移动应用中常见的设计元素，它允许用户在多个主要功能之间快速切换，通常包括“首页”、...
安卓Android源码——高仿京东.zip
10-14
- 为了管理多个Activity和Fragment间的跳转，可能使用了`Android Navigation`组件，或者自定义的`BottomNavigationView`，实现底部导航栏的效果。 7. **滑动返回**： - 京东APP中可能存在滑动手势返回上一级界面...
Android客户端京东商城高仿源代码
08-26
【Android客户端京东商城高仿源代码】是一款基于Apache HttpClient库和SOAP协议开发的App客户端，旨在模拟和重现京东商城的用户界面与功能。这个项目主要展示了如何在Android平台上构建一个功能丰富的电商应用，同时...
添加购物车动画 抛物线
02-25
模拟抛物线添加购物车，原理是使用一个水平向的匀速移动动画和纵向加速动画一起使用
Android 仿淘宝商品页详情（头部滑动渐变）
weixin_43522997的博客
07-28 845
上布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:background="#23F1F1F
Android仿外卖购物车的实现
热门推荐
God is a coder!
06-02 3万+
又两周没写博客了,不是不想写而是不知道该写点什么，总不能为了写博客而写博客，前两天项目里要加个购物车功能，看了下别人APP的效果觉得不错，虽然我项目里没用上不过毕竟还算是个常用的功能，于是决定写个博客分享下！ 效果图知识点分析效果图来看不复杂内容并没多少，值得介绍一下的知识点也就下面几个吧 - 列表标题悬停 - 左右列表滑动时联动 - 添加商品时的抛物线动画 - 底部弹出购物车清单 - 数
Android之仿饿了吗购物车抛物线动画
叶已初秋的博客
02-23 2万+
Android之仿饿了吗及其他软件加入购物车抛物线动画和加减弹出弹回动画实现
android 购物车 简书,Android仿饿了么购物车效果
weixin_35511854的博客
05-27 250
先看下效果图:ezgif-1-8f133ca916.gif1.首先列表布局采用Recycleviewandroid:id="@+id/container"android:layout_width="match_parent"android:layout_height="match_parent">android:id="@+id/rv"android:layout_width="match_...
Android仿饿了么购物车功能
龙旋的博客
10-29 1517
现在商城应用上，购物车功能可以说是不可缺少的，每个应用的购物车模块实现方式都差不多，这篇我们来仿一下饿了么的购物车功能，用过的童鞋都知道，印象最深刻的应该是添加或减少数量时，抛物线的动画效果，话不多说，现在让我们来看看是怎么实现的吧. 先看效果图 效果图可以看出，这个布局还是比较简单的，重点应该还是在抛物线的动画上. 1、列表布局文件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://
Android仿京东购物车效果
qq_27665781的博客
09-29 1640
模仿京东购物车做了个简单的购物车效果。 先上图：最近要做个电商项目。 本来想去网上找个代码copy的。 找了半天没找到。 无奈只能自己写一个了。 说下整个思路，两个Listview，item的加减用回调或者观察者模式(哈哈，新学的).。 看自己怎么习惯吧 。 说下碰到的问题 。两个Listview 做完后发现第二个Listview只能显示一条数据，调试后发现值穿过来了。还是只能显示第一条。各种Wid
使用前端和后端实现将数据添加到购物车效果
05-29
要实现将数据添加到购物车效果，需要前端和后端的配合。 前端部分： 1. 在 HTML 页面中添加购物车按钮，并为其绑定一个事件监听器； 2. 在事件监听器中使用 AJAX 技术向后端发送请求，请求添加商品到购物车中； 3....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值