本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
之前我们讲了自定义控件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地址查看工程源码。
网友评论