Android 购物车实现(思路+步骤+源码)

简介: Android 购物车实现(思路+步骤+源码)

购物车

20210120174100299.gif


Android 购物车


前言


购物车作为电商APP来说,是必备的。并且很多公司面试初级Android会问你购物车的实现思路和步骤,第一是想看你是否思路清晰,第二是否有过实践。里面的逻辑我相信用过淘宝、天猫、京东等电商APP的都比较清楚,但是写这个功能并不容易,很容易把逻辑写错,或者写着写着人就懵逼了,这是因为已经深陷其中,当然了,我也是一个菜鸟,在这里也是分享一下自己写这个购物车的一些思路和想法,大神大佬就一笑而过吧。


正文


购物车说难其实不难,主要是与用户的交互比较多,交互是三方一起完成的,用户、页面、后台。后台提供数据给页面显示出来,页面提供操作逻辑供用户操作,用户通过操作提交最终结果给后台。就像是一个圈。购物车也有简单的做法。首先就是只有商品没有店铺,这样在逻辑的复杂程度就低一些,其次就是用户操作一次页面,就向后台提交一次数据,


当然这种方式比较Low,也对网络的要求很高。但是对页面来说就很简单,因为页面只负责显示数据,不复杂逻辑处理,它要做的就是请求后台,拿到数据,刷新当前页面即可,但是这样后台的接口就多了,这不是一个合理的做法,但是它有效,如果你实在搞不定购物车的逻辑的页面交互可以这么做,前提是别让你的项目经理发现。


一、准备数据源


 要知道既然是购物车,首先要有商品才行吧,而商品其实就是数据,常规开发过程中,这些数据是由后台提供的,而这里既然是写Demo,那自然就不用那么麻烦了,自己写假数据就可以了。


首先要在AS中创建一个项目,命名为ShoppingCart。

20201207093708502.png


创建好之后,要准备一些数据,用来显示购物车里面的数据。当然了,我这里都是一些假数据,不过实际开发中的数据也和这个大体相似,你要说完全一模一样,那就不可能。


在com.llw.cart包下新建一个bean包。这个包下新建一个CarResponse类,代码如下:


package com.llw.cart.bean;
import java.util.List;
/**
 * 购物车返回数据
 * @author llw
 */
public class CarResponse {
    /**
     * code : 200
     * orderData : [{"shopId":1,"shopName":"京东自营","cartlist":[{"id":1,"shopId":1,"shopName":"京东自营","defaultPic":"https://img30.360buyimg.com/popWareDetail/jfs/t3208/194/7616404169/244198/369625db/58b7d093N03520fb7.jpg","productId":1,"productName":"三只松鼠_零食大礼包","color":"黑色","size":"18L","price":20,"count":1},{"id":2,"shopId":1,"shopName":"京东自营","defaultPic":"https://img14.360buyimg.com/n0/jfs/t2971/15/167732091/93002/204c1016/574d9d9aNe4e6fa7a.jpg","productId":2,"productName":"小米心跳手环","color":"白色","size":"20XXL","price":148,"count":1}]},{"shopId":2,"shopName":"海澜之家","cartlist":[{"id":1,"shopId":2,"shopName":"海澜之家","defaultPic":"https://img30.360buyimg.com/popWaterMark/jfs/t4075/83/1343091204/132469/9034cb9c/5873496bN68020ba8.jpg","productId":1,"productName":"短袖T恤男 2017夏季新品","color":"蓝色","size":"30X","price":181,"count":1}]},{"shopId":3,"shopName":"OPPO官方旗舰店","cartlist":[{"id":1,"shopId":3,"shopName":"OPPO官方旗舰店","defaultPic":"https://img10.360buyimg.com/cms/jfs/t6064/272/2163314583/157700/442d6477/593c1c49N7c63a7d9.jpg","productId":1,"productName":"OPPO R11 全网通","color":"蓝色","size":"30X","price":1999,"count":1},{"id":2,"shopId":3,"shopName":"OPPO官方旗舰店","defaultPic":"https://img14.360buyimg.com/n0/jfs/t3142/194/4953241722/254855/1651c2b1/585b9021Nf653e48a.jpg","productId":1,"productName":"OPPO R9 全网通","color":"蓝色","size":"30X","price":999,"count":1}]}]
     */
    private int code;
    private List<OrderDataBean> orderData;
    public int getCode() {
        return code;
    }
    public void setCode(int code) {
        this.code = code;
    }
    public List<OrderDataBean> getOrderData() {
        return orderData;
    }
    public void setOrderData(List<OrderDataBean> orderData) {
        this.orderData = orderData;
    }
    public static class OrderDataBean {
        /**
         * shopId : 1
         * shopName : 京东自营
         * cartlist : [{"id":1,"shopId":1,"shopName":"京东自营","defaultPic":"https://img30.360buyimg.com/popWareDetail/jfs/t3208/194/7616404169/244198/369625db/58b7d093N03520fb7.jpg","productId":1,"productName":"三只松鼠_零食大礼包","color":"黑色","size":"18L","price":20,"count":1},{"id":2,"shopId":1,"shopName":"京东自营","defaultPic":"https://img14.360buyimg.com/n0/jfs/t2971/15/167732091/93002/204c1016/574d9d9aNe4e6fa7a.jpg","productId":2,"productName":"小米心跳手环","color":"白色","size":"20XXL","price":148,"count":1}]
         */
        private int shopId;
        private String shopName;
        private List<CartlistBean> cartlist;
        public int getShopId() {
            return shopId;
        }
        public void setShopId(int shopId) {
            this.shopId = shopId;
        }
        public String getShopName() {
            return shopName;
        }
        public void setShopName(String shopName) {
            this.shopName = shopName;
        }
        public List<CartlistBean> getCartlist() {
            return cartlist;
        }
        public void setCartlist(List<CartlistBean> cartlist) {
            this.cartlist = cartlist;
        }
        public static class CartlistBean {
            /**
             * id : 1
             * shopId : 1
             * shopName : 京东自营
             * defaultPic : https://img30.360buyimg.com/popWareDetail/jfs/t3208/194/7616404169/244198/369625db/58b7d093N03520fb7.jpg
             * productId : 1
             * productName : 三只松鼠_零食大礼包
             * color : 黑色
             * size : 18L
             * price : 20
             * count : 1
             */
            private int id;
            private int shopId;
            private String shopName;
            private String defaultPic;
            private int productId;
            private String productName;
            private String color;
            private String size;
            private int price;
            private int count;
            public int getId() {
                return id;
            }
            public void setId(int id) {
                this.id = id;
            }
            public int getShopId() {
                return shopId;
            }
            public void setShopId(int shopId) {
                this.shopId = shopId;
            }
            public String getShopName() {
                return shopName;
            }
            public void setShopName(String shopName) {
                this.shopName = shopName;
            }
            public String getDefaultPic() {
                return defaultPic;
            }
            public void setDefaultPic(String defaultPic) {
                this.defaultPic = defaultPic;
            }
            public int getProductId() {
                return productId;
            }
            public void setProductId(int productId) {
                this.productId = productId;
            }
            public String getProductName() {
                return productName;
            }
            public void setProductName(String productName) {
                this.productName = productName;
            }
            public String getColor() {
                return color;
            }
            public void setColor(String color) {
                this.color = color;
            }
            public String getSize() {
                return size;
            }
            public void setSize(String size) {
                this.size = size;
            }
            public int getPrice() {
                return price;
            }
            public void setPrice(int price) {
                this.price = price;
            }
            public int getCount() {
                return count;
            }
            public void setCount(int count) {
                this.count = count;
            }
        }
    }
}


