2. 程式人生 > >Android之實現京東底部新增到購物車的效果

Android之實現京東底部新增到購物車的效果

阿新 • • 發佈：2018-12-23

##前言
美好的雙休日快要結束了，昨天玩了一天，今天在家看了一整天的書，大體看了網路框架搭建的一個流程，自己也試了下，有些小問題，還在研究中。用過京東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專案原始碼地址：點選【專案原始碼】

相關推薦

Android之實現京東底部新增到購物車的效果

##前言 美好的雙休日快要結束了，昨天玩了一天，今天在家看了一整天的書，大體看了網路框架搭建的一個流程，自己也試了下，有些小問題，還在研究中。用過京東APP的都知道在商品詳情頁底部有個新增到購物車的按鈕，一點選就會將商品以拋物線的形式放入購物車中，今天給大家帶

Android Demo之旅 ListView底部新增載入更多按鈕實現資料分頁

在我們的實際專案中，資料應該說是很多的，我們的ListView不可能一下子把資料全部載入進來，我們可以當滾動條滾動到ListView的底部的時候，給一個更多的提示，當我們點選它即載入下一頁的資料，相當與我們的分頁效果，參考網上的東西，寫了一個小小的demo，並總結了一些知識

Android之實現上下左右翻頁效果

Aphid FlipView是一個能夠實現Flipboard翻頁效果的UI元件。 下載完畢後匯入到當前你的專案中，我們來下上下翻頁的效果圖：               直接貼出程式碼

Android快速開發02之仿京東底部Tab

自上一篇介紹了Android快速開發之封裝標題欄效果是顯而易見的。接下來我們對底部Tab也進行封裝。 效果： 然而實現的程式碼也就這麼幾行： public class MainActivity extends BottomTabBaseActi

Android 之動態許可權的新增

       對於安卓 6.0 之前許可權的處理是標膠簡單的，只需要在清單檔案中加入自己所需要的許可權就可以了，但是隨著谷歌對許可權的稽核變的嚴厲起來之後，在  targetSdkVersion 23 以上就需要動動態申請許可權了，下面我就來介紹一下怎麼動態申請許可權，其中包

Android之實現妙趣橫生的粘連佈局

1概述 在手機QQ中，有一個功能叫“一鍵下班”，無論介面有多少資訊，只要你不想看，就可以手指一滑，將他們全部消滅。據說這個功能專為紅點恐懼症、資訊閱讀強迫症以及處女座暖心打造。這個功能已經上線許久，除了設計本身比較貼心外，其呈現效果也十分驚豔： 這個功能深受廣

Android高效率實現彈出帶動畫效果的對話方塊，仿照微信對話方塊效果

看到很多app頁面裡都有彈出對話方塊效果，今天使用PopupWindow實現帶動畫效果的對話方塊，先看效果圖： 效果圖： 分析實現思路： 彈出對話方塊帶有動畫效果 對話方塊從底部向上彈出 彈出對話方塊時，窗體背景呈現灰色（半透明） 對話方塊四周具

Android 之仿京東分類（原理listview+fragment）

1.寫一個fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android

Android linearlayout實現button的點選效果

有的時候，我們希望LinearLayout佈局也有點選的效果，這時候我們不僅需要一個作為背景的selector，還要設定一些其它屬性才行：android:clickable="true"android

Android之實現滑動開關元件

    由於Android並未提供滑動開關之類的元件，所以我們需要自己去實現一個自定義的檢視元件來實現滑動開關效果。     這裡有一個示例程式碼，它包括三個類：開關元件檢視、狀態監聽介面、MainActivity     我們先來看看整個demo的效果圖：    我們先

Android之實現百度雲主介面框架

新版的Android版百度雲介面效果非常炫，給人煥然一新的感覺，如下圖所示。 其實仔細研究，會發現也並不是那麼複雜： 1.整個介面主容器是一個ViewPager,只是在左下角有一個切換的Button。 2.ViewPager有兩個介面，由Fragment實現，並且加入

Android——TextView實現真正的跑馬燈效果

　　android 應用有時候需要做一個廣告欄，可以做文字閃爍，跑馬燈等效果，文字閃爍可以放線上程裡面執行，多少秒過後設定文字的TextColor即可，跑馬燈效果很少接觸，之前寫了一個demo，但是實現的效果不是自己想要的，普遍的跑馬燈效果直接在layout裡面

Android RecycleView實現不同樣式Item樣式效果完美解決

       在我們開發過程中經常會遇到需要我們展示不同樣式列表的情況，通常我們都會使用ListView展示列表，然後實現BaseAdapter兩個方法，即：getViewTypeCount() 和 getItemViewType(int position)即可實現 不過

Android 簡單實現Activity介面變暗效果

效果圖： 程式碼實現如下： private void dimBackground(final float from, final float to) { final W

Android 之實現執行時註解控制元件

一、首先的說一下註解的分類，      1、執行時註解，程式碼簡單，複雜性低，但是效率稍微低一點      2、編譯時註解、程式碼多，結構複雜，但是效率高這裡介紹的是執行時註解。二、還是先說一下思路    首先建立對應的註解類，並且通過反射 findViewById 方法去實

Layout動畫：在android佈局發生變化時新增動畫效果

layout動畫在每次佈局發生變化的時候系統呼叫的一個預載入動畫效果，使用layout動畫可以讓佈局的變化過度看起來更自然。使用起來很簡單，只需在控制元件中新增一個屬性就可以了，系統預設是不會啟動layout動畫的，因此我們平時的應用中不會產生這個效果。

Android之實現鬧鐘

1.佈局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" x

Android-LinearGradient實現TextView字型漸變的效果

可以看出，這個類提供了兩個構造方法： 引數說明： 引數x0：表示漸變的起始點x座標； 引數y0：表示漸變的起始點y座標； 引數x1：表示漸變的終點x座標； 引數y1：表示漸變的終點y座標； 引數colors：表示漸變的顏色陣列； 引數positions：用來指定顏色陣列的相對位置； 引數color0：表

Android之實現滑動的七種方法總結

在android開發中，滑動對一個app來說，是非常重要的，流暢的滑動操作，能夠給使用者帶來用好的體驗，那麼本次就來講講android中實現滑動有哪些方式。其實滑動一個View，本質上是移動一個View，改變其當前所屬的位置，要實現View的滑動，就必須監聽使用者觸

android之實現萬能適配RecyclerView的adapter

現在基本大家都推薦RecyclerView，很少有人使用ListView了，包括我自己也是，已經很久沒用ListView了，所以關於ListView的萬能adapter就不寫了。 每次寫專案的時候，每次遇到RecyclerView都要重新寫一個Adapter，