仿京東商城系列10------添加購物車,管理購物車功能實現(xiàn)

本項目來自菜鳥窩,有興趣者點擊http://www.cniao5.com/course/

項目已經(jīng)做完,
https://github.com/15829238397/CN5E-shop


仿京東商城系列0------項目簡介
仿京東商城系列1------fragmentTabHost實現(xiàn)底部導(dǎo)航欄
仿京東商城系列2------自定義toolbar
仿京東商城系列3------封裝Okhttp
仿京東商城系列4------輪播廣告條
仿京東商城系列5------商品推薦欄
仿京東商城系列6------下拉刷新上拉加載的商品列表
仿京東商城系列7------商品分類頁面
仿京東商城系列8------自定義的數(shù)量控制器
仿京東商城系列9------購物車數(shù)據(jù)存儲器實現(xiàn)
仿京東商城系列10------添加購物車,管理購物車功能實現(xiàn)
仿京東商城系列11------商品排序功能以及布局切換實現(xiàn)(Tablayout)
仿京東商城系列12------商品詳細信息展示(nativie與html交互)
仿京東商城系列13------商品分享(shareSDK)
仿京東商城系列14------用戶登錄以及app登錄攔截
仿京東長城系列15------用戶注冊,SMSSDK集成
仿京東商城系列16------支付SDK集成
仿京東商城系列17------支付功能實現(xiàn)
仿京東商城系列18------xml文件讀取(地址選擇器)
仿京東商城系列19------九宮格訂單展示
仿京東商城系列20------終章


前言

之前我們講了自定義控件NumControlerView (數(shù)量控制器)以及封裝的購物車數(shù)據(jù)庫存儲器的實現(xiàn)。接下來我們便可以完善購物車的功能結(jié)構(gòu)。先看后做,上效果圖:

購物車.gif

內(nèi)容

  • 頁面設(shè)計:
    購物車頁面如上圖所示,有兩個頁面(商品結(jié)算頁面,購物車信息編輯頁面)
    1.商品結(jié)算頁面,最上層是一個自定義toolbar(右端有編輯按鈕,點擊跳轉(zhuǎn)為編輯頁面),然后是一個RecyclerView(展示被加入購物車的商品信息),在下方有結(jié)算按鈕和總價統(tǒng)計還有全選按鈕。
    2.購物車信息編輯頁面,最上層是一個自定義toolbar(右端有完成按鈕,點擊跳轉(zhuǎn)為結(jié)算頁面),然后是一個RecyclerView(展示被加入購物車的商品信息),在下方刪除按鈕,全選按鈕。

具體布局代碼:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.cne_shop.widget.CnToolbar
        android:id="@+id/toolBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:minWidth="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="購物車"
        android:titleTextColor="@color/white"
        app:isShowSearchView="false"
        app:rightButtonText="編輯"
        ></com.example.cne_shop.widget.CnToolbar>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/sumPart"
            android:layout_alignParentTop="true"
            android:id="@+id/recycleView">

        </android.support.v7.widget.RecyclerView>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/sumPart"
            android:layout_alignParentBottom="true"
            android:paddingTop="10dp"
            android:paddingBottom="10dp"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:gravity="center_vertical"
            android:background="@color/cardview_shadow_start_color"
            >

            <CheckBox
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/checkbox_all"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:checked="true"
                android:paddingLeft="5dp"
                style="@style/CustomCheckboxTheme"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="5dp"
                android:paddingRight="10dp"
                android:text="全選"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/checkbox_all"
                android:id="@+id/allSelect"
                />

            <TextView
                android:id="@+id/txt_total"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/white"
                android:text="合計 ¥0.0"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/allSelect"
                />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_alignParentRight="true"
                android:text="去結(jié)算"
                android:id="@+id/pay_button"
                android:textColor="@color/white"
                android:background="@color/red"/>

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>
  • 功能分析:
    在進行代碼設(shè)計之前,我們先對購物車頁面功能進行分析。
    1.添加商品和商品展示。
    2.改變商品數(shù)量
    3.選擇刪除已添加的商品
    4.選擇結(jié)算商品去結(jié)算

  • 添加商品和商品展示流程:
    1.例如當(dāng)點擊hot頁面的立即購買按鈕時,將會調(diào)用添加購物車方法。我們將選中商品的信息賦值到ShoppingCat類型的對象里。
    1.1將商品的信息賦值到ShoppingCat類型的對象

 public ShoppingCart toShoppinfCart(){

        ShoppingCart cart = new ShoppingCart() ;

        cart.setId(this.id);
        cart.setCount(1);
        cart.setChecked(true);
        cart.setImgUrl(this.imgUrl);
        cart.setName(this.name);
        cart.setPrice(this.price);

        return cart ;
    }

2.得到該對象后將該對象用我們之前封裝的Cartprovider(購物車數(shù)據(jù)存儲器)將該對象信息以Json字符串的格式存入SharedPreferences中,而購物車頁面的ReclerviewAdapter會立即重新從SharedPreferences加載商品信息,并展示。

 public void addToCart( int position ){

        Ware hotGoodsMsgPart = mHotAdapter.getData(position) ;

        CartProvider.getCartProvider(getContext()) .put( hotGoodsMsgPart );
        Toast.makeText( getContext() , "已添加到購物車" , Toast.LENGTH_SHORT ).show();
    }
  • 改變商品數(shù)量:
    1.當(dāng)點擊數(shù)量控制器的+/-號時,顯示的數(shù)據(jù)會發(fā)生改變之外,會立即更改SharedPreferences內(nèi)存儲的數(shù)據(jù)。
  cartAdapter.setNumControlerListener(new CartAdapter.NumControlerListener() {

            @Override
            public void onAdd(int position , int value) {
                Log.d("----" , "點擊了+++控件") ;
                if (shoppingCarts == null)
                    shoppingCarts = cartProvider.getAll();
                shoppingCarts.get(position).setCount(value);
                cartProvider.update(shoppingCarts.get(position));
                getSum();

            }

            @Override
            public void onSub(int position , int value) {
                Log.d("----" , "點擊了---控件") ;
                if (shoppingCarts == null)
                    shoppingCarts = cartProvider.getAll();
                shoppingCarts.get(position).setCount(value);
                cartProvider.update(shoppingCarts.get(position));
                getSum();

            }
        });
  • 選擇刪除已添加的商品:
    1.點擊自定義Toolbar右邊的編輯按鈕,切換編輯按鈕。
    2.選擇要刪除的按鈕即可刪除。在選擇刪除的時候立即刪除SharedPreferences內(nèi)存儲的數(shù)據(jù)。刷新界面。
 pay_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(statua == STATUS_NORNAL){
                    //去結(jié)算
                }else if (statua == STATUS_EDIT){
                    deleteCartData() ;
                }
            }
        });

-選擇結(jié)算商品
結(jié)算功能將在后面博文講述。


購物車的功能就先講到這里,結(jié)算的功能將方法到后續(xù)繼續(xù)介紹。有興趣的可以點擊頁首的git地址查看工程源碼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容