Android开发丶商城购物车模块（含demo超详细）

这篇博文详细描述了从零开始实现购物车，使用的控件很简单，就一个ExpandableListView，避免了嵌套，操作更简单方便。

先看看效果吧。

怎么样，很棒吧，如图所示，主要有店铺名称，商品价格，数量，图片，底部有总价格和结算(删除)按钮。

1.那我们先把常用的控件添加依赖，这里主要就是用一个第三方的刷新控件smartRefreshLayout。

刷新控件：com.scwang.smartrefresh:SmartRefreshLayout:1.0.5.1

2.现在就可以画主界面了。主界面东西不多，主要就是一个刷新控件smartRefreshLayout，一个列表控件ExpandableListView，还有若干TextView，画完大概就是这样的（中间空白是因为是列表还没有数据）。

activity_main.xml代码如下

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="京西不自营"
            android:textSize="16sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@drawable/bg_edit"
            android:text="编辑"
            android:textColor="#f0584f"
            android:textSize="16sp" />

    </RelativeLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000" />

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/main_smartRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ExpandableListView
            android:id="@+id/main_expandableListView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:paddingLeft="20dp"
            android:text="总价格:0"
            android:textSize="16sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:text="结算"
            android:textColor="#fff"
            android:textSize="16sp" />

    </LinearLayout>
</LinearLayout>

值得一提的是，我们这里给 "编辑" 按钮添加了一个红线背景，这里我们手动画一个xml背景文件即可。

bg_edit.xml代码如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 边角弧度 -->
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

    <!-- 包裹线条 -->
    <stroke
        android:width="1dp"
        android:color="#f0584f" />

    <!-- 内间距 -->
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />

</shape>

3.接下来我们就可以画列表item了。

我们发现主要是以选中状态、商品名称、规格描述、价格、右边的数量选择器来显示，这个不难，画完大概就是这样的

这里稍微有点难度的是选择器的绘制，主要是三个Textview，三者不同之处在于背景颜色和边框颜色，我们先画两个背景xml

A、加减号所需的灰色背景xml：

bg_calculator_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#f2f2f2" />
    <stroke
        android:width="1px"
        android:color="#CCCCCC" />

</shape>

B、中间数字所需的白色背景xml：

bg_calculator_white.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    
    <solid android:color="#ffffff"/>
    <stroke android:color="#CCCCCC"
        android:width="1px"/>

</shape>

现在没什么难度了，都怼上去吧，下面是子item布局的详细代码（一个相对布局就能搞定的就不要重复嵌套其它布局了）：

item_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:paddingRight="10dp">

    <RelativeLayout
        android:id="@+id/item_check"
        android:layout_width="40dp"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/item_checkStatus"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerInParent="true"
            android:src="@drawable/radio_choose" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/item_pic"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/item_check"
        android:src="@color/colorPrimaryDark" />

    <TextView
        android:id="@+id/item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/item_pic"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/item_pic"
        android:text="这是一只标题"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/item_spec"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/item_name"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/item_pic"
        android:text="这是一只规格" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/item_pic"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/item_pic"
        android:text="￥0.00"
        android:textColor="#f0584f" />

    <TextView
        android:id="@+id/item_reduce"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignBottom="@id/item_pic"
        android:layout_toLeftOf="@id/item_num"
        android:background="@drawable/bg_calculator_gray"
        android:gravity="center"
        android:text="—" />

    <TextView
        android:id="@+id/item_num"
        android:layout_width="25dp"
        and