本文为菜鸟窝作者刘婷的连载。”商城项目实战”系列来聊聊仿”京东淘宝的购物商城”如何实现。
在上一篇文章《商城项目实战 | 14.1 仿京东购物车的实现（一）》中已经实现了购物车模块商品列表的显示，那么下面我们要实现的就是购物车中商品的选择、商品合计以及商品的编辑模式和完成模式的切换，效果图还是要先看看。
这是编辑模式的时候的界面，对比之前的完成模式下的界面，首先上面的“编辑”文字变成了“完成”，其次下面的“去结算”按钮变为了“删除”按钮了，也没有合计。不过模式的切换是最后一步，先来实现商品的选择效果吧。
实现购物车商品选中效果
购物车的商品选中有几个要点，第一每项商品 item 中都有一个 checkbox，而最底部还有一个全选的 checkbox，当所有的商品都选中时，全选按钮要处于选中状态，而当商品列表中有一个商品未选中时，全选按钮处于未选中状态，第二就是当全选按钮选中时，所有商品都要选中，当全选按钮不被选中时，所有商品都要取消选中。这么一大段话，理解起来可能不太容易，但是实现并不复杂。
1.实现商品项选中判断是否全选
首先来实现上文所说的第一种情况，通过商品列表 item 项的选中情况来判断全选按钮是否要选中，这里的实现都是在列表的 Adapter， CartAdapter 中实现的。
private void checkListen() {
int count = 0;
int checkNum = 0;
if (datas != null) {
count = datas.size();
for (ShoppingCartInfo cart : datas) {
if (!cart.isChecked()) {
checkBox.setChecked(false);
break;
} else {
checkNum = checkNum + 1;
}
}
if (count == checkNum) {
checkBox.setChecked(true);
}
}
}
checkbox 就是全选按钮，根据选中的商品数量是否等于总的商品数，如果等于的话，就要全选，不等于则是不全选，也就是全选按钮处于未选中状态。
2.实现全选判断商品是否要被选中
因为这里的全选按钮直接点击下就要使得选中按钮处于选中状态或者是未选中状态，所以就直接为 checkbox 全选按钮添加点击事件的监听。
checkBox.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
checkAll_None(checkBox.isChecked());
}
});
public void checkAll_None(boolean isChecked){
if(!isNull())
return ;
int i=0;
for (ShoppingCartInfo cart :datas){
cart.setIsChecked(isChecked);
notifyItemChanged(i);
i++;
}
}
checkAll_None(boolean isChecked) 根据 checkbox 全选按钮的状态来遍历所有的商品项，设置所有的商品项处于选中或未选中的状态。
实现商品合计
商品的合计是指对商品总价的计算，这要根据选中的不同商品的价格乘以数量来取得，所以这里也需要根据商品项的是否选中状态，商品的合计也可以放在 CartAdapter 中实现，和上文的商品选中效果一起处理。
public void showTotalPrice(){
float total = getTotalPrice();
textView.setText(Html.fromHtml("合计 ￥" + total + ""), TextView.BufferType.SPANNABLE);
}
private float getTotalPrice(){
float sum=0;
if(!isNull())
return sum;
for (ShoppingCartInfo cart:
datas) {
if(cart.isChecked())
sum += cart.getCount()*cart.getPrice();
}
return sum;
}
getTotalPrice() 方法是根据商品项中所选中商品的数量乘以价格来计算获得总价，然后在 showTotalPrice() 中调用 getTotalPrice() 直接取得总价，最后显示在合计的 TextView 上。
实现编辑模式和完成模式的切换
购物车模块中有编辑模式和完成模式两种，编辑模式的时候可以对商品进行删除，而在完成模式时就可以去结算了，完成模式已经基本实现了，下面来主要实现编辑模式以及两种模式之间的切换。
1.实现编辑模式
编辑模式的时候有个删除按钮，简单起见，就直接在之前定义好的布局文件中添加一个删除的按钮。
删除按钮写好了，下面就是删除商品的操作了，为删除按钮添加监听事件。
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
delCart();
}
});
public void delCart(){
if(!isNull())
return ;
for(Iterator iterator = datas.iterator(); iterator.hasNext();){
ShoppingCartInfo cart = (ShoppingCartInfo) iterator.next();
if(cart.isChecked()){
int position = datas.indexOf(cart);
cartProvider.delete(cart);
iterator.remove();
notifyItemRemoved(position);
}
}
}
判断商品项是否被选中，如果被选中了，就要进行移除的操作，也就是删除了。
2.实现编辑模式和完成模式的切换
2.1 添加区分标志
模式的切换，自然要有一个标志来区分是编辑模式，还是完成模式，这里定义两个 int 类型的标志。
public static final int ACTION_EDIT=1;
public static final int ACTION_CAMPLATE=2;
ACTION_EDIT 表示编辑模式，ACTION_CAMPLATE 表示的则是完成模式。
2.2 添加事件监听
无论是编辑模式还是完成模式的显示，这些都要在顶部的右侧按钮点击时触发，所以为右侧按钮添加监听事件。
btnEdit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int action = (int) v.getTag();
if(ACTION_EDIT == action){
//切换完成模式
}
else if(ACTION_CAMPLATE == action){
//切换编辑模式
}
}
});
右侧按钮的点击事件监听要根据当前的模式来区分，如果是编辑模式，则要进入完成模式，如果是完成模式则要进入编辑模式。
2.3 切换为编辑模式
界面的初始状态是完成模式，所以在初始化的时候不要忘记了设置初始为完成模式。
btnEdit.setTag(ACTION_CAMPLATE);
这时候点击右侧按钮就要进入到编辑模式中，先来实现完成模式的切换。
private void showDelControl(){
mToolbar.getRightButton().setText("完成");
mTextTotal.setVisibility(View.GONE);
mBtnOrder.setVisibility(View.GONE);
mBtnDel.setVisibility(View.VISIBLE);
mToolbar.getRightButton().setTag(ACTION_EDIT);
mAdapter.checkAll_None(false);
mCheckBox.setChecked(false);
}
切换为完成模式，右侧按钮文本为“完成”，合计和结算要隐藏，删除按钮要显示，修改目前的模式为编辑模式，同时不要选中任意商品，并且全选也不能被选中。
2.4 切换为完成模式
切换到完成模式的处理和切换到编辑模式的处理类似，也是写在一个方法里面，不过是 hideDelControl() 方法。
private void hideDelControl(){
mTextTotal.setVisibility(View.VISIBLE);
mBtnOrder.setVisibility(View.VISIBLE);
mBtnDel.setVisibility(View.GONE);
mToolbar.setRightButtonText("编辑");
mToolbar.getRightButton().setTag(ACTION_CAMPLATE);
mAdapter.checkAll_None(true);
mAdapter.showTotalPrice();
mCheckBox.setChecked(true);
}
切换为编辑模式，右侧按钮文本为“编辑”，合计和结算要显示，删除按钮要隐藏，修改目前的模式为完成模式，所有商品都要被选中。
效果图
运行最终代码获取到效果图。
到这里，仿京东购物车模块的基本功能就都已经实现了。
撸这个项目的一半，你就是大神 , 戳http://mp.weixin.qq.com/s/ZagocTlDfxZpC2IjUSFhHg