下面创建一个util包,包下创建一个Constant类,里面的代码如下:


package com.llw.cart.util;
/**
 * 常量
 * @author llw
 */
public class Constant {
    public static final String CAR_JSON = "{  \"code\" : 200 ,\n" +
            "  \"orderData\" : [\n" +
            "    {\n" +
            "\n" +
            "      \"shopId\": 1,\n" +
            "      \"shopName\":\"京东自营\",\n" +
            "      \"cartlist\": [\n" +
            "        {\n" +
            "          \"id\": 1,\n" +
            "          \"shopId\": 1,\n" +
            "          \"shopName\": \"京东自营\",\n" +
            "          \"defaultPic\": \"https://img30.360buyimg.com/popWareDetail/jfs/t3208/194/7616404169/244198/369625db/58b7d093N03520fb7.jpg\",\n" +
            "          \"productId\": 1,\n" +
            "          \"productName\": \"三只松鼠_零食大礼包\",\n" +
            "          \"color\": \"黑色\",\n" +
            "          \"size\": \"18L\",\n" +
            "          \"price\": 20,\n" +
            "          \"count\":1\n" +
            "        },\n" +
            "        {\n" +
            "          \"id\": 2,\n" +
            "          \"shopId\": 1,\n" +
            "          \"shopName\": \"京东自营\",\n" +
            "          \"defaultPic\": \"https://img14.360buyimg.com/n0/jfs/t2971/15/167732091/93002/204c1016/574d9d9aNe4e6fa7a.jpg\",\n" +
            "          \"productId\": 2,\n" +
            "          \"productName\": \"小米心跳手环\",\n" +
            "          \"color\": \"白色\",\n" +
            "          \"size\": \"20XXL\",\n" +
            "          \"price\": 148,\n" +
            "          \"count\": 1\n" +
            "        }\n" +
            "      ]\n" +
            "    }\n" +
            "  ,\n" +
            "    {\n" +
            "      \"shopId\": 2,\n" +
            "      \"shopName\":\"海澜之家\",\n" +
            "      \"cartlist\": [\n" +
            "        {\n" +
            "          \"id\": 1,\n" +
            "          \"shopId\": 2,\n" +
            "          \"shopName\": \"海澜之家\",\n" +
            "          \"defaultPic\": \"https://img30.360buyimg.com/popWaterMark/jfs/t4075/83/1343091204/132469/9034cb9c/5873496bN68020ba8.jpg\",\n" +
            "          \"productId\": 1,\n" +
            "          \"productName\": \"短袖T恤男 2017夏季新品\",\n" +
            "          \"color\": \"蓝色\",\n" +
            "          \"size\": \"30X\",\n" +
            "          \"price\": 181,\n" +
            "          \"count\":1\n" +
            "        }\n" +
            "      ]\n" +
            "    }\n" +
            "  ,\n" +
            "    {\n" +
            "      \"shopId\": 3,\n" +
            "      \"shopName\":\"OPPO官方旗舰店\",\n" +
            "      \"cartlist\": [\n" +
            "        {\n" +
            "          \"id\": 1,\n" +
            "          \"shopId\": 3,\n" +
            "          \"shopName\": \"OPPO官方旗舰店\",\n" +
            "          \"defaultPic\": \"https://img10.360buyimg.com/cms/jfs/t6064/272/2163314583/157700/442d6477/593c1c49N7c63a7d9.jpg\",\n" +
            "          \"productId\": 1,\n" +
            "          \"productName\": \"OPPO R11 全网通\",\n" +
            "          \"color\": \"蓝色\",\n" +
            "          \"size\": \"30X\",\n" +
            "          \"price\": 1999,\n" +
            "          \"count\":1\n" +
            "        },\n" +
            "        {\n" +
            "          \"id\": 2,\n" +
            "          \"shopId\": 3,\n" +
            "          \"shopName\": \"OPPO官方旗舰店\",\n" +
            "          \"defaultPic\": \"https://img14.360buyimg.com/n0/jfs/t3142/194/4953241722/254855/1651c2b1/585b9021Nf653e48a.jpg\",\n" +
            "          \"productId\": 1,\n" +
            "          \"productName\": \"OPPO R9 全网通\",\n" +
            "          \"color\": \"蓝色\",\n" +
            "          \"size\": \"30X\",\n" +
            "          \"price\": 999,\n" +
            "          \"count\":1\n" +
            "        }\n" +
            "      ]\n" +
            "    }\n" +
            "\n" +
            "  ]\n" +
            "}";
}


这里面就是JSON数据了,下面要做的就是吧这个JSON数据通过Gson成对应CarResponse,然后通过适配器将数据渲染出来形成一个列表展示。当然首先要设计布局。


二、绘制界面布局


所有布局绘制完成后的效果图如下所示


20210118145117971.png


那么先从drawable开始吧。


bg_goods_num.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#000"
        android:width="0.5dp"/>
</shape>


bg_increase_goods_num.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#000"
        android:width="0.5dp"/>
    <corners android:topRightRadius="4dp"
        android:bottomRightRadius="4dp" />
</shape>


bg_reduce_goods_num.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:color="#000"
        android:width="0.5dp"/>
    <corners android:topLeftRadius="4dp"
        android:bottomLeftRadius="4dp" />
</shape>


bg_settlement.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp"/>
    <gradient
        android:startColor="#FF5C13"
        android:endColor="#FC7D0B"
        android:angle="90" />
</shape>


bg_white_8.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFF"/>
    <corners android:radius="8dp"/>
</shape>


ic_check.xml

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:pathData="M12,22.5c-5.79,0 -10.5,-4.71 -10.5,-10.5S6.21,1.5 12,1.5 22.5,6.21 22.5,12 17.79,22.5 12,22.5zM12,3c-4.963,0 -9,4.037 -9,9s4.037,9 9,9 9,-4.037 9,-9S16.963,3 12,3z"
        android:fillColor="#a9b7b7"/>
