购物车完整效果（上）

最新推荐文章于 2022-08-18 21:56:06 发布
最新推荐文章于 2022-08-18 21:56:06 发布
阅读量2.3k 收藏 10
点赞数 1
分类专栏： 【android】 文章标签： 购物车 仿饿了么 仿美团 添加购物车效果 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/da_caoyuan/article/details/86495018
版权

目录


看到 饿了么， 美团 的添加商品到购物车的效果，一直觉得很不错，虽然网上有很多博客已经实现了相似的效果，但是好像都没有那么全面，然而用到自己的项目中，也并没有那么实用。在此，系统的整理的一下，争取全面实用些！希望对于爱学习的你，也有所帮助。

话不多说，先贴出效果图：
在这里插入图片描述

那我们就从效果图，入手分析一下吧：实现如上效果，我们可以分以下几步：

  1. 左右列表的联动 （重点）
  2. 右边列表标题的悬停效果（粘性标签）
  3. 添加和减少商品时，按钮的动画
  4. 添加商品时的抛物线动画
  5. 底部弹出购物车清单
  6. 底部购物车清单列表和右边商品列表的联动 （重点）

下面，我会带大家逐一实现上面的每一步，并争取每一步都有多种实现方案。

由于整篇博客，侧重于思路，只会贴出关键代码，建议大家可一边看 源码 一边看博客。

左右列表的联动

说到左右列表联动，首先需要说明一下，这里左边是RecyclerView，右边也是RecyclerView。
（1）第一步，我们左边列表，点击每一项，都要有选中的效果。这里我们可以用一个 boolean变量来实现，如果点击了某个item，遍历列表时，就给相应item对象中的变量赋值为true，其他赋值为false，然后刷新adapter即可。
关键代码：

/**
     * 更新左边菜单类型的状态
     *
     * @param position
     */
    private void updateMenuStatus(int position) {
        List<LeftResult> dataList = mLeftAdapter.getData();
        for (int i = 0; i < dataList.size(); i++) {
            if (i == position) {
                dataList.get(i).isSelect = true;
            } else {
                dataList.get(i).isSelect = false;
            }
        }
        mLeftAdapter.notifyDataSetChanged();
    }

（2）那左边列表选中某一项时，右边列表如果滑动到相应类别项呢？我们可以使用LinearLayoutManager中的mLayoutManager.scrollToPositionWithOffset(0, 0);这个属性，就能轻松实现啦。
关键代码：

  mLeftAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
                updateMenuStatus(position);//更新左边菜单类型的状态
                if (position == 0) {
                    //mLayoutManager.scrollToPosition(0);//测试发现这个，方法是不好的。
                    mLayoutManager.scrollToPositionWithOffset(0, 0);
                } else {
                    if (productBeanList != null && productBeanList.size() > 0) {
                        int scrollToPosition = 0;
                        for (int i = 0; i < position; i++) {
                            scrollToPosition += productBeanList.get(i).list.size() + 1;
                        }
                        Log.i(TAG, "onItemClick: scrollToPosition=" + scrollToPosition);
                        mLayoutManager.scrollToPositionWithOffset(scrollToPosition, 0);
                    }
                }
            }
        });

(3)下面这一步我们主要来实现，当右边列表滑动时，滑动到某一类别时，左边列表同时也切换到相同类别项。那如何实现呢？好，我想想看，，，，对，你想的没错，我们肯定要监听RecyclerView的滚动事件啦。
关键代码：

 mContentRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == 0) {//解决滑动过快，firstVisibleItemPosition 没有被赋值，导致左边菜单项，状态设置不对的问题。
                    int firstVisibleItemPosition = mLayoutManager.findFirstVisibleItemPosition();
                    String strTitle = mContentResultList.get(firstVisibleItemPosition).getTitle();
                    Log.i(TAG, "onScrollStateChanged: firstVisibleItemPosition=" + firstVisibleItemPosition);
                    for (LeftResult leftResult : mLeftResultList) {
                        if (leftResult.name.equals(strTitle)) {
                            leftResult.isSelect = true;
                        } else {
                            leftResult.isSelect = false;
                        }
                    }
                    mLeftAdapter.notifyDataSetChanged();
                }
            }

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);

                int firstVisibleItemPosition = mLayoutManager.findFirstVisibleItemPosition();


                String strTitle = mContentResultList.get(firstVisibleItemPosition).getTitle();
                String strName = mContentResultList.get(firstVisibleItemPosition).getName();

                if (TextUtils.isEmpty(strName) && !TextUtils.isEmpty(strTitle)) {
                    //Log.i(TAG, "onScrolled: strTitle=" + strTitle + " firstVisibleItemPosition=" + firstVisibleItemPosition);

                    for (LeftResult leftResult : mLeftResultList) {
                        if (leftResult.name.equals(strTitle)) {
                            leftResult.isSelect = true;
                        } else {
                            leftResult.isSelect = false;
                        }
                    }
                    mLeftAdapter.notifyDataSetChanged();
                }

                //悬浮标题处理 实现
                hoverTitleDealWith(recyclerView, firstVisibleItemPosition);


            }
        });

