仿京东商城系列10------添加购物车，管理购物车功能实现

2017-08-24 本文已影响1372人小庄bb

本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/

项目已经做完，
https://github.com/15829238397/CN5E-shop

前言

之前我们讲了自定义控件NumControlerView （数量控制器）以及封装的购物车数据库存储器的实现。接下来我们便可以完善购物车的功能结构。先看后做，上效果图：

购物车.gif

内容

页面设计：
购物车页面如上图所示，有两个页面（商品结算页面，购物车信息编辑页面）
1.商品结算页面，最上层是一个自定义toolbar（右端有编辑按钮，点击跳转为编辑页面），然后是一个RecyclerView(展示被加入购物车的商品信息)，在下方有结算按钮和总价统计还有全选按钮。
2.购物车信息编辑页面，最上层是一个自定义toolbar（右端有完成按钮，点击跳转为结算页面），然后是一个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="去结算"
                android:id="@+id/pay_button"
                android:textColor="@color/white"
                android:background="@color/red"/>

        </RelativeLayout>

    </RelativeLayout>

</LinearLayout>

功能分析：
在进行代码设计之前，我们先对购物车页面功能进行分析。
1.添加商品和商品展示。
2.改变商品数量
3.选择删除已添加的商品
4.选择结算商品去结算
添加商品和商品展示流程：
1.例如当点击hot页面的立即购买按钮时，将会调用添加购物车方法。我们将选中商品的信息赋值到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(购物车数据存储器)将该对象信息以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();
    }

改变商品数量：
1.当点击数量控制器的+/-号时，显示的数据会发生改变之外，会立即更改SharedPreferences内存储的数据。

  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内存储的数据。刷新界面。

 pay_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(statua == STATUS_NORNAL){
                    //去结算
                }else if (statua == STATUS_EDIT){
                    deleteCartData() ;
                }
            }
        });

-选择结算商品
结算功能将在后面博文讲述。

购物车的功能就先讲到这里，结算的功能将方法到后续继续介绍。有兴趣的可以点击页首的git地址查看工程源码。

仿京东商城系列10------添加购物车，管理购物车功能实现

本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/

前言

内容

猜你喜欢

热点阅读