</vector>


drawable下面的就写完了,下面到这个layout了,首先是activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#FFF">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="购物车"
            android:textColor="#000"
            android:textSize="18sp" />
        <!--编辑-->
        <TextView
            android:id="@+id/tv_edit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="12dp"
            android:padding="@dimen/dp_4"
            android:text="编辑"
            android:textColor="#000"
            android:textSize="16sp" />
    </androidx.appcompat.widget.Toolbar>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_store"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/lay_bottom"
        android:layout_below="@+id/toolbar"
        android:padding="12dp" />
    <RelativeLayout
        android:id="@+id/lay_bottom"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#FFF"
        android:paddingLeft="12dp">
        <ImageView
            android:id="@+id/iv_checked_all"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="12dp"
            android:src="@drawable/ic_check" />
        <TextView
            android:id="@+id/tv_checked_all"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/iv_checked_all"
            android:text="全选"
            android:textSize="16sp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toLeftOf="@+id/tv_total"
            android:text="合计:"
            android:textColor="#000"
            android:textSize="18sp" />
        <TextView
            android:id="@+id/tv_total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="8dp"
            android:layout_toLeftOf="@+id/tv_settlement"
            android:text="¥0"
            android:textColor="#DF3B0D"
            android:textSize="14sp" />
        <!--结算-->
        <TextView
            android:id="@+id/tv_settlement"
            android:layout_width="120dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="12dp"
            android:background="@drawable/bg_settlement"
            android:gravity="center"
            android:text="结算"
            android:textColor="#FFF"
            android:textSize="16sp" />
        <!--点击编辑时出现底部布局-->
        <LinearLayout
            android:id="@+id/lay_edit"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="24dp"
            android:layout_toRightOf="@+id/tv_checked_all"
            android:background="#FFF"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="gone">
            <TextView
                android:id="@+id/tv_share_goods"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3"
                android:background="#f4c600"
                android:foreground="?android:attr/selectableItemBackground"
                android:gravity="center"
                android:text="分享宝贝"
                android:textColor="@android:color/white"
                android:textSize="16sp" />
            <TextView
                android:id="@+id/tv_collect_goods"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="1dp"
                android:layout_weight="0.3"
                android:background="#ea8010"
                android:foreground="?android:attr/selectableItemBackground"
                android:gravity="center"
                android:text="移到收藏夹"
                android:textColor="@android:color/white"
                android:textSize="16sp" />
            <TextView
                android:id="@+id/tv_delete_goods"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="1dp"
                android:layout_weight="0.3"
                android:background="#eb4f38"
                android:foreground="?android:attr/selectableItemBackground"
                android:gravity="center"
                android:text="删除"
                android:textColor="@android:color/white"
                android:textSize="16sp" />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>


item_good.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:layout_marginBottom="12dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">
    <!--选中商品-->
    <ImageView
        android:id="@+id/iv_checked_goods"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:src="@drawable/ic_check" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        <!--商品图片-->
        <ImageView
            android:id="@+id/iv_goods"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginRight="12dp"
            android:scaleType="fitXY"
            android:src="@mipmap/ic_launcher" />
        <TextView
            android:id="@+id/tv_good_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/iv_goods"
            android:text="商品名"
            android:textColor="#000"
            android:textSize="16sp" />
        <TextView
            android:id="@+id/tv_good_color"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_good_name"
            android:layout_marginTop="4dp"
            android:layout_toRightOf="@+id/iv_goods"
            android:text="商品颜色"
            android:textSize="14sp" />
        <TextView
            android:id="@+id/tv_good_size"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_good_name"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="4dp"
            android:layout_toRightOf="@+id/tv_good_color"
            android:text="商品尺寸"
            android:textSize="14sp" />
        <TextView
            android:id="@+id/tv_goods_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="4dp"
            android:layout_toRightOf="@+id/iv_goods"
            android:lines="1"
            android:text="¥100000.00"
            android:textColor="#DF550B"
            android:textSize="20sp"
            android:textStyle="bold" />
        <!--改变商品数量-->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="4dp"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/tv_reduce_goods_num"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/bg_reduce_goods_num"
                android:gravity="center"
                android:text="—"
                android:textColor="#000"
                android:textSize="16sp" />
            <TextView
                android:id="@+id/tv_goods_num"
                android:layout_width="40dp"
                android:layout_height="24dp"
                android:layout_marginLeft="-0.5dp"
                android:layout_marginRight="-0.5dp"
                android:layout_toRightOf="@+id/tv_reduce_goods_num"
                android:background="@drawable/bg_goods_num"
                android:gravity="center"
                android:text="1"
                android:textColor="#000"
                android:textSize="16sp" />
            <TextView
                android:id="@+id/tv_increase_goods_num"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_toRightOf="@+id/tv_goods_num"
                android:background="@drawable/bg_increase_goods_num"
                android:gravity="center"
                android:text="+"
                android:textColor="#000"
                android:textSize="16sp" />
        </RelativeLayout>
    </RelativeLayout>
</LinearLayout>


item_store.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:layout_marginBottom="12dp"
    android:background="@drawable/bg_white_8"
    android:orientation="vertical"
    android:padding="12dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="12dp"
        android:gravity="center_vertical">
        <!--选中店铺-->
        <ImageView
            android:id="@+id/iv_checked_store"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="12dp"
            android:src="@drawable/ic_check" />
        <TextView
            android:id="@+id/tv_store_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="店铺名"
            android:textColor="#000"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>
    <!--店铺商品列表-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_goods"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>


OK,布局这边就写完了。


三、配置项目


配置项目的依赖和网络使用情况,首先在AndroidManifest.xml中增加网络访问权限的配置

20210118150011557.png


然后修改一下styles.xml中的样式


20210118150957272.png


然后就是配置项目的依赖库了,首先在工程的build.gradle下配置


maven { url "https://jitpack.io" }
• 1


20210118150146221.png


然后在app下的build.gradle中配置。

  //Gson解析
    implementation 'com.google.code.gson:gson:2.8.6'
    //RecyclerView
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
    //RecyclerView的好搭档
    implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.22'
    //热门强大的图片加载器
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

20210118150244559.png


配置好之后点击右上角的Sync Now进行同步依赖库。同步好之后进入第四步,渲染数据。


四、渲染数据


列表的渲染自然是离不开适配器的,那么一个购物车里面可能有多个店铺,一个店铺有多个商品,那么就是两个列表,也需要两个适配器,店铺适配器和商品适配器。