ps: 你可能对 if (TextUtils.isEmpty(strName) && !TextUtils.isEmpty(strTitle)) {…} 这样的判断，不太明白，觉得这里也很有必要说明一下。其实上面所说的功能，关键思路是：在滑动时，实时获取顶部第一个可见的item，判断这个 item 是否为 类别 item，是的话，就遍历左边的列表比对，符合的就赋值为true，然后刷新adapter即可。 判断这个 item 是否为 类别 item 的方法应该有很多种，我这里用的 比对 item 对象中某些字段值。

这时，也许你可能会有些明白啦，是的，类别item项的title肯定是有值的，而非类别item项的title是没有被赋值的。那这一个字段判断，不就行了吗，为什么还要有一个字段呢？当你用这一个字段的时候，理论上是没有问题的，可很奇怪的是，当你快速滑动列表时，你会发现 firstVisibleItemPosition 有可能会赋不上值。这样就会导致左边菜单项，状态设置不对。

那怎么解决呢？代码上面已经有了，思路是：在列表滚动结束时，判断 第一个可见的item属于哪个类别项，是哪一个，左边的类别项，就更新哪一个的状态。因此这里，不得不在初始化右边列表数据时，给每个列表项，都赋值一个类别title。所以 if (TextUtils.isEmpty(strName) && !TextUtils.isEmpty(strTitle)) {…} 这里要加两个判断才可以。商品名为空，并且 类别title不为空，才肯定是类别item。

右边列表标题的悬停效果（粘性标签）

这里，我们来实现，右边标题悬停的效果。这里网上也有很多开源的框架，你在github上搜类似这样的关键词 StickyHeaders，StickyListHeaders 会有不少。不过这里，推荐一下这个吧：PinnedSectionItemDecoration 。使用起来也比较简单（用法在 源码 中，点击商品列表，进入的界面有展示），关键是如果你右边的列表用的是recycleview，用这个就可以。有的开源框架，是基于 listView 的封装，你用 recycleview 就不行了。

那如果想自己写个呢，该如何实现呢？其实上面效果图中，并没有使用开源框架，而是结合自己的理解写的，效果也是挺不错的吧。下面看看具体思路和关键代码：

/**
     * 悬浮标题处理
     * <p>
     * 实现步骤描述：
     * （1）：要获取到列表中，第一个显示的item+1 的item的bean类，判断是否为菜单类型
     * 是的话，把该item的 position 赋值给一个临时变量 a
     * （2）：在滑动过程中，当 临时变量 a  等于 列表中第一个显示的item+1 的时候，
     * （3）：获取列表中（ View childView = recyclerView.getChildAt(0);）第一个view， 通过  childView.getBottom()
     * 实时获取item显示的距离
     * <p>
     * （4）：通过比较 item显示的距离 和 悬浮标题的高度，来动态设置 悬浮标题 移动 即可！
     *
     * @param recyclerView
     * @param firstVisibleItemPosition
     */
    private void hoverTitleDealWith(@NonNull RecyclerView recyclerView, int firstVisibleItemPosition) {

        //int section = getSectionForPosition(firstVisibleItemPosition);
        //int nextSection = getSectionForPosition(firstVisibleItemPosition + 1);
        //int nextSecPosition = getPositionForSection(+nextSection);

        int nextSection = 0;//下一个位置
        String strNextTitle = mContentResultList.get(firstVisibleItemPosition + 1).getTitle();
        String strNextName = mContentResultList.get(firstVisibleItemPosition + 1).getName();
        if (TextUtils.isEmpty(strNextName) && !TextUtils.isEmpty(strNextTitle)) {
            nextSection = firstVisibleItemPosition + 1;
        }

        //Log.i(TAG, "onScrolled: firstVisibleItemPosition=" + firstVisibleItemPosition + " lastFirstVisibleItem=" + lastFirstVisibleItem);
        if (firstVisibleItemPosition != lastFirstVisibleItem) {
            ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) tvHoverTitle.getLayoutParams();
            params.topMargin = 0;
            tvHoverTitle.setLayoutParams(params);

            tvHoverTitle.setText(mContentResultList.get(firstVisibleItemPosition).getTitle());

        }

        //Log.i(TAG, "onScrolled: nextSection="+nextSection+" nextSecPosition="+nextSecPosition);
        if (nextSection == firstVisibleItemPosition + 1) {
            View childView = recyclerView.getChildAt(0);
            if (childView != null) {
                int titleHeight = tvHoverTitle.getHeight();

                int bottom = childView.getBottom();//我认为这行代码，很关键。（获取顶部item 显示出来的高度）

                ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) tvHoverTitle.getLayoutParams();

                //Log.i(TAG, "onScrolled: bottom=" + bottom + " titleHeight=" + titleHeight);
                if (bottom < titleHeight) {

                    float pushedDistance = bottom - titleHeight;
                    params.topMargin = (int) pushedDistance;
                    tvHoverTitle.setLayoutParams(params);
                } else {
                    if (params.topMargin != 0) {
                        params.topMargin = 0;
                        tvHoverTitle.setLayoutParams(params);
                    }
                }
            }
        }
        lastFirstVisibleItem = firstVisibleItemPosition;
    }

