购物车页面的实现

最新推荐文章于 2024-06-22 00:30:17 发布
最新推荐文章于 2024-06-22 00:30:17 发布
阅读量2.9k 收藏 1
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kakayang2012/article/details/51774021
版权

购物车页面要实现的功能：用RecyclerView实现shoppingCart的显示；选择商品后购物车下方的价格总和会改变；实现编辑页面和完成页面的切换。

①布局页面实现

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <cniao5.com.cniao5shop.widget.CNiaoToolBar
        android:id="@id/toolbar"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:title="购物车"
        app:rightButtonText="编辑"
        android:layout_alignParentTop="true"
        />
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        android:layout_marginBottom="50dp">
    </android.support.v7.widget.RecyclerView>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:background="#802f4f4f"
        android:gravity="center_vertical"
        >

        <CheckBox
            android:id="@+id/checkbox_all"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:checked="true"
            android:text="全选"
            style="@style/customCheckbox"/>
        
        <TextView
            android:id="@+id/txt_total"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/checkbox_all"
           android:layout_marginLeft="40dp"
            android:layout_centerVertical="true"
            android:textSize="30dp"
            android:text="合计"/>

        <Button
            android:id="@+id/btn_order"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:minHeight="60dp"
            android:minWidth="120dp"
            android:text="去结算"
            style="@style/bigRedButton"/>
        
        <Button
            android:id="@+id/btn_del"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:visibility="gone"
            android:minHeight="60dp"
            android:minWidth="120dp"
            android:text="删除"
            style="@style/bigRedButton"/>
    </RelativeLayout>

</RelativeLayout>

 

②实现编辑页面和完成页面的切换

public void changeToolbar(){
    mToolbar.hideSearchView();
    mToolbar.showTitleView();
    mToolbar.setTitle(R.string.cart);
    mToolbar.getRightButton().setVisibility(View.VISIBLE);
    mToolbar.setRightButtonText("编辑");
    mToolbar.getRightButton().setOnClickListener(this);
    mToolbar.getRightButton().setTag(ACTION_EDIT);
}
private void showDelControl(){
    mToolbar.getRightButton().setText("完成");
    mTextTotal.setVisibility(View.GONE);
    mBtnOrder.setVisibility(View.GONE);
    mBtnDel.setVisibility(View.VISIBLE);
    mToolbar.getRightButton().setTag(ACTION_CAMPLATE);
    mAdapter.checkAll_None(false);
    mCheckBox.setChecked(false);
}
private void  hideDelControl(){
    mTextTotal.setVisibility(View.VISIBLE);
    mBtnOrder.setVisibility(View.VISIBLE);
    mBtnDel.setVisibility(View.GONE);
    mToolbar.setRightButtonText("编辑");
    mToolbar.getRightButton().setTag(ACTION_EDIT);
    mAdapter.checkAll_None(true);
    mAdapter.showTotalPrice();
    mCheckBox.setChecked(true);
}
@Override
public void onClick(View v) {
    int action = (int) v.getTag();
    if(ACTION_EDIT == action){
        showDelControl();
    }else if(ACTION_CAMPLATE == action){
        hideDelControl();
    }
}

 

③实例化CartProvider，显示购物车数据

cartProvider = new CartProvider(getActivity());

 

④得到数据源

List<ShoppingCart> carts = cartProvider.getAll();

 

⑤实现Adapter

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selector_list_item"
    android:padding="5dp"
    android:gravity="center_vertical"
    >

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:focusable="false"
        android:clickable="false"
        style="@style/customCheckbox"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp">
        
        <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/drawee_view"
            android:layout_width="180dp"
            android:layout_height="180dp"
            />

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

            <TextView
                android:id="@+id/text_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:textColor="@color/gray"
                android:textSize="16sp"
                android:maxLines="3"
                />

            <TextView
                android:id="@+id/text_price"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:textColor="@color/crimson"
                android:layout_gravity="right"
                />

           <cniao5.com.cniao5shop.widget.NumberAddSubView
               android:id="@+id/num_control"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="10dp"
               app:minValue="1"
               />

        </LinearLayout>
    </LinearLayout>
</LinearLayout>

 

CartAdapter：

public class CartAdapter extends SimpleAdapter<ShoppingCart> implements BaseAdapter.OnItemClickListener {


    public static final String TAG="CartAdapter";

    private CheckBox checkBox;
    private TextView textView;
    private CartProvider cartProvider;

    public CartAdapter(Context context, List<ShoppingCart> datas, final CheckBox checkBox,TextView tv) {
        super(context, R.layout.template_cart, datas);
        setCheckBox(checkBox);
        setTextView(tv);
        cartProvider = new CartProvider(context);
        setOnItemClickListener(this);
        showTotalPrice();
    }