首先是店铺适配器,在com.llw.cart下创建一个adapter包,包下新建一个StoreAdapter类,里面的代码如下:

package com.llw.cart.adapter;
import androidx.annotation.Nullable;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.llw.cart.bean.CarResponse;
import com.llw.cart.R;
import java.util.List;
/**
 * 店铺适配器
 *
 * @author llw
 */
public class StoreAdapter extends BaseQuickAdapter<CarResponse.OrderDataBean, BaseViewHolder> {
    private RecyclerView rvGood;
    public StoreAdapter(int layoutResId, @Nullable List<CarResponse.OrderDataBean> data) {
        super(layoutResId, data);
    }
    @Override
    protected void convert(BaseViewHolder helper, CarResponse.OrderDataBean item) {
        rvGood = helper.getView(R.id.rv_goods);
        helper.setText(R.id.tv_store_name,item.getShopName());
        final GoodsAdapter goodsAdapter = new GoodAdapter(R.layout.item_good,item.getCartlist());
        rvGood.setLayoutManager(new LinearLayoutManager(mContext));
        rvGood.setAdapter(goodAdapter);
    }
}


然后是商品适配器,在新建一个GoodsAdapter类,里面的代码如下:

package com.llw.cart.adapter;
import android.widget.ImageView;
import androidx.annotation.Nullable;
import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.BaseViewHolder;
import com.llw.cart.bean.CarResponse;
import com.llw.cart.R;
import java.util.List;
/**
 * 商品适配器
 * @author llw
 */
public class GoodsAdapter extends BaseQuickAdapter<CarResponse.OrderDataBean.CartlistBean, BaseViewHolder> {
    public GoodsAdapter(int layoutResId, @Nullable List<CarResponse.OrderDataBean.CartlistBean> data) {
        super(layoutResId, data);
    }
    @Override
    protected void convert(BaseViewHolder helper, CarResponse.OrderDataBean.CartlistBean item) {
        helper.setText(R.id.tv_good_name, item.getProductName())
                .setText(R.id.tv_good_color,item.getColor())
                .setText(R.id.tv_good_size,item.getSize())
                .setText(R.id.tv_goods_price,item.getPrice()+"")
                .setText(R.id.tv_goods_num,item.getCount()+"");
        ImageView goodImg = helper.getView(R.id.iv_goods);
        Glide.with(mContext).load(item.getDefaultPic()).into(goodImg);
    }
}


适配器都写好了,那么该去Activity中去显示数据了。


进入MainActivity,创建一些变量

  public static final String TAG = "MainActivity";
    private RecyclerView rvStore;
    private List<CarResponse.OrderDataBean> mList = new ArrayList<>();
    private StoreAdapter storeAdapter;


然后新建一个initView方法,在这里进行数据的解析,然后赋值,后面设置到适配器中。

  /**
     * 初始化
     */
    private void initView() {
        //设置亮色状态栏模式 systemUiVisibility在Android11中弃用了,可以尝试一下。
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        rvStore = findViewById(R.id.rv_store);
        CarResponse carResponse = new Gson().fromJson(Constant.CAR_JSON, CarResponse.class);
        mList.addAll(carResponse.getOrderData());
        storeAdapter = new StoreAdapter(R.layout.item_store, mList);
        rvStore.setLayoutManager(new LinearLayoutManager(this));
        rvStore.setAdapter(storeAdapter);
    }


最后在onCreate方法中调用initView方法即可。


20210118151604754.png


然后可以运行了,效果如下:


20210118151805868.gif


现在这个列表就展示出来了,简单的模拟了一下购物车,商品不多,点到为止。

五、功能实现


 从上面的代码步骤中已经做好了准备工作,下面就要来实现购物车的具体功能了,光看着像是不行的,银样蜡枪头,中看不中用。


① 商品、店铺选中


设置店铺和商品的选中,需要修改一下CarResponse类。

20210118152602779.png


在这个类中的OrderDataBean类下新增加一个变量,用于判断店铺是否选中,同时增加get和set方法。

20210118152835185.png


同时也要在CartlistBean下创建一个变量,用于判断商品是否选中,同时增加get和set方法。


商品选中


修改GoodsAdapter中的代码,在convert中增加如下代码:

    ImageView checkedGoods = helper.getView(R.id.iv_checked_goods);
        //判断商品是否选中
        if (item.isChecked()) {
            checkedGoods.setImageDrawable(mContext.getDrawable(R.drawable.ic_checked));
        } else {
            checkedGoods.setImageDrawable(mContext.getDrawable(R.drawable.ic_check));
        }
        //添加点击事件
        helper.addOnClickListener(R.id.iv_checked_goods)//选中商品
                .addOnClickListener(R.id.tv_increase_goods_num)//增加商品
                .addOnClickListener(R.id.tv_reduce_goods_num);//减少商品

20210118160242125.png


就是通过之前的那个变量去判断是否为选中,以此改变ImageView的图片资源。然后在StoreAdapter中进行判断监听,在StoreAdapter的convert中增加如下代码

    //商品item中的点击事件
        goodsAdapter.setOnItemChildClickListener(new OnItemChildClickListener() {
            @Override
            public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
                CarResponse.OrderDataBean.CartlistBean goodsBean = item.getCartlist().get(position);
                switch (view.getId()) {
                    case R.id.iv_checked_goods://选中商品
                        //如果已选中则取消选中,未选中则选中
                        goodsBean.setChecked(!goodsBean.isChecked());
                        //刷新适配器
                        goodsAdapter.notifyDataSetChanged();
                        break;
                    case R.id.tv_increase_goods_num://增加商品数量
                        break;
                    case R.id.tv_reduce_goods_num://减少商品数量
                        break;
                    default:
                        break;
                }
            }
        });

20210118160626306.png


然后你可以运行试一下看看


20210118160853881.gif


这样就实现了商品的选中和未选中效果了,当然这个效果还不是最终的,这里面还涉及到和店铺的交互,以及底部合计价格的变化。


下面来看看店铺的选中效果。要使item可点击,同样要添加点击事件

在StoreAdapter的convert中增加如下代码:


    ImageView checkedStore = helper.getView(R.id.iv_checked_store);
        if (item.isChecked()) {
            checkedStore.setImageDrawable(mContext.getDrawable(R.drawable.ic_checked));
        } else {
            checkedStore.setImageDrawable(mContext.getDrawable(R.drawable.ic_check));
        }
        //点击事件
        helper.addOnClickListener(R.id.iv_checked_store);//选中店铺

20210118161221888.png


而店铺的点击事件的判断要在MainActivity中。