ps:代码中都已经说的比较明白了，这里就不在废话了。

添加和减少商品时，按钮的动画

这里，效果图中，用的是这个开源库：AnimShopButton 挺实用。用法挺简单，关键代码：

<com.example.shopcatdemo.view.shopcart.AnimShopButton
        android:id="@+id/shopCartButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="@dimen/spacing_10"
        app:addEnableBgColor="#f3593c"
        app:addEnableFgColor="#ffffff"
        app:count="0"
        app:gapBetweenCircle="40dp"
        app:hintBgColor="#f3593c"
        app:hintFgColor="#ffffff"
        app:ignoreHintArea="true"
        app:maxCount="99" />

同样那如果我想自己实现一个，怎么实现呢？
还是先贴出一下效果图吧：
在这里插入图片描述

也不再多说啦，源码 中都有的，关键代码如下：

if (item.getCount() > 0) {
                    tvNumber.setVisibility(View.VISIBLE);
                    imageRemove.setVisibility(View.VISIBLE);
                    tvNumber.setText(item.getCount() + "");
                } else {
                    tvNumber.setVisibility(View.INVISIBLE);
                    imageRemove.setVisibility(View.INVISIBLE);
                    tvNumber.setText("0");

                }

                if (item.getInventory() <= 0) {
                    tvNumber.setVisibility(View.INVISIBLE);
                    imageRemove.setVisibility(View.INVISIBLE);
                }


                //减少
                imageRemove.setOnClickListener(v -> {
                    number = item.getCount();
                    if (number == 0) return;

                    number--;
                    item.setCount(number);
                    tvNumber.setText(number + "");

                    if (number == 0) {
                        tvNumber.setVisibility(View.INVISIBLE);
                        imageRemove.setVisibility(View.INVISIBLE);
                        tvNumber.setAnimation(getHiddenAnimation());
                        imageRemove.setAnimation(getHiddenAnimation());
                    }

                    listener.onDelSuccess(imageAdd, number, helper.getLayoutPosition());
                });

                //添加
                imageAdd.setOnClickListener(v -> {
                    number = item.getCount();

                    if (number < item.getInventory()) {
                        number++;
                        item.setCount(number);
                        tvNumber.setText(number + "");

                        if (number == 1) {
                            tvNumber.setVisibility(View.VISIBLE);
                            imageRemove.setVisibility(View.VISIBLE);
                            tvNumber.setAnimation(getShowAnimation());
                            imageRemove.setAnimation(getShowAnimation());
                        }

                        listener.onAddSuccess(imageAdd, number, helper.getLayoutPosition());
                    } else {
                        Toast.makeText(mContext, "已超出库存数量", Toast.LENGTH_SHORT).show();
                    }

                });

由于篇幅太多，后面的几步实现，见 购物车完整效果（下），这篇博客吧。

购物车完整效果（下）

源码git地址

参考博客：
Android仿外卖购物车的实现

仿饿了么购物车效果（UI效果）

仿饿了么添加购物车效果

AnimShopButton

Android 仿饿了么点餐页面 效果如下：

在这里插入图片描述

