1. 程式人生 > >android ------ RecyclerView 模仿淘寶購物車

android ------ RecyclerView 模仿淘寶購物車

電商專案中常常有購物車這個功能,做個很多專案了,都有不同的介面,選了一個來講一下。


RecyclerView 模仿淘寶購物車功能(刪除選擇商品,商品計算,選擇, 全選反選,商品數量加減等)

看看效果圖:

Activity程式碼:

/*****
 * RecyclerView 模仿淘寶購物車功能
 *
 * 刪除選擇商品,商品計算,選擇,全選反選,商品數量加減等
 *
 */
public class MainActivity extends AppCompatActivity {

    private RecyclerView rvNestDemo;
    private CartAdapter cartAdapter;
    CartInfo cartInfo;
    double price;
    int num;

    TextView cartNum;
    TextView cartMoney;
    Button cartShoppMoular;
    CheckBox checkBox;


    private TextView btnDelete;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rvNestDemo = (RecyclerView) findViewById(R.id.rv_nest_demo);
        cartNum = findViewById(R.id.cart_num);
        cartMoney = findViewById(R.id.cart_money);
        cartShoppMoular = findViewById(R.id.cart_shopp_moular);
        cartShoppMoular.setOnClickListener(new OnClickListener());
        checkBox = findViewById(R.id.cbx_quanx_check);
        checkBox.setOnClickListener(new OnClickListener());
        btnDelete = (TextView) findViewById(R.id.btn_delete);
        initView();
    }


    private void initView() {
        btnDelete.setOnClickListener(new OnClickListener());
        showData();
        rvNestDemo.setLayoutManager(new LinearLayoutManager(this));
        DividerItemDecoration itemDecoration = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
        itemDecoration.setDrawable(ContextCompat.getDrawable(this, R.drawable.line_divider_inset));
        rvNestDemo.addItemDecoration(itemDecoration);
        cartAdapter = new CartAdapter(this, cartInfo.getData());
        rvNestDemo.setAdapter(cartAdapter);
        showExpandData();

    }

    private void showExpandData() {
        /**
         * 全選
         */
        cartAdapter.setOnItemClickListener(new OnViewItemClickListener() {
            @Override
            public void onItemClick(boolean isFlang, View view, int position) {
                cartInfo.getData().get(position).setIscheck(isFlang);
                int length = cartInfo.getData().get(position).getItems().size();
                for (int i = 0; i < length; i++) {
                    cartInfo.getData().get(position).getItems().get(i).setIscheck(isFlang);
                }
                cartAdapter.notifyDataSetChanged();
                showCommodityCalculation();
            }
        });

        /**
         * 計算價錢
         */
        cartAdapter.setOnItemMoneyClickListener(new OnItemMoneyClickListener() {
            @Override
            public void onItemClick(View view, int position) {
                showCommodityCalculation();
            }

        });
    }

    /***
     * 計算商品的數量和價格
     */
    private void showCommodityCalculation() {
        price = 0;
        num = 0;
        for (int i = 0; i < cartInfo.getData().size(); i++) {
            for (int j = 0; j < cartInfo.getData().get(i).getItems().size(); j++) {
                if (cartInfo.getData().get(i).getItems().get(j).ischeck()) {
                    price += Double.valueOf((cartInfo.getData().get(i).getItems().get(j).getNum() * Double.valueOf(cartInfo.getData().get(i).getItems().get(j).getPrice())));
                    num++;
                } else {
                    checkBox.setChecked(false);
                }
            }
        }
        if (price == 0.0) {
            cartNum.setText("共0件商品");
            cartMoney.setText("¥ 0.0");
            return;
        }
        try {
            String money = String.valueOf(price);
            cartNum.setText("共" + num + "件商品");
            if (money.substring(money.indexOf("."), money.length()).length() > 2) {
                cartMoney.setText("¥ " + money.substring(0, (money.indexOf(".") + 3)));
                return;
            }
            cartMoney.setText("¥ " + money.substring(0, (money.indexOf(".") + 2)));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void showData() {
        cartInfo = JSON.parseObject(JSONDATA(), CartInfo.class);
    }

    private class OnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {

                //全選和不全選
                case R.id.cbx_quanx_check:
                    if (checkBox.isChecked()) {
                        int length = cartInfo.getData().size();
                        for (int i = 0; i < length; i++) {
                            cartInfo.getData().get(i).setIscheck(true);
                            int lengthn = cartInfo.getData().get(i).getItems().size();
                            for (int j = 0; j < lengthn; j++) {
                                cartInfo.getData().get(i).getItems().get(j).setIscheck(true);
                            }
                        }

                    } else {
                        int length = cartInfo.getData().size();
                        for (int i = 0; i < length; i++) {
                            cartInfo.getData().get(i).setIscheck(false);
                            int lengthn = cartInfo.getData().get(i).getItems().size();
                            for (int j = 0; j < lengthn; j++) {
                                cartInfo.getData().get(i).getItems().get(j).setIscheck(false);
                            }
                        }
                    }
                    cartAdapter.notifyDataSetChanged();
                    showCommodityCalculation();
                    break;
                case R.id.btn_delete:
                    //刪除選中商品
                    cartAdapter.removeChecked();
                    showCommodityCalculation();
                    break;
                case R.id.cart_shopp_moular:
                    Toast.makeText(MainActivity.this,"提交訂單:  "+cartMoney.getText().toString()+"元",Toast.LENGTH_LONG).show();
                    break;
            }
        }
}