在MainActivity中的initView方法中增加如下代码:

    //店铺点击
        storeAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
            @Override
            public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
                CarResponse.OrderDataBean storeBean = mList.get(position);
                if(view.getId() == R.id.iv_checked_store){
                    storeBean.setChecked(!storeBean.isChecked());
                    storeAdapter.notifyDataSetChanged();
                }
            }
        });

20210118161946194.png


运行一下吧。


20210118162213129.gif


可以看到,店铺和商品现在的选中和取消选中是没有问题的,当然这样还不够,因为还缺少一些业务,下面来一步一步的增加。


② 单选、多选、全选


 在写功能之前,首先来想一个问题,单选、多选、全选之间的关系。单选指的是单个店铺里单个商品选中,该店铺如果所有商品都选中,则店铺自动选中,而直接选中店铺则里面所有商品选中,这是单选也是多选,你选中店铺其实就是多选店铺中的商品。这么解释不知道你好不好理解,下面来说全选,全选就是所有商品或店铺选中,所有商品选中就是所有店铺选中,所有店铺选中就是所有商品选中,两者满足其一都是为全选,而全选也是可以主动和被动,主动就是用户点击这个全选按钮,然后选中所有商品或者店铺,被动就是通过对所有店铺的选中或者所有商品的选中来达成全选。同时全选之后再点击就是取消全选。这段文字看起来是比较的绕,但是我相信你可以理解,你要是从语言上不能理解,你可以实际操作一下,你随便打开一个电商APP,进入购物车试一下就知道了,试的过程中你再想一下这段文字,你会理解的更深。


下面进入编码环节,首先来做商品全部选中,触发店铺选中。


要做到这一点那么你就必须记录该店铺下的选中商品的数量,当选中商品数量等于店铺商品数量时,店铺选中。当数量不等时,店铺不选中。


这里可以写一个接口,在util下新建一个GoodsCallback接口,里面的代码如下:


package com.llw.cart.util;
/**
 * 商品回调接口
 * @author llw
 */
public interface GoodsCallback {
    /**
     * 选中店铺
     * @param shopId 店铺id
     * @param state 是否选中
     */
    void checkedStore(int shopId,boolean state);
}


代码比较简单,因为选中商品的操作是在StoreAdapter中,所以要在StoreAdapter中调用这个checkedStore,在MainActivity中通过实现这个GoodsCallback接口,重写回调方法checkedStore里面去选中店铺。


在StoreAdapter中,创建对象。


  //商品回调
    private GoodsCallback goodsCallback;


然后在StoreAdapter方法中赋值


2021011910535977.png


然后在StoreAdapter中新写一个方法,用于控制是否选中店铺。


  /**
     * 控制店铺是否选中
     */
    private void controlStore(CarResponse.OrderDataBean item) {
        int num = 0;
        for (CarResponse.OrderDataBean.CartlistBean bean : item.getCartlist()) {
            if (bean.isChecked()) {
                ++num;
            }
        }
        if (num == item.getCartlist().size()) {
            //全选中  传递需要选中的店铺的id过去
            goodsCallback.checkedStore(item.getShopId(),true);
        } else {
            goodsCallback.checkedStore(item.getShopId(),false);
        }
    }


这里先记录选中商品数量,遍历完成之后,判断选中数量是否等于店铺拥有商品数量,然后根据不同情况传递不同的状态值进去即可。


方法写了自然就要有地方去调用,调用地方如下图所示,在选中商品之后调用。


2021011910590336.png


那么现在该去MainActivity了,先实现这个GoodsCallback接口


20210119110010612.png


然后示例化StoreAdapter的时候传递进去这个回调。


20210119110050725.png


最后就是重写回调方法了。


  /**
     * 选中店铺
     * @param shopId 店铺id
     */
    @Override
    public void checkedStore(int shopId,boolean state) {
        for (CarResponse.OrderDataBean bean : mList) {
            //遍历
            if(shopId == bean.getShopId()){
                bean.setChecked(state);
                storeAdapter.notifyDataSetChanged();
            }
        }
    }


代码很简单,主要是你的思路是否正确,下面运行一下吧。


20210119104753807.gif


嗯,效果是想要的。


那么下面就该通过店铺来控制商品了,当选中店铺时,里面的商品全选,当取消选中店铺时,里面的商品全不选。这个想法你甚至都不需要通过接口了,直接通过MainActivity中调用StoreAdapter的方法即可。


那么可以先在StoreAdapter中写一个方法。不过这个方法还需要一些前置条件,在StoreAdapter中创建对象,并在构造方法中赋值。


  //店铺对象
    private List<CarResponse.OrderDataBean> storeBean;

20210119110853921.png


然后新增一个方法。

  /**
     * 控制商品是否选中
     */
    public void controlGoods(int shopId, boolean state) {
        //根据店铺id选中该店铺下所有商品
        for (CarResponse.OrderDataBean orderDataBean : storeBean) {
            //店铺id等于传递过来的店铺id  则选中该店铺下所有商品
            if (orderDataBean.getShopId() == shopId) {
                for (CarResponse.OrderDataBean.CartlistBean cartlistBean : orderDataBean.getCartlist()) {
                    cartlistBean.setChecked(state);
                    //刷新
                    notifyDataSetChanged();
                }
            }
        }
    }


之后就是在MainActivity中去调用这个controlGoods方法了。


20210119111045969.png


很简单,那么下面运行一下。


20210119111335114.gif


下面就是底部的全选了,而这个全选是在MainActivity的,因此也顺便把MainActivity中的其他控件都实例化一下,有的需要添加点击监听。


在MainActivity中声明一下变量


  private TextView tvEdit;//编辑
    private ImageView ivCheckedAll;//全选
    private TextView tvTotal;//合计价格
    private TextView tvSettlement;//结算
    private LinearLayout layEdit;//编辑底部布局
    private TextView tvShareGoods;//分享商品
    private TextView tvCollectGoods;//收藏商品
    private TextView tvDeleteGoods;//删除商品
    private boolean isEdit = false;//是否编辑


然后在initView()方法中绑定控件,并且添加一些控件的点击监听。

      tvEdit = findViewById(R.id.tv_edit);
        ivCheckedAll = findViewById(R.id.iv_checked_all);
        tvTotal = findViewById(R.id.tv_total);
        tvSettlement = findViewById(R.id.tv_settlement);
        layEdit = findViewById(R.id.lay_edit);
        tvShareGoods = findViewById(R.id.tv_share_goods);
        tvCollectGoods = findViewById(R.id.tv_collect_goods);
        tvDeleteGoods = findViewById(R.id.tv_delete_goods);
        tvEdit.setOnClickListener(this);
        ivCheckedAll.setOnClickListener(this);
        tvSettlement.setOnClickListener(this);
        tvShareGoods.setOnClickListener(this);
        tvCollectGoods.setOnClickListener(this);
        tvDeleteGoods.setOnClickListener(this);

