分享一個購物車的demo(效果高仿餓了麼軟體的購物效果)

標籤：listview的聯動   購物車動畫的實現   badgeview的使用   仿qq的訊息提示效果   表徵圖右上方數字提示   

這次分享的是一個很常見的效果，凡是涉及到購物的app或者旅遊類以及訂餐類的app都有看到過這種效果，兩個list view聯動顯示，添加購物車時的一個拋物線動畫實現，以及表徵圖或者item右上方的數字顯示。下面是我空閑時候寫的一個demo，介面比較陋，但是基本效果都實現了。

不多說，看：

只對添加按鈕做了監聽，刪除沒去寫（沒什麼必要）。

講一些主要的代碼，想下載源碼的可以去這裡下載（https://github.com/bobge/LinkedListView.git）：

左邊的listview的item右上方的數字是通過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:left="2dp"        android:top="1dp"        android:right="2dp"        android:bottom="1dp" />    <solid        android:color="#f00000" />    <size android:width="15dp"        android:height="15dp" /></shape>

想要實現圓形中間顯示數字只需要設定textview的寬高一樣就可以，然後設定textview的一個屬性為：

android:background="@drawable/shape_data"

購物車下面那個數字顯示我換了一種實現方式：調用BadgeView這個自訂類就能夠實現，用法很簡單，大家可以搜尋一下這個類。

兩個listview的聯動也很簡單：

listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {    @Override    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {        list2.clear();        list2.addAll(list.get(position).getList());        goodsAdapter.notifyDataSetChanged();    }});

只要在左邊list view的監聽中給右邊list view的適配器notifyDataSetChanged就可以了。主要看看我的資料來源格式應該就明白了。

拋物線動畫效果的實現，這部分網上有很多demo實現，其實原理很簡單，首先擷取點擊的那個位置的座標：

int[] startLocation = new int[2];// 一個整型數組，用來儲存按鈕的在螢幕的X、Y座標v.getLocationInWindow(startLocation);// 這是擷取購買按鈕的在螢幕的X、Y座標（這也是動畫開始的座標）

通過同樣的方法計算結束位置（即購物車的位置座標）,然後計算x，y軸上的平移距離，用AnimationSet添加translateAnimationX和translateAnimationY就ok了，具體的可以去下載源碼看看。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

分享一個購物車的demo(效果高仿餓了麼軟體的購物效果)