da_caoyuan
关注
专栏目录
vue购物车效果
as_long_的博客
10-07 441
一、介绍 vue购物车效果实现了全选
CSS3实现购物车动画效果
最新发布
Jinuss的博客
08-28 967
CSS3实现购物车动画
淘宝购物车效果
weixin_30418341的博客
01-21 184
淘宝购物车效果 　　今天给大家带来的是淘宝购物车效果，写的不怎么好，请大家多多指教。 　　效果： 　　　　1.点击全选前的选择框，选择所有的选择框。 　　　　2.点击商品的加号或者减号可以改变商品的数量值，并且改变商品的小计和他的积分，同时在最下方的总积分和总金额会改变 　　　　3.在商品的数量值可以直接更改他的值，并且商品的小计和他的积分可以改变，同时在最下方的总积分和总金额会改变 ...
购物车的效果
qq_38674970的博客
03-21 242
var rating=(function(){ // 点亮 var init=function(el,num){ var $rating =$(el), $item=$rating.find('.rating-item'); var l
购物车效果
c_l_a_n_n_d的博客
08-18 76
购物车效果
js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）
m0_62309118的博客
09-26 5505
1.购物车效果展示 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding:0px; }.shop{ width:900px; height:300px; border:1px solid red; margin:0 au
购物车效果demo
06-10
在Android应用开发中，实现一个类似美团或饿了么的购物车效果是一项常见的需求，它涉及到用户选择商品、数量增减、总价计算以及本地数据存储等多个功能模块。本项目"购物车效果demo"旨在提供一个基础的实现方案，...
高仿美团添加购物车动画效果
09-10
"高仿美团添加购物车动画效果"是一个专为提升用户体验而设计的技术实践，它旨在模仿美团App中购物车添加商品时的动态效果。这种动画通常包括商品图片逐渐缩小并滑入购物车图标的过程，为用户带来流畅且有趣的交互...
小程序加入购物车动画效果（飞入购物车）
08-22
在微信小程序开发中，为了提升用户体验，经常需要添加各种交互效果，其中“飞入购物车”的动画...在提供的`tocart_animation_demo`压缩包中，应该包含了完整的示例代码，你可以参考学习，进一步理解并实践这个效果。
vue3 项目购物车 + 动画效果
03-16
综上所述，这个项目展示了Vue3如何与动画库和Vuex结合，创建一个功能丰富的购物车应用。开发者通过动画提升了用户体验，并利用Vuex有效地管理了应用的状态。对于想要学习Vue3和动画集成的开发者来说，这是一个很好的...
jquery制作的移动端购物车效果完整示例
10-15
在本示例中，我们将探讨如何使用jQuery来创建一个移动端购物车效果。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互等任务，非常适合用于构建交互性强的网页应用，如购物车系统...
手机web加入购物车特效展示资源
12-16
此处核心实现的是加入购物车的动画特效，至于切换编辑模式等其他特效未做更好的处理，如果您有其他的需求可以自行研究或与我讨论都可以，很高兴能有更多人与我讨论前端知识。
购物车完整效果（下）
da_caoyuan的博客
01-15 788
书接上文，我们接着说。
JS实现购物车特效
weixin_30721077的博客
04-09 98
1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表格操作 3. 通过parseInt()，parseFloat()把字符串转换成数字 4. 通过toFixed()把数字格式化成指定位数的小数 5. 事件代理的运用 效果图： border-collapse有两个值可以选择，分别是collapse和separate，就是合并边框和分离边框，分离...
JavaScript做简单的购物车效果（增、删、改、查、克隆）
weixin_44519496的博客
07-08 2671
比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。 首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下： .buy { width: 200px; height: 300px; display: inline-blo
购物车特效-
小角色
03-29 454
购物车特效—贝塞尔曲线效果图原理 从添加按钮获取开始坐标 从购物车获取结束坐标 打气一个视图，添加属性动画ObjectAnimator（缩小），ValueAnimator（路线） 动画开始时添加一个中间视图，动画结束删除 运动路径使用TypeEvaluator与贝塞尔函数计算 开始撸代码1.重写onLayout方法获取，并获取当前控件在屏幕的坐标PointF mLocation = new Poin
JS实现购物车效果
qq_42739776的博客
08-27 839
1.效果 1.效果图： 2.功能描述 1.全选时，总价为商品价格和 2.反选时，总价为0 3.任意点击商品栏前的选中时，当所有商品前的选框选中时， 全选按钮变为选中，当商品前的任意一个选框未被选中时， 全选为未选中状态。 4.商品数量：点击+时，数量增加，单个商品总价随之变化 的同时，总价随之变化。点击-时，商品数量-1，单个商品 总价和所有商品合计减少对应价格，当数量为减为0时，移除 该产品。 5.删除：点击删除时，删除该商品，所有商品总计变化。 3.目的的意义： 熟悉javascript对dom元素
jQuery实现商品飞入购物车效果插件
elzjm的专栏
04-28 2207
本文原地址：http://www.daimajiayuan.com/sitejs-18635-1.html HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 script src="jquery.js">script>  script src="jquery.fly.min.js">script>   接着，将商品信息html结构布置好，本例中，我们用四个
js实现购物车效果
sinat_31766075的博客
01-09 3390
在网页中实现动态添加物品的效果. 代码如下:<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值