Android實現淘寶購物車
阿新 • • 發佈：2019-01-15
先上效果：
購物車實現使用的ExpandableListView，關於它的使用的就不在多說，網上的資料都非常多。
xml裡面佈局程式碼：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height 初始化控制元件：
private void initView() {
mExpandableListView = (ExpandableListView) findViewById(R.id.expandableListView);
mCbSelectAll = (SmoothCheckBox) findViewById(R.id.cb_select_all);
mTvAllMoney = (TextView) findViewById(R.id.tv_all_money);
mBtnBuy = (Button) findViewById(R.id.btn_settlement);
//去掉ExpandableListView 預設的箭頭
mExpandableListView.setGroupIndicator(null);
//用於列表滑動時，EditText清除焦點，收起軟鍵盤
mExpandableListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView absListView, int scrollState) {
if (SCROLL_STATE_TOUCH_SCROLL == scrollState) {
InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Activity
.INPUT_METHOD_SERVICE);
View focusView = getCurrentFocus();
if (focusView != null) {
inputMethodManager.hideSoftInputFromWindow(focusView.getWindowToken(), InputMethodManager
.HIDE_NOT_ALWAYS);
focusView.clearFocus();
}
}
}
@Override
public void onScroll(AbsListView absListView, int i, int i1, int i2) {
}
});
}資料的話都是自己造的資料，存放在assets資料夾裡面，下面是模擬網路請求資料並解析
private void initData() {
//讀取資料解析
AssetManager assetManager = getAssets();
try {
InputStream is = assetManager.open("data.json");
BufferedReader br = new BufferedReader(new InputStreamReader(is));
stringBuffer = new StringBuffer();
String str;
while ((str = br.readLine()) != null) {
stringBuffer.append(str);
}
} catch (IOException e) {
e.printStackTrace();
}
Gson gson = new Gson();
goodBean = gson.fromJson(stringBuffer.toString(), GoodBean.class);
mAdapter = new ExpandableListAdapter(this, goodBean);
mAdapter.setChangedListener(this);
mExpandableListView.setAdapter(mAdapter);
//展開所有的分組
for (int i = 0; i < goodBean.getContent().size(); i++) {
mExpandableListView.expandGroup(i);
}
}模擬的json資料裡面添加了店鋪和商品是否被選中的標誌欄位，用來存放選中的狀態。
介面卡裡面根據請求資料裡面儲存的狀態設定店鋪是否被選中：
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
GroupViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_shopingcart_group, parent, false);
holder = new GroupViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (GroupViewHolder) convertView.getTag();
}
holder.cbGroupItem.setTag(groupPosition);
holder.cbGroupItem.setOnClickListener(listener);
holder.tvPosition.setText(goodBean.getContent().get(groupPosition).getAddress());
//根據獲取的狀態設定是否被選中
if (goodBean.getContent().get(groupPosition).isSelected()) {
if (!holder.cbGroupItem.isChecked()) {
holder.cbGroupItem.setChecked(true);
}
} else {
holder.cbGroupItem.setChecked(false);
}
return convertView;
}頭部佈局的xml，這裡使用了自定義的checkBox，點選選中的時候可以新增動畫（具體程式碼看原始碼）：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@color/divide_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="15dp">
<com.xp.shoppingcart.SmoothCheckBox
android:id="@+id/cb_group_item"
android:layout_width="24dp"
android:layout_height="24dp" />
<TextView
android:id="@+id/tv_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:drawableLeft="@mipmap/ic_position"
android:drawablePadding="3dp"
android:text="京東旗艦店發貨"
android:textColor="#333333"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>根據請求資料裡面儲存的狀態設定店鋪是否被選中：
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_shopingcart_child, parent, false);
holder = new ChildViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ChildViewHolder) convertView.getTag();
}
String tag = groupPosition + "," + childPosition;
holder.cbItem.setTag(tag);
holder.tvReduce.setTag(tag);
holder.tvAdd.setTag(tag);
holder.imgDelete.setTag(tag);
holder.imgIcon.setTag(tag);
holder.cbItem.setOnClickListener(listener);
holder.tvReduce.setOnClickListener(listener);
//新增商品數量
holder.tvAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String tag = view.getTag().toString();
String[] split;
int groupId = 0;
int childId = 0;
int allCount = goodBean.getAllCount();
int allMoney;
if (tag.contains(",")) {
split = tag.split(",");
groupId = Integer.parseInt(split[0]);
childId = Integer.parseInt(split[1]);
}
String goodCount = goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount();
goodBean.getContent().get(groupId).getGoodDetail().get(childId).setCount(addCount(goodCount));
allMoney = goodBean.getAllMoney();
if (goodBean.getContent().get(groupId).getGoodDetail().get(childId).isSelected()) {
allMoney += Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
}
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
}
});
holder.imgDelete.setOnClickListener(listener);
//根據獲取的狀態設定是否被選中
if (goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).isSelected()) {
holder.cbItem.setChecked(true);
} else {
holder.cbItem.setChecked(false);
}
//設定資料
holder.tvPrice.setText("¥" + goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getPrice());
holder.tvGoodName.setText(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getName());
//對商品數量的監聽
EditTextWatcher textWatcher = (EditTextWatcher) holder.etCount.getTag(KEY_DATA);
if (textWatcher != null) {
holder.etCount.removeTextChangedListener(textWatcher);
}
holder.etCount.setText(String.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getCount()));
EditTextWatcher watcher = new EditTextWatcher(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition));
holder.etCount.setTag(KEY_DATA, watcher);
holder.etCount.addTextChangedListener(watcher);
holder.etCount.setText(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getCount());
return convertView;
}每個商品的xml佈局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal"
android:paddingBottom="15dp"
android:paddingRight="15dp">
<LinearLayout
android:id="@+id/ll_check"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="17dp">
<com.xp.shoppingcart.SmoothCheckBox
android:id="@+id/cb_item"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divide_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/img_icon"
android:layout_width="78dp"
android:layout_height="78dp"
android:src="@mipmap/ic_phone" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginTop="8dp"
android:layout_weight="1">
<TextView
android:id="@+id/tv_good_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="@+id/tv_reduce"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="@id/tv_good_name"
android:layout_marginTop="6dp"
android:background="@drawable/selector_shopping_cart_subtract"
android:gravity="center"
android:text="-"
android:textColor="@color/text_666666"
android:textSize="15sp" />
<EditText
android:id="@+id/et_count"
android:layout_width="49dp"
android:layout_height="30dp"
android:layout_alignTop="@+id/tv_reduce"
android:layout_marginBottom="1dp"
android:layout_toRightOf="@+id/tv_reduce"
android:background="@drawable/bg_input_box"
android:gravity="center"
android:inputType="number"
android:maxLength="6"
android:text="1"
android:textColor="@color/text_666666"
android:textCursorDrawable="@null"
android:textSize="12sp" />
<TextView
android:id="@+id/tv_add"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignTop="@+id/tv_reduce"
android:layout_toRightOf="@id/et_count"
android:background="@drawable/selector_shopping_cart_add"
android:gravity="center"
android:text="+"
android:textColor="@color/text_666666"
android:textSize="15sp" />
<TextView
android:id="@+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="¥899"
android:textColor="#FE3824"
android:textSize="13sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:gravity="end"
android:orientation="vertical">
</LinearLayout>
<ImageView
android:id="@+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:src="@mipmap/icon_delete" />
</LinearLayout>
</LinearLayout>
</LinearLayout>這裡是對店鋪點選選中事件的處理：
case R.id.cb_group_item:
checkBox = (SmoothCheckBox) v;
//根據父checkbox的選中狀態設定儲存資料裡面商品是否被選中
goodBean.getContent().get(groupPosition).setIsSelected(!checkBox.isChecked());
if (!checkBox.isChecked()) {
for (int i = 0; i < childSize; i++) {
if (!goodBean.getContent().get(groupPosition).getGoodDetail().get(i).isSelected()) {
allCount++;
goodBean.getContent().get(groupPosition).getGoodDetail().get(i).setIsSelected(!checkBox.isChecked());
allMoney += Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getCount())
* Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getPrice());
}
}
} else {
allCount -= childSize;
for (int i = 0; i < childSize; i++) {
goodBean.getContent().get(groupPosition).getGoodDetail().get(i).setIsSelected(!checkBox.isChecked());
allMoney -= Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getCount())
* Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getPrice());
}
}
//父item選中的數量
int fCount = 0;
//判斷是否所有的父item都被選中，決定全選按鈕狀態
for (int i = 0; i < goodBean.getContent().size(); i++) {
if (goodBean.getContent().get(i).isSelected()) {
fCount++;
}
}
if (fCount == goodBean.getContent().size()) {
goodBean.setAllSelect(true);
} else {
goodBean.setAllSelect(false);
}
goodBean.setAllCount(allCount);
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
break;接下來是對每個商品選中的處理：
case R.id.cb_item:
checkBox = (SmoothCheckBox) v;
int cCount = 0;//子item被選中的數量
int fcCount = 0;//父item被選中的數量
goodBean.getContent().get(groupId).getGoodDetail().get(childId).setIsSelected(!checkBox.isChecked());
//遍歷父item所有資料，統計被選中的item數量
for (int i = 0; i < goodBean.getContent().get(groupId).getGoodDetail().size(); i++) {
if (goodBean.getContent().get(groupId).getGoodDetail().get(i).isSelected()) {
cCount++;
}
}
//判斷是否所有的子item都被選中，決定父item狀態
if (cCount == goodBean.getContent().get(groupId).getGoodDetail().size()) {
goodBean.getContent().get(groupId).setIsSelected(true);
} else {
goodBean.getContent().get(groupId).setIsSelected(false);
}
//判斷是否所有的父item都被選中，決定全選按鈕狀態
for (int i = 0; i < goodBean.getContent().size(); i++) {
if (goodBean.getContent().get(i).isSelected()) {
fcCount++;
}
}
if (fcCount == goodBean.getContent().size()) {
goodBean.setAllSelect(true);
} else {
goodBean.setAllSelect(false);
}
//判斷子item狀態，更新結算總商品數和合計Money
if (!checkBox.isChecked()) {
allCount++;
allMoney += Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount())
* Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
} else {
allCount--;
allMoney -= Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount())
* Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
}
goodBean.setAllCount(allCount);
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
break;自定義回撥介面更新顯示的價格、數量：
/**
* 更新資料的回撥介面
*/
public interface UpdateView {
void update(boolean isAllSelected, int count, int price);
}
在主介面實現回撥介面，更新資料：
@Override
public void update(boolean isAllSelected, int count, int price) {
mBtnBuy.setText("結算(" + count + ")");
mTvAllMoney.setText("¥" + price);
mCbSelectAll.setChecked(isAllSelected);
}下載完整程式碼點選下邊
原始碼Demo
相關推薦
Android實現淘寶購物車
先上效果： 購物車實現使用的ExpandableListView，關於它的使用的就不在多說，網上的資料都非常多。 xml裡面佈局程式碼： <?xml version="1.0" encoding="utf-8"?> <Linear
android 實現淘寶授權功能
最近公司在做一個商城的app，用到了淘寶的連結，當用戶點選淘寶商品時，每次都要登入淘寶賬號。 這裡使用了阿里百川SDK，實現淘寶授權， //這裡是使用百川預設的WebView實現的，url為
jQuery實現淘寶購物車小組件
this poi con relative 探討 func isn ddc 都是 我愛擼碼，擼碼使我感到快樂! 大家好，我是Counter，本章將實現淘寶購物車小組件， 用原生js可以實現嗎，當然可以，可是就是任性一回，就是想用jQuery 來實現下。HTML代碼不多
利用Selenium+java實現淘寶自動結算購物車商品(附原始碼)
轉載請宣告原文地址！ 本次的主題是利用selenium+java實現結算購買購物車中的商品。 話不多說，本次首先要注意的是谷歌瀏覽器的版本，瀏覽器使用的驅動版本，selenium的jar包版本。 谷歌瀏覽器版本 71
Android 類似淘寶 電商 搜尋功能，監聽軟鍵盤搜尋事件，延遲自動搜尋，以及時間排序的搜尋歷史記錄的實現
最近跳槽去新公司，接受的第一個任務是在 一個電商模組的搜尋功能以及搜尋歷史記錄的實現。 需求和淘寶等電商的功能大體差不多，最上面一個搜尋框，下面顯示搜尋歷史記錄。在EditText裡輸入要搜尋的關鍵字後，按軟鍵盤的搜尋按鍵/延遲xxxxms後自動搜尋。然後將搜尋的內容展示給
android ------ RecyclerView 模仿淘寶購物車
電商專案中常常有購物車這個功能，做個很多專案了，都有不同的介面，選了一個來講一下。 RecyclerView 模仿淘寶購物車功能(刪除選擇商品，商品計算，選擇， 全選反選，商品數量加減等) 看看效果圖： Activity程式碼： /***** * Re
Android一點 仿淘寶購物車動畫
首先看看ios上的淘寶購物車的動畫效果ios淘寶購物車動畫 我們實現的效果 看特效是分為兩個介面，一個是主view，一個是彈出層。彈出層是用dialog實現的，只是加入了彈出的動畫，這裡就不分析了，我們主要看主view的動畫是怎麼實現的，初看好像只是
vue實現結算淘寶購物車效果
-a -c each ack borde 模型 == clear 合計 實現單選時的價格，全選時價格 單選效果圖 全選效果圖 html <template> <!-- 淘寶結算購物車 --> <div class="set
用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能 之 前臺頁面
group -a com 現在 中間 數據 bottom margin -m 首先來看一下我已經實現的效果圖： 消費者頁面：（本篇隨筆） （1）會顯示店主的頭像 （2）當前用戶發送信息顯示在右側，接受的信息，顯示在左側 店主或客服頁面：（下一篇隨筆） （1）在左側有一個列
用php+mysql+ajax實現淘寶客服或阿裏旺旺聊天功能 之 後臺頁面
聯系人 http esc hold 聊天內容 12px onclick onf pda 在上一篇隨筆中，我們已經看了如何實現前臺的對話功能；前臺我限定了店主只有一人，店鋪只有一個，所有比較單一，但後臺就不一樣了，而後臺更像是我們常見的聊天軟件；當然，前臺也應該實現這種效果，
vue實現淘寶商品詳情頁屬性選擇功能
line pan func sel eth AD 圖片 [1] urn 方法一是自己想出來的，方法二來自忘記哪裏看到的了 不知道是不是你要的效果： 方法一：利用input[type="radio"] css代碼： 1 input { 2
PYTHON 爬蟲筆記十:利用selenium+PyQuery實現淘寶美食數據搜集並保存至MongeDB（實戰項目三）
pre pager 淘寶 NPU group color 存在 pan rgs 利用selenium+PyQuery實現淘寶美食數據搜集並保存至MongeDB 目標站點分析 流程框架 爬蟲實戰 spider詳情頁 import pymongo im
通過雲伺服器實現淘寶京東搶拍器
馬上就要雙十一了，想在淘寶上幫女朋友搶一些禮物，網上下載了幾個搶拍器，普遍都有問題，最終還是決定自己製作一個搶拍器。由於秒殺也受到網路和系統環境的影響，這裡打算使用高速穩定點的雲主機來協助實現。 在雲主機的選擇上，必須是能直接連線主幹網路的雲主機，否則網路延遲和在家裡上網區別不大。（開始以為阿里雲秒殺會更快
通過雲服務器實現淘寶京東搶拍器
__file__ odin 家裏 png bdr 模擬瀏覽器 pro 按鈕 baidu 馬上就要雙十一了，想在淘寶上幫女朋友搶一些禮物，網上下載了幾個搶拍器，普遍都有問題，最終還是決定自己制作一個搶拍器。由於秒殺也受到網絡和系統環境的影響，這裏打算使用高速穩定點的雲主機來協
android-實現支付寶支付從底部彈窗效果
前言 我們再用支付寶支付的時候,會從底部彈上來一個對話方塊,讓我們選擇支付方式等等,今天我們就來慢慢實現這個功能 效果圖 實現 主介面很簡單,就是一個按鈕,點選後跳到支付詳情的Fragment中 package com.example.hfs.alipayuidemo; impor
Android仿淘寶底部圖示導航欄
在上一篇中，簡單的使用透明主題的Activity實現了仿微信右側頂部的對話方塊，上午又花了兩個小時研究了一下淘寶底部的導航欄實現，網上的做法也有很多，今天我就使用一種通過基本控制元件加上佈局的方式，沒有任何的自定義風格，控制元件等來實現，還是老樣子，先看一下效果
RecyclerView載入多型別item 實現淘寶首頁佈局
主要為大家介紹如何用RecycleView來實現淘寶首頁複雜的佈局，做電商類app的小夥伴們可以略作參考。 首先上效果圖： 下面說一下實現方式，主要思路就是根據不同的資料型別去制定不同的item型別，然後動態地去設定這些item的寬高，設定item的型別相信大家都會，我這
vue例項--仿淘寶購物車
下面是一張眾所周知的淘寶購物車頁面，今天要講解的案例就是用vue.js做一個類似的頁面 首先簡單介紹一下可能會用到的一些vue.js的用法： v-bind，繫結屬性；例如v-bind:class="{'class1':flag}"，這是常用的繫結樣式的方法，如果flag為true則cl
淘寶購物車效果（加，減，刪除，全選）
效果： 頁面需要引入jquery，ArtTemplate 頁面用假資料進行渲染 <!DOCTYPE html> <html lang="en"> <head> <m
利用selenium實現淘寶雙十一搶購商品
到雙十一了總是有一些定時搶購的貨物，有了這個指令碼再也不用煉手速了。 在這個基礎上使用Python3.7.1實現，並且解決bug：ERROR:platform_sensor_reader_win.cc 1.安裝Python 2.下載Webdriver 3.執行程式