购物车
前语
购物车作为电商APP来说,是必备的。而且许多公司面试初级Android会问你购物车的完结思路和步骤,第一是想看你是否思路清晰,第二是否有过实践。里边的逻辑我信任用过淘宝、天猫、京东等电商APP的都比较清楚,可是写这个功用并不容易,很容易把逻辑写错,或许写着写着人就懵逼了,这是由于现已深陷其间,当然了,我也是一个菜鸟,在这儿也是共享一下自己写这个购物车的一些思路和主意,大神大佬就一笑而过吧。
正文
购物车说难其实不难,首要是与用户的交互比较多,交互是三方一同完结的,用户、页面、后台。后台供给数据给页面显现出来,页面供给操作逻辑供用户操作,用户通过操作提交终究结果给后台。就像是一个圈。购物车也有简略的做法。首要便是只有产品没有店肆,这样在逻辑的复杂程度就低一些,其次便是用户操作一次页面,就向后台提交一次数据,
当然这种办法比较Low,也对网络的要求很高。可是对页面来说就很简略,由于页面只负责显现数据,不复杂逻辑处理,它要做的便是恳求后台,拿到数据,改写当时页面即可,可是这样后台的接口就多了,这不是一个合理的做法,可是它有用,假如你真实搞不定购物车的逻辑的页面交互能够这么做,条件是别让你的项目经理发现。
一、预备数据源
要知道既然是购物车,首要要有产品才行吧,而产品其实便是数据,惯例开发进程中,这些数据是由后台供给的,而这儿既然是写Demo,那天然就不必那么费事了,自己写假数据就能够了。
首要要在AS中创立一个项目,命名为ShoppingCart。
创立好之后,要预备一些数据,用来显现购物车里边的数据。当然了,我这儿都是一些假数据,不过实践开发中的数据也和这个大体相似,你要说完全一模一样,那就不或许。
在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://www.6hu.cc/storage/2023/06/1685584353-34c907d882ff186.jpg","productId":1,"productName":"三只松鼠_零食大礼包","color":"黑色","size":"18L","price":20,"count":1},{"id":2,"shopId":1,"shopName":"京东自营","defaultPic":"https://www.6hu.cc/storage/2023/06/1685584363-1b724acff258e66.jpg","productId":2,"productName":"小米心跳手环","color":"白色","size":"20XXL","price":148,"count":1}]},{"shopId":2,"shopName":"海澜之家","cartlist":[{"id":1,"shopId":2,"shopName":"海澜之家","defaultPic":"https://www.6hu.cc/storage/2023/06/1685584369-4f1807a63a58b21.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://www.6hu.cc/storage/2023/06/1685584374-d8e3ad7eebf49f4.jpg","productId":1,"productName":"OPPO R11 全网通","color":"蓝色","size":"30X","price":1999,"count":1},{"id":2,"shopId":3,"shopName":"OPPO官方旗舰店","defaultPic":"https://www.6hu.cc/storage/2023/06/1685584385-727a0eaec5edecf.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://www.6hu.cc/storage/2023/06/1685584353-34c907d882ff186.jpg","productId":1,"productName":"三只松鼠_零食大礼包","color":"黑色","size":"18L","price":20,"count":1},{"id":2,"shopId":1,"shopName":"京东自营","defaultPic":"https://www.6hu.cc/storage/2023/06/1685584363-1b724acff258e66.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://www.6hu.cc/storage/2023/06/1685584353-34c907d882ff186.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://www.6hu.cc/storage/2023/06/1685584353-34c907d882ff186.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://www.6hu.cc/storage/2023/06/1685584363-1b724acff258e66.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://www.6hu.cc/storage/2023/06/1685584369-4f1807a63a58b21.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://www.6hu.cc/storage/2023/06/1685584374-d8e3ad7eebf49f4.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://www.6hu.cc/storage/2023/06/1685584385-727a0eaec5edecf.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,然后通过适配器将数据烘托出来形成一个列表展现。当然首要要规划布局。
二、制作界面布局
一切布局制作完结后的作用图如下所示
那么先从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>
ic_checked.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:fillColor="#eb4f38"
android:pathData="M12,1.546c-5.764,0 -10.454,4.69 -10.454,10.454 0,5.765 4.689,10.454 10.454,10.454S22.454,17.765 22.454,12C22.454,6.236 17.765,1.546 12,1.546zM17.044,10.276 L11.039,16.346c-0.001,0.001 -0.005,0.002 -0.006,0.005 -0.002,0.001 -0.002,0.005 -0.005,0.006 -0.048,0.046 -0.107,0.075 -0.163,0.107 -0.028,0.016 -0.05,0.04 -0.08,0.051 -0.09,0.036 -0.185,0.055 -0.28,0.055 -0.096,0 -0.193,-0.019 -0.284,-0.056 -0.03,-0.013 -0.054,-0.038 -0.082,-0.054 -0.056,-0.031 -0.113,-0.059 -0.161,-0.107 -0.001,-0.001 -0.002,-0.005 -0.004,-0.006 -0.001,-0.002 -0.005,-0.002 -0.006,-0.005l-2.954,-3.035c-0.289,-0.297 -0.282,-0.772 0.015,-1.061 0.297,-0.288 0.771,-0.283 1.061,0.015l2.42,2.487 5.467,-5.527c0.291,-0.295 0.767,-0.298 1.061,-0.006C17.333,9.506 17.335,9.981 17.044,10.276z" />
</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中增加网络拜访权限的装备
然后修正一下styles.xml中的款式
然后便是装备项目的依靠库了,首要在工程的build.gradle下装备
maven { url "https://jitpack.io" }
然后在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'
装备好之后点击右上角的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办法即可。
然后能够运转了,作用如下:
现在这个列表就展现出来了,简略的模拟了一下购物车,产品不多,点到为止。
五、功用完结
从上面的代码步骤中现已做好了预备工作,下面就要来完结购物车的详细功用了,光看着像是不行的,银样蜡枪头,中看不中用。
① 产品、店肆选中
设置店肆和产品的选中,需求修正一下CarResponse类。
在这个类中的OrderDataBean类下新增加一个变量,用于判别店肆是否选中,一同增加get和set办法。
一同也要在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);//削减产品
便是通过之前的那个变量去判别是否为选中,以此改动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;
}
}
});
然后你能够运转试一下看看
这样就完结了产品的选中和未选中作用了,当然这个作用还不是终究的,这儿边还涉及到和店肆的交互,以及底部算计价格的改动。
下面来看看店肆的选中作用。要使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);//选中店肆
而店肆的点击事情的判别要在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();
}
}
});
运转一下吧。
能够看到,店肆和产品现在的选中和撤销选中是没有问题的,当然这样还不行,由于还短少一些业务,下面来一步一步的增加。
② 单选、多选、全选
在写功用之前,首要来想一个问题,单选、多选、全选之间的关系。单选指的是单个店肆里单个产品选中,该店肆假如一切产品都选中,则店肆自动选中,而直接选中店肆则里边一切产品选中,这是单选也是多选,你选中店肆其实便是多选店肆中的产品。这么解说不知道你好不好了解,下面来说全选,全选便是一切产品或店肆选中,一切产品选中便是一切店肆选中,一切店肆选中便是一切产品选中,两者满足其一都是为全选,而全选也是能够自动和被迫,自动便是用户点击这个全选按钮,然后选中一切产品或许店肆,被迫便是通过对一切店肆的选中或许一切产品的选中来到达全选。一同全选之后再点击便是撤销全选。这段文字看起来是比较的绕,可是我信任你能够了解,你要是从语言上不能了解,你能够实践操作一下,你随便翻开一个电商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办法中赋值
然后在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);
}
}
这儿先记载选中产品数量,遍历完结之后,判别选中数量是否等于店肆具有产品数量,然后根据不同情况传递不同的状况值进去即可。
办法写了天然就要有当地去调用,调用当地如下图所示,在选中产品之后调用。
那么现在该去MainActivity了,先完结这个GoodsCallback接口
然后示例化StoreAdapter的时分传递进去这个回调。
终究便是重写回调办法了。
/**
* 选中店肆
* @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();
}
}
}
代码很简略,首要是你的思路是否正确,下面运转一下吧。
嗯,作用是想要的。
那么下面就该通过店肆来操控产品了,当选中店肆时,里边的产品全选,当撤销选中店肆时,里边的产品全不选。这个主意你甚至都不需求通过接口了,直接通过MainActivity中调用StoreAdapter的办法即可。
那么能够先在StoreAdapter中写一个办法。不过这个办法还需求一些前置条件,在StoreAdapter中创立目标,并在构造办法中赋值。
//店肆目标
private List<CarResponse.OrderDataBean> storeBean;
然后新增一个办法。
/**
* 操控产品是否选中
*/
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办法了。
很简略,那么下面运转一下。
下面便是底部的全选了,而这个全选是在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);
之后完结View.OnClickListener接口
重写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;
}
然后在点击全选的时分调用即可
运转作用如下:
现在是通过自动点击页面的全选按钮进行全选和撤销全选,这个仍是比较简略的。下面便是被迫去触发这个全选按钮了,被迫触发有两种,第一种是一个一个的选中产品,终究一切店肆选中,到达全选。第二种是一个一个选中店肆,终究全选。这儿边就一个关键点,那便是选中店肆的数量。这个数量的改动就决议了你是否需求触发全选。
下面来写代码吧。
先创立一个整型列表
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;
}
这儿有两段代码,增加的位置如下图所示:
通过第一段代码对店肆id列表进行增减,通过第二段代码操控是否全选的款式和状况。现在通过单击产品就能够到达全选的目的了,通过与页面的全选按钮形成了交互。
下面能够运转一下了。
下面便是通过选中店肆来触发页面的全选了。那么天然是在店肆的点击事情中进行操作的。
逻辑其实差不多,也是对商铺列表进行操作。
然后你相同要与页面全选进行交互,所以你又看到了这一段代码,没错,它是重复,重复的代码能够通过新写一个办法来处理,防止剩余。
这儿我选中上面重复的代码,然后使用快捷键,Ctrl + Alt + M,就能够快速的在MainActivity中构造一个办法出来。如下图所示,点击MainActivity。
会弹出如下所示的窗体,然后输入办法名,点击Refactor按钮。
然后它会去检索当时类中是否有你上面选中代码中相似度90%以上的代码,假如有则会呈现如下情况。
能够看到上图中的绿色选中区域的代码是我之前的第一段代码,便是这儿有重复的,因而这个弹窗便是问你是否替换为一个办法,而且替换后调用这个办法。点击Replace。
能够看到两处代码都替换了,假如能够的话你最好注释一下这个办法的用途。
比方上图这样,信任我,这会是一个好习惯。
好了现在,这个代码不是现已写完了吗,运转一下看是否能够通过选中一切的店肆来到达页面的全选。
你能够看到现在就现已处理了产品、店肆、页面的选中操作,不管你怎样点逻辑都是对的,单选、多选、全选就写完了,下面该操作这个价格了。
③ 价格操控
能够看到底部页面的底部有一个算计金额。用于显现所选产品的价格,影响价格的要素从现在来看就只有所选产品的种类和数量了,当然实践开发中或许还有许多其他要素,比方活动扣头、代金券、优惠等一些其他要素,你只需搞定了里边的逻辑,其他的便是依葫芦画瓢,易如反掌、
首要是选中产品时,改动算计金额。那么咱们要做的便是一旦有产品选中时,遍历选中的产品,然后核算价格就能够了,不知道你是否还记得GoodsCallback接口,没错,能够再增加一个办法。
/**
* 核算价格
*/
void calculationPrice();
然后在StoreAdapter中的产品选中事情中能够调用
然后回到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()办法即可。
那么下面能够运转一下了。
价格没有问题,数量也没有问题。那么这并没有结束,由于当咱们修正某一个产品的数量时也会改动所选产品的价格。
下面进入到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();
}
应该是一望而知,然后调用办法即可。
然后运转一下
一同最大值和最小值的约束也是收效了。 其实从上面来看这个购物车就现已基本完结了,可是还差修正里边的功用咱们没有写。
④ 修正产品
修正产品里边最重要的一个功用天然便是删去产品了,那么就首要来写这个删去产品吧。我的主意呈现一个弹窗,提示用户要删去产品,弹窗的代码有一些繁琐,因而能够使用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();
然后编写删去产品的办法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中的代码。
这儿我在全选的条件中增加了一个条件,假如你不增加这个,那么到时分你删去之后就会看到页面全选,由于shopIdList.size()和 mList.size()现已都变成了0。
好了,下面运转一下。
那么这个删去就写好了,下面来看看保藏和共享,这两个能够点击的处理一下就好了。 就这么简略的处理一下即可,也不必许多的操作,当然实践开发中必定不是这样的。
那么现在这个页面就还剩下一个结算没有做处理了。在结算的点击事情中
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,此时购物车是有数据的。 然后在删去产品之后,假如列表为0,则设置为false。 然后在点击修正、全选、结算时,先判别一次 运转一下:
然后删去了之后这个布景太空了,感觉不是很好,而且删去一切产品之后,再想操作产品需求从头运转程序才行,这样测试起来很费事,为了处理这两个问题,首要看一下这个布局。
从上图中能够知道,咱们要改的便是这个列表的范围区域。 在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;//空布局
在initView中。
先绑定id,然后禁用上拉和下拉动作,之后设置下拉改写所触发的办法。由于是在initView中增加数据到列表中的,因而我直接调用initView。
然后在数据展现之后封闭改写而且躲藏空布局。有躲藏就天然有显现,在什么当地显现呢?当然是删去数据之后,当购物车为空时显现。
之前在initView中禁用了下拉动作,那么在没有产品的时分就启用这个下拉,而且显现了这个空布局,然后你就能够通过下拉来从头增加数据了。 下面来运转一下吧。
OK,这样就能够了。那么到此为止咱们的购物车就写完了,真是不容易啊。
六、源码
源码地址:ShoppingCart
总结
写这个购物车仍是挺费事的,尤其是编写代码编写文章,还要解说这个思路,这一点的确很耗时间,其实思路才是最重要的,代码并不难。当然我并没有直接标题+作用图+源码。这样来做,由于许多时分你假如不讲进程,其他人是无法知道你的通过是怎样来的。这便是初学者的苦恼,有源码可是不了解源码,因而我才这样大费周章的写这一篇文章。