這是我寫的第二個購物車,基本的功能都有了的。

有需要的小夥們,可以參考一下。

相關推薦

android ------ RecyclerView 模仿購物車

電商專案中常常有購物車這個功能,做個很多專案了,都有不同的介面,選了一個來講一下。 RecyclerView 模仿淘寶購物車功能(刪除選擇商品,商品計算,選擇, 全選反選,商品數量加減等) 看看效果圖: Activity程式碼: /***** * Re

Android一點 仿購物車動畫

首先看看ios上的淘寶購物車的動畫效果ios淘寶購物車動畫 我們實現的效果 看特效是分為兩個介面,一個是主view,一個是彈出層。彈出層是用dialog實現的,只是加入了彈出的動畫,這裡就不分析了,我們主要看主view的動畫是怎麼實現的,初看好像只是

Android 仿京東,RecyclerView巢狀ViewPager巢狀RecyclerView商品展示

最近看到京東,淘寶都有RecyclerView巢狀ViewPager巢狀RecyclerView商品展示的效果,效果挺好,廢話不多說先看效果圖: GIF.gif 技能點: 1.Android事件分發機制等 需求點: 1.列表巢狀,內層的列表可以左右切換 2.V

Android實現購物車

先上效果: 購物車實現使用的ExpandableListView,關於它的使用的就不在多說,網上的資料都非常多。 xml裡面佈局程式碼: <?xml version="1.0" encoding="utf-8"?> <Linear

UINavigationController 自定義轉場動畫(模仿App跳轉)

imp dal iap 默認 自定義轉場動畫 ict oda ack 調用 制作目的 想要自定義系統轉場動畫速度 放棄不順暢的 NavigationBar 隱藏消失 幹脆直接幹掉每個頁面的 NavigationBar,在使用 UINavigationController

Android開發仿商品詳情瀏覽效果 兩步曲

效果圖: 第一步佈局檔案: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr

vue例項--仿購物車

下面是一張眾所周知的淘寶購物車頁面,今天要講解的案例就是用vue.js做一個類似的頁面 首先簡單介紹一下可能會用到的一些vue.js的用法: v-bind,繫結屬性;例如v-bind:class="{'class1':flag}",這是常用的繫結樣式的方法,如果flag為true則cl

購物車效果(加,減,刪除,全選)

效果:     頁面需要引入jquery,ArtTemplate    頁面用假資料進行渲染 <!DOCTYPE html> <html lang="en"> <head> <m

Android 仿京東多規格選擇

上圖直接點,下次在修改理論,因為要下班了 這是淘寶的規格選擇,我隨便選擇了一個,將就著看吧 然後再來看看我的效果 這個我是在CSDN上看的一篇文章 我把地址貼出來這是原文地址我是在他的基礎改的 我做了一個判斷庫存的,程式碼不怎麼規範

Android 開啟手機,並自動識別口令,彈出商品資訊

前言:大家都遇到過被莫名其妙拉進一個微信群,然後群主開始發一些商品的連結,我們點選這個連結,會讓我們複製一個口令(就像這個¥AzZK0hPyou5¥),當我們複製這個口 令開啟淘寶會自動彈出這個商品的資訊。今天,就來和大家分享一下,這個需求是如何實現的。 1.首先我們需要

Vue 仿購物車

效果圖: 我們只是做演示,其中的資料應該從後臺來取得,這裡我們模擬幾條資料來顯示。 頁面佈局: <div id="shop_car"> <section class="car_main"> <!-

購物車前端(JS和Angularjs版本)

今天用HTML和JS實現以下購物車,然後再用Angualrjs再去實現一下購物車的前端實現。功能頁面分析:既然是做模仿淘寶購物車,肯定要先去分析一下淘寶的購物車頁面,自己去淘寶賣了兩件東西,看了下效果;首先有一個全選功能,全選的時候會把所有的單選框給選中,並且會把所有的金額進

Android Virtualview:、天貓又開源了一個動態化、高效能的UI框架

轉載於:https://www.jianshu.com/p/5bd7a210b800https://juejin.im/post/5a4305585188257ebb73fbc9前言淘寶、天貓一直致力於解決 頁面動態化的問題在2017年的4月釋出了v1.0解決方案:Tangram模型 及其對應的 Androi

Jquery仿購物車

首先看效果圖,點選全選按鈕,所有帶條目的複選框按鈕都會隨之變化,觀察結算按鈕的顏色變化。帶條目的複選框按鈕沒有被全部選中時,全選按鈕也不會被選中。 $(function() { showTotal();//計算總計 /* 給全選新增click事件 *

購物車展示效果列表清單

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>購物車頁面</title> <s

Android專案類似 電商 搜尋功能,監聽軟鍵盤搜尋事件,延遲自動搜尋,以及時間排序的搜尋歷史記錄的實現

最近跳槽去新公司,接受的第一個任務是在 一個電商模組的搜尋功能以及搜尋歷史記錄的實現。 需求和淘寶等電商的功能大體差不多,最上面一個搜尋框,下面顯示搜尋歷史記錄。在EditText裡輸入要搜尋的關鍵字後,按軟鍵盤的搜尋按鍵/延遲xxxxms後自動搜尋。然後將搜尋

Android之仿商品詳情瀏覽效果

-----------------轉載請註明出處:http://blog.csdn.net/android_cll 一:先來幾張效果圖,沒有弄gif動畫,也就是商品詳情滑動到底部繼續上滑檢視圖文詳情、 二:實現步驟:   1.自定義一個父容器ScrollVi

高仿購物車分分鐘讓你整合

前言 做商城類電商app購物車確實一直是一個難點,為什麼難呢? 主要原因呢是他裡面的邏輯複雜,然後 百度的資源好像都不太理想,好多就是一個簡單的listView來實現根本就達不到開發的需求。然後 一般都涉及到了店鋪概念,就不再是一個簡單listView

Android-->RecyclerView模仿探探左右滑動佈局

站在巨人的肩膀上,才能走得更遠. 我在此基礎上優化了部分程式碼, 添加了滑動回撥, 可自定義性更強. 並且添加了點選按鈕左右滑動的功能. 據說無圖都不敢發文章了. 看圖: 1:這種功能, 首先需要自己管理佈局 繼承 RecyclerV

仿購物車巢狀ListView

最近做到了淘寶的購物車功能,對於中間的店鋪商品的顯示也廢了翻腦筋,原本打算用ExpandableListView來做,發現又特別的麻煩,乾脆就直接寫個巢狀的ListView,廢話不多說,直接上程式碼 主頁 public class MainActivity extend