    @Override
    protected void convert(BaseViewHolder viewHoder, final ShoppingCart item) {
        viewHoder.getTextView(R.id.text_title).setText(item.getName());
        viewHoder.getTextView(R.id.text_price).setText("￥"+item.getPrice());
        SimpleDraweeView draweeView = (SimpleDraweeView) viewHoder.getView(R.id.drawee_view);
        draweeView.setImageURI(Uri.parse(item.getImgUrl()));

        CheckBox checkBox = (CheckBox) viewHoder.getView(R.id.checkbox);
        checkBox.setChecked(item.isChecked());

        NumberAddSubView numberAddSubView = (NumberAddSubView) viewHoder.getView(R.id.num_control);
        numberAddSubView.setValue(item.getCount());
        numberAddSubView.setOnButtonClickListener(new NumberAddSubView.OnButtonClickListener() {
            @Override
            public void onButtonAddClick(View view, int value) {
                item.setCount(value);
                cartProvider.update(item);
                showTotalPrice();
            }
            @Override
            public void onButtonSubClick(View view, int value) {
                item.setCount(value);
                cartProvider.update(item);
                showTotalPrice();
            }
        });
    }
    private  float getTotalPrice(){
        float sum=0;
        if(!isNull())
            return sum;
        for (ShoppingCart cart: datas) {
            if(cart.isChecked())
                sum += cart.getCount()*cart.getPrice();
        }
        return sum;
    }

    public void showTotalPrice(){
        float total = getTotalPrice();
        textView.setText(Html.fromHtml("合计 ￥<span style='color:#eb4f38'>" + total + "</span>"), TextView.BufferType.SPANNABLE);
    }

    private boolean isNull(){
        return (datas !=null && datas.size()>0);
    }
    @Override
    public void onItemClick(View view, int position) {
        ShoppingCart cart =  getItem(position);
        cart.setIsChecked(!cart.isChecked());
        notifyItemChanged(position);
        checkListen();
        showTotalPrice();
    }

    private void checkListen() {
        int count = 0;
        int checkNum = 0;
        if (datas != null) {
            count = datas.size();
            for (ShoppingCart cart : datas) {
                if (!cart.isChecked()) {
                    checkBox.setChecked(false);
                    break;
                } else {
                    checkNum = checkNum + 1;
                }
            }
            if (count == checkNum) {
                checkBox.setChecked(true);
            }
        }
    }

    public void checkAll_None(boolean isChecked){
        if(!isNull())
            return ;
        int i=0;
        for (ShoppingCart cart :datas){
            cart.setIsChecked(isChecked);
            notifyItemChanged(i);
            i++;
        }
    }

    public void delCart(){
        if(!isNull())
            return ;
        for(Iterator iterator = datas.iterator();iterator.hasNext();){
            ShoppingCart cart = (ShoppingCart) iterator.next();
            if(cart.isChecked()){
                int position = datas.indexOf(cart);
                cartProvider.delete(cart);
                iterator.remove();
                notifyItemRemoved(position);
            }
        }
    }
    public void setTextView(TextView textview){
        this.textView = textview;
    }
    public void setCheckBox(CheckBox ck){
        this.checkBox = ck;
        checkBox.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                checkAll_None(checkBox.isChecked());
                showTotalPrice();
            }
        });
    }
}

 

⑥将数据显示在RecyclerView中

private void showData(){
    List<ShoppingCart> carts = cartProvider.getAll();
    mAdapter = new CartAdapter(getActivity(),carts,mCheckBox,mTextTotal);
    mRecyclerView.setAdapter(mAdapter);
    mRecyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
    mRecyclerView.addItemDecoration(new DividerItemDecoration(getActivity(),DividerItemDecoration.VERTICAL_LIST));
}

 

