Android实现淘宝购物车

先上效果：



购物车实现使用的ExpandableListView，关于它的使用的就不在多说，网上的资料都非常多。

xml里面布局代码：

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

<include layout="@layout/include_toolbar" />

<ExpandableListView
android:id="@+id/expandableListView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none"
android:divider="@null"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divide_line"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="49dp"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal">

<com.xp.shoppingcart.SmoothCheckBox
android:id="@+id/cb_select_all"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginLeft="15dp" />

<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="0.69"
android:text="全选"
android:textColor="#333333"
android:textSize="15sp" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="end"
android:orientation="vertical">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="合计"
android:textColor="#333333"
android:textSize="15sp" />

<TextView
android:id="@+id/tv_all_money"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="¥0"
android:textColor="#FE3824"
android:textSize="15sp" />
</LinearLayout>

<TextView
android:id="@+id/tv_transport"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="运费：¥0"
android:textColor="#999999"
android:textSize="11sp" />
</LinearLayout>

<Button
android:id="@+id/btn_settlement"
android:layout_width="95dp"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:background="#FE3824"
android:text="结算(0)"
android:textColor="@android:color/white"
android:textSize="16sp" />
</LinearLayout>

</LinearLayout>

初始化控件：

private void initView() {
mExpandableListView = (ExpandableListView) findViewById(R.id.expandableListView);
mCbSelectAll = (SmoothCheckBox) findViewById(R.id.cb_select_all);
mTvAllMoney = (TextView) findViewById(R.id.tv_all_money);
mBtnBuy = (Button) findViewById(R.id.btn_settlement);
//去掉ExpandableListView 默认的箭头
mExpandableListView.setGroupIndicator(null);

//用于列表滑动时，EditText清除焦点，收起软键盘
mExpandableListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView absListView, int scrollState) {
if (SCROLL_STATE_TOUCH_SCROLL == scrollState) {
InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Activity
.INPUT_METHOD_SERVICE);
View focusView = getCurrentFocus();
if (focusView != null) {
inputMethodManager.hideSoftInputFromWindow(focusView.getWindowToken(), InputMethodManager
.HIDE_NOT_ALWAYS);
focusView.clearFocus();
}
}
}

@Override
public void onScroll(AbsListView absListView, int i, int i1, int i2) {

}
});

}

数据的话都是自己造的数据，存放在assets文件夹里面，下面是模拟网络请求数据并解析

private void initData() {
//读取数据解析
AssetManager assetManager = getAssets();
try {
InputStream is = assetManager.open("data.json");
BufferedReader br = new BufferedReader(new InputStreamReader(is));
stringBuffer = new StringBuffer();
String str;
while ((str = br.readLine()) != null) {
stringBuffer.append(str);
}
} catch (IOException e) {
e.printStackTrace();
}
Gson gson = new Gson();
goodBean = gson.fromJson(stringBuffer.toString(), GoodBean.class);
mAdapter = new ExpandableListAdapter(this, goodBean);
mAdapter.setChangedListener(this);
mExpandableListView.setAdapter(mAdapter);
//展开所有的分组
for (int i = 0; i < goodBean.getContent().size(); i++) {
mExpandableListView.expandGroup(i);
}
}

模拟的json数据里面添加了店铺和商品是否被选中的标志字段，用来存放选中的状态。

适配器里面根据请求数据里面保存的状态设置店铺是否被选中：

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
GroupViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_shopingcart_group, parent, false);
holder = new GroupViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (GroupViewHolder) convertView.getTag();
}
holder.cbGroupItem.setTag(groupPosition);
holder.cbGroupItem.setOnClickListener(listener);
holder.tvPosition.setText(goodBean.getContent().get(groupPosition).getAddress());
//根据获取的状态设置是否被选中
if (goodBean.getContent().get(groupPosition).isSelected()) {
if (!holder.cbGroupItem.isChecked()) {
holder.cbGroupItem.setChecked(true);
}
} else {
holder.cbGroupItem.setChecked(false);
}
return convertView;
}

头部布局的xml，这里使用了自定义的checkBox，点击选中的时候可以添加动画（具体代码看源码）：

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

<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="@color/divide_line" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="15dp">