20210119152310815.png


之后实现View.OnClickListener接口


20210119152354375.png


重写onClick方法,然后判断id触发不同的点击事件


  /**
     * 页面控件点击事件
     *
     * @param v
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_edit://编辑
                if(isEdit){
                    tvEdit.setText("编辑");
                    layEdit.setVisibility(View.GONE);
                    isEdit = false;
                }else {
                    tvEdit.setText("完成");
                    layEdit.setVisibility(View.VISIBLE);
                    isEdit = true;
                }
                break;
            case R.id.iv_checked_all://全选
                showMsg("点击了全选");
                break;
            case R.id.tv_settlement://结算
                showMsg("点击了结算");
                break;
            case R.id.tv_delete_goods://删除
                showMsg("点击了删除");
                break;
            case R.id.tv_collect_goods://收藏
                showMsg("点击了收藏");
                break;
            case R.id.tv_share_goods://分享
                showMsg("点击了分享");
                break;
            default:
                break;
        }
    } 


再写一个showMsg方法

  /**
     * Toast提示
     * @param msg
     */
    private void showMsg(String msg) {
        Toast.makeText(this,msg,Toast.LENGTH_SHORT).show();
    }


然后你可以先运行一下,把相应的控件点击一下,看是否会触发Toast提示,这个比较简单,我就不用图来说明了。


下面该来写这个全选的功能,其实全选就是选中所有店铺,在店铺选中时再选中所有商品,这个是有层次的。


先声明一个变量

  private boolean isAllChecked = false;//是否全选


所以可以写一个方法

   /**
     * 是否全选
     *
     * @param state 状态
     */
    private void isSelectAllStore(boolean state) {
        //修改背景
        ivCheckedAll.setImageDrawable(getDrawable(state ? R.drawable.ic_checked : R.drawable.ic_check));
        for (CarResponse.OrderDataBean orderDataBean : mList) {
            //商品是否选中
            storeAdapter.controlGoods(orderDataBean.getShopId(), state);
            //店铺是否选中
            checkedStore(orderDataBean.getShopId(), state);
        }
        isAllCheched = state;
    }


然后在点击全选的时候调用即可


20210119155233137.png


运行效果如下:


20210119155750323.gif


现在是通过主动点击页面的全选按钮进行全选和取消全选,这个还是比较简单的。下面就是被动去触发这个全选按钮了,被动触发有两种,第一种是一个一个的选中商品,最终所有店铺选中,达成全选。第二种是一个一个选中店铺,最终全选。这里面就一个关键点,那就是选中店铺的数量。这个数量的变化就决定了你是否需要触发全选。


下面来写代码吧。


先创建一个整型列表


  private List<Integer> shopIdList = new ArrayList<>();//店铺列表


然后在MainActivity中的checkedStore方法中,增加如下代码:

        //记录选中店铺的shopid,添加到一个列表中。
                if (!shopIdList.contains(bean.getShopId()) && state) {
                    //如果列表中没有这个店铺Id且当前店铺为选中状态
                    shopIdList.add(bean.getShopId());
                }else {
                    if(shopIdList.contains(bean.getShopId())){
                        //通过list.indexOf获取属性的在列表中的下标,不过强转Integer更简洁
                        shopIdList.remove((Integer) bean.getShopId());
                    }
                }
    if(shopIdList.size() == mList.size()){
            //全选
            ivCheckedAll.setImageDrawable(getDrawable(R.drawable.ic_checked));
            isAllChecked = true;
        }else {
            //不全选
            ivCheckedAll.setImageDrawable(getDrawable(R.drawable.ic_check));
            isAllChecked = false;
        }


这里有两段代码,添加的位置如下图所示:


20210119164551308.png


通过第一段代码对店铺id列表进行增减,通过第二段代码控制是否全选的样式和状态。现在通过单击商品就可以达到全选的目的了,通过与页面的全选按钮形成了交互。


下面可以运行一下了。


20210119165054337.gif


下面就是通过选中店铺来触发页面的全选了。那么自然是在店铺的点击事件中进行操作的。


20210119170024127.png


逻辑其实差不多,也是对商铺列表进行操作。


20210119170110854.png


然后你同样要与页面全选进行交互,所以你又看到了这一段代码,没错,它是重复,重复的代码可以通过新写一个方法来解决,避免多余。


20210119170245687.png


这里我选中上面重复的代码,然后使用快捷键,Ctrl + Alt + M,就可以快速的在MainActivity中构造一个方法出来。如下图所示,点击MainActivity。


20210119170318299.png


会弹出如下所示的窗体,然后输入方法名,点击Refactor按钮。


20210119170547829.png


然后它会去检索当前类中是否有你上面选中代码中相似度90%以上的代码,如果有则会出现如下情况。

20210119170743638.png



可以看到上图中的绿色选中区域的代码是我之前的第一段代码,就是这里有重复的,因此这个弹窗就是问你是否替换为一个方法,并且替换后调用这个方法。点击Replace。


20210119170934419.png

20210119170947726.png


可以看到两处代码都替换了,如果可以的话你最好注释一下这个方法的用途。


20210119171111836.png


比如上图这样,相信我,这会是一个好习惯。


好了现在,这个代码不是已经写完了吗,运行一下看是否可以通过选中所有的店铺来达成页面的全选。


20210119171455897.gif


你可以看到现在就已经解决了商品、店铺、页面的选中操作,不管你怎么点逻辑都是对的,单选、多选、全选就写完了,下面该操作这个价格了。


③ 价格控制


 可以看到底部页面的底部有一个合计金额。用于显示所选商品的价格,影响价格的因素从目前来看就只有所选商品的种类和数量了,当然实际开发中可能还有很多其他因素,比如活动折扣、代金券、优惠等一些其他因素,你只要搞定了里面的逻辑,其他的就是依葫芦画瓢,易如反掌、


首先是选中商品时,改变合计金额。那么我们要做的就是一旦有商品选中时,遍历选中的商品,然后计算价格就可以了,不知道你是否还记得GoodsCallback接口,没错,可以再增加一个方法。


  /**
     * 计算价格
     */
    void calculationPrice();


然后在StoreAdapter中的商品选中事件中可以调用


20210120105315735.png


然后回到MainActivity中,你会发现页面报错,因为你需要实现接口中的calculationPrice()方法才行,别着急。先定义两个成员变量。


  private double totalPrice = 0.00;//商品总价
    private int totalCount = 0;//商品总数量