kakayang2012
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
淘宝购物车界面HTML
05-30
包含淘宝购物车加减货物，清除货物，清空购物车等操作，利用js技术进行界面设计。学习HTML的典型案例，需要的朋友可以下载，里面有网页、图片等都在里面了。
Android商城购物车页面实现
09-28
此项目实现了商城购物车部分功能，包含侧滑删除，侧滑删除类库所用EasySwipeMenuLayout，项目博客地址链接：https://blog.csdn.net/loocanp/article/details/82883640
购物车页面实现
qq_42264597的博客
02-27 223
购物车页面实现 <template> <el-container> <el-header style="margin-bottom: 10px"> <div> <el-card class="cart-header" shadow="nover">我的购物袋</el-card> </div> </el-header> <el-main&g
313.带购物车功能的服装商城网页 大学生期末大作业 Web前端网页制作 html5+css+js
最新发布
A240307的博客
06-22 1286
本实例应用html+css+js： 三级页面、图片轮翻效果、可删减计价的购物车、注册页面、登录页面等。适用于大学生网页课程作业设计、公司网页制作等。 本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
[JavaScript实训] -- 制作简易的购物车页面
一只大数据专业的傻猪猪
04-05 1万+
JavaScript实现制作简易的购物车页面
HTML淘宝购物车页面的实现
热门推荐
qq_46007633的博客
03-22 1万+
仿照淘宝购物车。主要包括以下知识，超级简单，没使用CSS，很多功能没有实现，只是一个仿造的购物车页面。 使用div标签，将整个页面划分为上中下相应的几个模块。 使用高级标签，包含<caption>标题和<thead>表头<tbody>主体以及<tfoot>表尾，对表格进行横向分组，将淘宝购物车分成相应的几部分。 列出几个小标题，比如单价、数量、金额、操作等。 根据确定的列，使用相应的图像标签、超链接、表单域等
（十三）购物车详情页显示
感恩、奋进、自信
05-05 1770
当我们在goods页面中，将商品添加到购物车的时候，购物车logo上方会显示添加的商品数，如下图所示当购物车的商品数大于0的时候，点击底部的&lt;shop-cart&gt;部位，会触发显示添加到购物车的商品详情，如下图所示当点击“清空”按钮的时候，购物车中的商品会删除掉，当点击“-”或者“+”按钮的时候，购物车的右上角的数字会减少或者增加，当点击“去结算”按钮的时候，会跳转到结算的界面。下面讲讲...
一个简单的当当网购物车页面，可以实现简单购物
05-29
【标题】：“一个简单的当当网购物车页面”是指一种基于网页技术实现的模拟当当网购物车功能的示例项目。这个项目旨在帮助初学者理解购物车逻辑以及相关前端和后端技术的运用。 【描述】：这个简单购物车页面能够...
ExpandableListView实现购物车页面
07-05
在Android应用开发中，"ExpandableListView实现购物车页面"是一个常见的需求，它涉及到用户界面设计、数据管理和交互。ExpandableListView是Android SDK提供的一种可扩展的列表视图，允许用户展示分组数据，每组内...
购物车全选实现
11-02
购物车全选实现是指在购物车页面上提供一个选项，用户只需点击一次，就能选中购物车中的所有商品。这个功能极大地简化了用户操作，尤其在用户需要对所有商品进行相同操作（如批量删除、批量修改属性或一次性结算）时...
购物车静态页面设计
01-16
在这个过程中，设计出既美观又实用的购物车页面对于提升用户体验至关重要。以下我们将详细探讨购物车静态页面设计的相关知识点。 首先，我们需要了解静态页面的基本构成。静态页面是HTML、CSS和JavaScript等基础...
ssh实现的购物车和分页功能
11-22
ssh实现的购物车和分页功能
购物车前台页面
01-11
这是一个购物车前端的jsp界面，做购物的web项目的同学可以用来提升自己的前台页面，这个可以展示图片，增加商品金额
商品详情页与购物车实现
06-01
Android实现商品详情页面和购物车页面及逻辑判断，相信能帮到你！
购物车代码
04-25
index.html jQuery HTML5添加到购物车代码
关于一个简单的购物车界面编程
keter_42的博客
05-20 353
这里写自定义目录标题 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; usi...
vue --- > 购物车页面
栗子好好吃的博客
04-12 525
下面我看开始自己写一个购物车的页面. 我们希望得到如下的效果: 说明: 购买数量最小为0 购买数量变化时,对应的总价随之变化 点击移除操作对应的商品会移除掉,总价随之改变 每个商品作为一个list表的一个对象 每个对象,包含id、name、price、count等属性 index.html (整体代码最后给出) 导入依赖(从上往下) // 样式表 <link rel="styles...
购物车界面
qq_42806361的博客
12-20 347
Adapter public class ShopAdapter extends BaseExpandableListAdapter { private List&lt;Shop.DataBean&gt; shopData; private double price; private int num; public ShopAdapter(List&lt;Shop...
实战第二站--购物车简单实现
chenjingchao1108的博客
12-19 287
Adapter public class MyExpandableAdapter extends BaseExpandableListAdapter { private List groupdata; private Context context; private List> childlist; public MyExpandableAda
用组合式vue3组件写购物车页面实现商品数量增加和减少，以及商品删除计算总价
04-16
关于用组合式vue3组件写购物车页面实现商品数量增加和减少，以及商品删除计算总价，我们可以使用ref和reactive两种方式实现。 首先，我们可以使用ref来创建一个商品数量变量，例如： ``` const count = ref(1); ``...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值