<com.xp.shoppingcart.SmoothCheckBox
android:id="@+id/cb_group_item"
android:layout_width="24dp"
android:layout_height="24dp" />

<TextView
android:id="@+id/tv_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_weight="1"
android:drawableLeft="@mipmap/ic_position"
android:drawablePadding="3dp"
android:text="京东旗舰店发货"
android:textColor="#333333"
android:textSize="15sp" />
</LinearLayout>
</LinearLayout>

根据请求数据里面保存的状态设置店铺是否被选中：

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildViewHolder holder;
if (convertView == null) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_shopingcart_child, parent, false);
holder = new ChildViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ChildViewHolder) convertView.getTag();
}
String tag = groupPosition + "," + childPosition;
holder.cbItem.setTag(tag);
holder.tvReduce.setTag(tag);
holder.tvAdd.setTag(tag);
holder.imgDelete.setTag(tag);
holder.imgIcon.setTag(tag);
holder.cbItem.setOnClickListener(listener);
holder.tvReduce.setOnClickListener(listener);
//添加商品数量
holder.tvAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String tag = view.getTag().toString();
String[] split;
int groupId = 0;
int childId = 0;
int allCount = goodBean.getAllCount();
int allMoney;
if (tag.contains(",")) {
split = tag.split(",");
groupId = Integer.parseInt(split[0]);
childId = Integer.parseInt(split[1]);
}
String goodCount = goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount();
goodBean.getContent().get(groupId).getGoodDetail().get(childId).setCount(addCount(goodCount));
allMoney = goodBean.getAllMoney();
if (goodBean.getContent().get(groupId).getGoodDetail().get(childId).isSelected()) {
allMoney += Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
}
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
}
});

holder.imgDelete.setOnClickListener(listener);
//根据获取的状态设置是否被选中
if (goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).isSelected()) {
holder.cbItem.setChecked(true);
} else {
holder.cbItem.setChecked(false);
}
//设置数据
holder.tvPrice.setText("¥" + goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getPrice());
holder.tvGoodName.setText(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getName());
//对商品数量的监听
EditTextWatcher textWatcher = (EditTextWatcher) holder.etCount.getTag(KEY_DATA);
if (textWatcher != null) {
holder.etCount.removeTextChangedListener(textWatcher);
}
holder.etCount.setText(String.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getCount()));
EditTextWatcher watcher = new EditTextWatcher(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition));
holder.etCount.setTag(KEY_DATA, watcher);
holder.etCount.addTextChangedListener(watcher);

holder.etCount.setText(goodBean.getContent().get(groupPosition).getGoodDetail().get(childPosition).getCount());

return convertView;

}

每个商品的xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="horizontal"
android:paddingBottom="15dp"
android:paddingRight="15dp">

<LinearLayout
android:id="@+id/ll_check"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:paddingLeft="15dp"
android:paddingRight="17dp">

<com.xp.shoppingcart.SmoothCheckBox
android:id="@+id/cb_item"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical" />
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/divide_line" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal">

<ImageView
android:id="@+id/img_icon"
android:layout_width="78dp"
android:layout_height="78dp"
android:src="@mipmap/ic_phone" />

<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginTop="8dp"
android:layout_weight="1">

<TextView
android:id="@+id/tv_good_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />

<TextView
android:id="@+id/tv_reduce"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_below="@id/tv_good_name"
android:layout_marginTop="6dp"
android:background="@drawable/selector_shopping_cart_subtract"
android:gravity="center"
android:text="-"
android:textColor="@color/text_666666"
android:textSize="15sp" />

<EditText
android:id="@+id/et_count"
android:layout_width="49dp"
android:layout_height="30dp"
android:layout_alignTop="@+id/tv_reduce"
android:layout_marginBottom="1dp"
android:layout_toRightOf="@+id/tv_reduce"
android:background="@drawable/bg_input_box"
android:gravity="center"
android:inputType="number"
android:maxLength="6"
android:text="1"
android:textColor="@color/text_666666"
android:textCursorDrawable="@null"
android:textSize="12sp" />

<TextView
android:id="@+id/tv_add"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignTop="@+id/tv_reduce"
android:layout_toRightOf="@id/et_count"
android:background="@drawable/selector_shopping_cart_add"
android:gravity="center"
android:text="+"
android:textColor="@color/text_666666"
android:textSize="15sp" />