然后重写calculationPrice方法,里面的代码如下:

  /**
     * 商品价格
     */
    @Override
    public void calculationPrice() {
        //每次计算之前先置零
        totalPrice = 0.00;
        totalCount = 0;
        //循环购物车中的店铺列表
        for (int i = 0; i < mList.size(); i++) {
            CarResponse.OrderDataBean orderDataBean = mList.get(i);
            //循环店铺中的商品列表
            for (int j = 0; j < orderDataBean.getCartlist().size(); j++) {
                CarResponse.OrderDataBean.CartlistBean cartlistBean = orderDataBean.getCartlist().get(j);
                //当有选中商品时计算数量和价格
                if (cartlistBean.isChecked()) {
                    totalCount++;
                    totalPrice += cartlistBean.getPrice() * cartlistBean.getCount();
                }
            }
        }
        tvTotal.setText("¥" + totalPrice);
        tvSettlement.setText(totalCount == 0 ? "结算" : "结算(" + totalCount + ")");
    }


那么很明显当我们选中商品时,价格就会计算出来,但是还不够。因为选中店铺时也要计算,页面全选也要计算,那么之前还记得我们做了页面单选、多选、全选的交互吗?


如果不记得你可以再看看这个controlAllChecked方法。而我要做的就是在这个方法里面调用calculationPrice()方法即可。


20210120110157780.png


那么下面可以运行一下了。


20210120110516291.gif


价格没有问题,数量也没有问题。那么这并没有结束,因为当我们修改某一个商品的数量时也会改变所选商品的价格。


下面进入到StoreAdapter中,新增一个方法updateGoodsNum,用于处理商品数量改变,无论是增加还是减少都是改变商品数量,因此这两者之间有很多共同点,当然你分开写也可以,我这里是一起写,方法如下:


  /**
     * 修改商品数量  增加或者减少
     * @param goodsBean
     * @param goodsAdapter
     * @param state  true增加 false减少
     */
    private void updateGoodsNum(CarResponse.OrderDataBean.CartlistBean goodsBean, GoodsAdapter goodsAdapter,boolean state) {
        //其实商品应该还有一个库存值或者其他的限定值,我这里写一个假的库存值为10
        int inventory = 10;
        int count = goodsBean.getCount();
        if(state){
            if (count >= inventory){
                Toast.makeText(mContext,"商品数量不可超过库存值~",Toast.LENGTH_SHORT).show();
                return;
            }
            count++;
        }else {
            if (count <= 1){
                Toast.makeText(mContext,"已是最低商品数量~",Toast.LENGTH_SHORT).show();
                return;
            }
            count--;
        }
        goodsBean.setCount(count);//设置商品数量
        //刷新适配器
        goodsAdapter.notifyDataSetChanged();
        //计算商品价格
        goodsCallback.calculationPrice();
    }


应该是一目了然,然后调用方法即可。


20210120142339849.png


然后运行一下


2021012014272217.gif


同时最大值和最小值的限制也是生效了。

其实从上面来看这个购物车就已经基本完成了,但是还差编辑里面的功能我们没有写。


④ 编辑商品


编辑商品里面最重要的一个功能自然就是删除商品了,那么就首先来写这个删除商品吧。我的想法出现一个弹窗,提示用户要删除商品,弹窗的代码有一些繁琐,因此可以使用lamda表达式简化一下,在app的build.gradle的android{}闭包中配置


  compileOptions {
        sourceCompatibility = 1.8
        targetCompatibility = 1.8
    }


然后Sync即可。


然后在MainActivity中创建变量


private AlertDialog dialog;//弹窗


然后在删除商品的点击事件中,增加如下代码:


        if (totalCount == 0) {
                    showMsg("请选择要删除的商品");
                    return;
                }
                //弹窗
                dialog = new AlertDialog.Builder(this)
                        .setMessage("确定要删除所选商品吗?")
                        .setPositiveButton("确定", (dialog, which) -> deleteGoods())
                        .setNegativeButton("取消", (dialog, which) -> dialog.dismiss())
                        .create();
                dialog.show();

20210120155144137.png


然后编写删除商品的方法deleteGoods(),代码如下:


  /**
     * 删除商品
     */
    private void deleteGoods() {
        //店铺列表
        List<CarResponse.OrderDataBean> storeList = new ArrayList<>();
        for (int i = 0; i < mList.size(); i++) {
            CarResponse.OrderDataBean store = mList.get(i);
            if (store.isChecked()) {
                //店铺如果选择则添加到此列表中
                storeList.add(store);
            }
            //商品列表
            List<CarResponse.OrderDataBean.CartlistBean> goodsList = new ArrayList<>();
            List<CarResponse.OrderDataBean.CartlistBean> goods = store.getCartlist();
            //循环店铺中的商品列表
            for (int j = 0; j < goods.size(); j++) {
                CarResponse.OrderDataBean.CartlistBean cartlistBean = goods.get(j);
                //当有选中商品时添加到此列表中
                if (cartlistBean.isChecked()) {
                    goodsList.add(cartlistBean);
                }
            }
            //删除商品
            goods.removeAll(goodsList);
        }
        //删除店铺
        mList.removeAll(storeList);
        shopIdList.clear();//删除了选中商品,清空已选择的标识
        controlAllChecked();//控制去全选
        //改变界面UI
        tvEdit.setText("编辑");
        layEdit.setVisibility(View.GONE);
        isEdit = false;
        //刷新数据
        storeAdapter.notifyDataSetChanged();
    }


在这个方法里面做的事情还挺多的,首先遍历选中商品或者店铺添加到临时的店铺和商品列表中,然后分别删除选中的商品。删除之后清除之前的选中标识,之后控制页面全选UI,因为删除之后,肯定不存在全选并且删除之后恢复之前的UI,最后刷新数据列表。这里面因为还需要判断全部删除的情况,因此你还需要改动一下controlAllChecked中的代码。


20210120155626276.png


这里我在全选的条件中增加了一个条件,如果你不增加这个,那么到时候你删除之后就会看到页面全选,因为shopIdList.size()和 mList.size()已经都变成了0。


好了,下面运行一下。


20210120160058296.gif


那么这个删除就写好了,下面来看看收藏和分享,这两个可以点击的处理一下就好了。


20210120160434545.png


就这么简单的处理一下即可,也不用很多的操作,当然实际开发中肯定不是这样的。


那么现在这个页面就还剩下一个结算没有做处理了。在结算的点击事件中


        if (totalCount == 0) {
                    showMsg("请选择要结算的商品");
                    return;
                }
                //弹窗
                dialog = new AlertDialog.Builder(this)
                        .setMessage("总计:" + totalCount + "种商品," + totalPrice + "元")
                        .setPositiveButton("确定", (dialog, which) -> deleteGoods())
                        .setNegativeButton("取消", (dialog, which) -> dialog.dismiss())
                        .create();
                dialog.show();