<TextView
android:id="@+id/tv_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text="¥899"
android:textColor="#FE3824"
android:textSize="13sp" />
</RelativeLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="18dp"
android:gravity="end"
android:orientation="vertical">

</LinearLayout>

<ImageView
android:id="@+id/img_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:src="@mipmap/icon_delete" />

</LinearLayout>
</LinearLayout>

</LinearLayout>

这里是对店铺点击选中事件的处理：

case R.id.cb_group_item:
checkBox = (SmoothCheckBox) v;
//根据父checkbox的选中状态设置存储数据里面商品是否被选中
goodBean.getContent().get(groupPosition).setIsSelected(!checkBox.isChecked());
if (!checkBox.isChecked()) {
for (int i = 0; i < childSize; i++) {
if (!goodBean.getContent().get(groupPosition).getGoodDetail().get(i).isSelected()) {
allCount++;
goodBean.getContent().get(groupPosition).getGoodDetail().get(i).setIsSelected(!checkBox.isChecked());
allMoney += Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getCount())
* Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getPrice());
}
}
} else {
allCount -= childSize;
for (int i = 0; i < childSize; i++) {
goodBean.getContent().get(groupPosition).getGoodDetail().get(i).setIsSelected(!checkBox.isChecked());
allMoney -= Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getCount())
* Integer.valueOf(goodBean.getContent().get(groupPosition).getGoodDetail().get(i).getPrice());
}
}
//父item选中的数量
int fCount = 0;
//判断是否所有的父item都被选中，决定全选按钮状态
for (int i = 0; i < goodBean.getContent().size(); i++) {
if (goodBean.getContent().get(i).isSelected()) {
fCount++;
}
}
if (fCount == goodBean.getContent().size()) {
goodBean.setAllSelect(true);
} else {
goodBean.setAllSelect(false);
}
goodBean.setAllCount(allCount);
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
break;

接下来是对每个商品选中的处理：

case R.id.cb_item:
checkBox = (SmoothCheckBox) v;
int cCount = 0;//子item被选中的数量
int fcCount = 0;//父item被选中的数量
goodBean.getContent().get(groupId).getGoodDetail().get(childId).setIsSelected(!checkBox.isChecked());
//遍历父item所有数据，统计被选中的item数量
for (int i = 0; i < goodBean.getContent().get(groupId).getGoodDetail().size(); i++) {
if (goodBean.getContent().get(groupId).getGoodDetail().get(i).isSelected()) {
cCount++;
}
}
//判断是否所有的子item都被选中，决定父item状态
if (cCount == goodBean.getContent().get(groupId).getGoodDetail().size()) {
goodBean.getContent().get(groupId).setIsSelected(true);
} else {
goodBean.getContent().get(groupId).setIsSelected(false);
}
//判断是否所有的父item都被选中，决定全选按钮状态
for (int i = 0; i < goodBean.getContent().size(); i++) {
if (goodBean.getContent().get(i).isSelected()) {
fcCount++;
}
}
if (fcCount == goodBean.getContent().size()) {
goodBean.setAllSelect(true);
} else {
goodBean.setAllSelect(false);
}
//判断子item状态，更新结算总商品数和合计Money
if (!checkBox.isChecked()) {
allCount++;
allMoney += Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount())
* Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
} else {
allCount--;
allMoney -= Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getCount())
* Integer.valueOf(goodBean.getContent().get(groupId).getGoodDetail().get(childId).getPrice());
}
goodBean.setAllCount(allCount);
goodBean.setAllMoney(allMoney);
notifyDataSetChanged();
updateViewListener.update(goodBean.isAllSelect(), allCount, allMoney);
break;

自定义回调接口更新显示的价格、数量：

/**
* 更新数据的回调接口
*/
public interface UpdateView {
void update(boolean isAllSelected, int count, int price);
}

在主界面实现回调接口，更新数据：

@Override
public void update(boolean isAllSelected, int count, int price) {
mBtnBuy.setText("结算(" + count + ")");
mTvAllMoney.setText("¥" + price);
mCbSelectAll.setChecked(isAllSelected);
}

下载完整代码点击下边

源码Demo