这里可以看到实际上我还是删除,因为结算之后那么商品就不会再购物车了,所以删除是可以的,那么这个结算也就是这样了,你明白个意思就行了。因为文章的主题是购物车,主要就是购物车内部的交互逻辑,其他的就不那么重要了。


⑤ 细节优化


 其实刚才上面的代码功能上还是有瑕疵的,那就是当我的购物车没有商品时,编辑、全选、结算都是可以点击的,这其实不符合正常逻辑,因为上面三项都是操作商品,如果没有商品那么自然不能操作,也就不能点击,因此还需要再多写一步,作为判断。


在MainActivity中增加一个变量


  private boolean isHaveGoods = false;//购物车是否有商品


然后在initView中执行完其他代码之后,设置为true,此时购物车是有数据的。


20210120161901883.png


然后在删除商品之后,如果列表为0,则设置为false。


20210120162233677.png


然后在点击编辑、全选、结算时,先判断一次


20210120162341578.png

20210120162419434.png


运行一下:


20210120162818543.gif


然后删除了之后这个背景太空了,感觉不是很好,而且删除所有商品之后,再想操作商品需要重新运行程序才行,这样测试起来很麻烦,为了解决这两个问题,首先看一下这个布局。


20210120163459318.png


从上图中可以知道,我们要改的就是这个列表的范围区域。


在app的build.gradle的dependencies{}闭包下增加如下依赖

  //下拉刷新框架
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-14'
    //没有使用特殊Header,可以不加这行
    implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-alpha-14'


然后Sync Now

之后在layout下新建一个ic_shopping_cart.xml文件


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:tint="#616161"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M7,18c-1.1,0 -1.99,0.9 -1.99,2S5.9,22 7,22s2,-0.9 2,-2 -0.9,-2 -2,-2zM1,3c0,0.55 0.45,1 1,1h1l3.6,7.59 -1.35,2.44C4.52,15.37 5.48,17 7,17h11c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1L7,15l1.1,-2h7.45c0.75,0 1.41,-0.41 1.75,-1.03l3.58,-6.49c0.37,-0.66 -0.11,-1.48 -0.87,-1.48L5.21,4l-0.67,-1.43c-0.16,-0.35 -0.52,-0.57 -0.9,-0.57L2,2c-0.55,0 -1,0.45 -1,1zM17,18c-1.1,0 -1.99,0.9 -1.99,2s0.89,2 1.99,2 2,-0.9 2,-2 -0.9,-2 -2,-2z" />
</vector>


这是一个购物车图标。


然后回到activity_main.xml中替换掉RecyclerView,替换的布局如下:


  <!--下拉刷新区域-->
    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/lay_bottom"
        android:layout_below="@+id/toolbar"
        app:srlAccentColor="#000"
        app:srlPrimaryColor="#00000000">
        <!--刷新头部样式-->
        <com.scwang.smartrefresh.header.StoreHouseHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:shhText="SHOPPING CART" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--列表-->
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rv_store"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="12dp" />
            <!--购物车为空时显示-->
            <LinearLayout
                android:id="@+id/lay_empty"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical"
                android:visibility="gone">
                <ImageView
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:src="@drawable/ic_shopping_cart" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="空空如也~" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="下拉可以增加数据喔~" />
            </LinearLayout>
        </RelativeLayout>
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>


然后回到MainActivity中。


private SmartRefreshLayout refresh;//刷新布局
    private LinearLayout layEmpty;//空布局
• 1
• 2


在initView中。

2021012017210583.png


先绑定id,然后禁用上拉和下拉动作,之后设置下拉刷新所触发的方法。因为是在initView中添加数据到列表中的,因此我直接调用initView。


20210120172311470.png


然后在数据展示之后关闭刷新并且隐藏空布局。有隐藏就自然有显示,在什么地方显示呢?当然是删除数据之后,当购物车为空时显示。


20210120172529990.png


之前在initView中禁用了下拉动作,那么在没有商品的时候就启用这个下拉,并且显示了这个空布局,然后你就可以通过下拉来重新添加数据了。

下面来运行一下吧。


20210120172914258.gif


OK,这样就可以了。那么到此为止我们的购物车就写完了,真是不容易啊。


六、源码


源码地址:ShoppingCart


总结


 写这个购物车还是挺麻烦的,尤其是编写代码编写文章,还要讲解这个思路,这一点确实很耗时间,其实思路才是最重要的,代码并不难。当然我并没有直接标题+效果图+源码。这样来做,因为很多时候你如果不讲过程,其他人是无法知道你的经过是怎么来的。这就是初学者的苦恼,有源码但是不理解源码,因此我才这样大费周章的写这一篇文章。


相关文章
|
10天前
|
XML Java Android开发
Android实现自定义进度条(源码+解析)
Android实现自定义进度条(源码+解析)
|
10天前
|
Java Android开发
Android反编译查看源码
Android反编译查看源码
|
3月前
|
算法 Java 定位技术
分享104个益智休闲安卓游戏源码,总有一款适合你
分享104个益智休闲安卓游戏源码,总有一款适合你
139 1
|
1月前
|
定位技术 API 数据库
基于Android的在线移动电子导航系统的研究与实现(论文+源码)_kaic
基于Android的在线移动电子导航系统的研究与实现(论文+源码)_kaic
|
1月前
|
搜索推荐 测试技术 定位技术
基于Android的自助导游系统的设计与实现(论文+源码)_kaic
基于Android的自助导游系统的设计与实现(论文+源码)_kaic
|
1月前
|
Java 关系型数据库 应用服务中间件
基于Android的人事管理系统设计与实现(论文+源码)_kaic
基于Android的人事管理系统设计与实现(论文+源码)_kaic
|
1月前
|
设计模式 测试技术 数据库
基于Android的食堂点餐APP的设计与实现(论文+源码)_kaic
基于Android的食堂点餐APP的设计与实现(论文+源码)_kaic
|
2月前
|
小程序 JavaScript Java
android电子班牌人脸识别系统源码
智慧校园云平台全套源码包含:电子班牌管理系统、成绩管理系统、考勤人脸刷卡管理系统、综合素养评价系统、请假管理系统、电子班牌发布系统、校务管理系统、小程序移动端、教师后台管理系统、SaaS运营云平台。
34 1
|
2月前
|
小程序 Java 数据挖掘
Java校园智慧管理云平台源码 小程序+android电子班牌系统
智慧校园技术架构 ❀后端:Java ❀框架:springboot ❀前端页面:vue +element-ui ❀小程序:小程序原生开发 ❀电子班牌:Java Android
32 0
|
3月前
|
开发框架 物联网 数据库
89个android学习样例源码
89个android学习样例源码
75 0