正文

android仿饿了么购物车

当富网络  当富网络  2022-12-08  806

关键词：

from : http://blog.csdn.net/jdsjlzx/article/details/47311749

这次分享的是一个很常见的效果，凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果，两个list view联动显示，添加购物车时的一个抛物线动画实现，以及图标或者item右上角的数字显示。下面是我空闲时候写的一个demo，界面比较陋，但是基本效果都实现了。

不多说，看效果图：

只对添加按钮做了监听，删除没去写（没什么必要）。

讲一些主要的代码，想下载源码的可以去这里下载（https://github.com/bobge/LinkedListView.git）：

左边的listview的item右上角的数字是通过xml方式来显示的：

shape_data.xml

[html] view plain copy

<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false" >
<solid android:color="#f00000" />
<padding
android:left="2dp"
android:top="1dp"
android:right="2dp"
android:bottom="1dp" />
<solid
android:color="#f00000" />
<size android:width="15dp"
android:height="15dp" />
</shape>

想要实现圆形中间显示数字只需要设置textview的宽高一样就可以，然后设置textview的一个属性为：

android:background="@drawable/shape_data"

购物车下面那个数字显示我换了一种实现方式：调用BadgeView这个自定义类就能够实现，用法很简单，大家可以搜索一下这个类。

两个listview的联动也很简单：

listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() 
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) 
        list2.clear();
        list2.addAll(list.get(position).getList());
        goodsAdapter.notifyDataSetChanged();
    
);

只要在左边list view的监听中给右边list view的适配器notifyDataSetChanged就可以了。主要看看我的数据源格式应该就明白了。

抛物线动画效果的实现，这部分网上有很多demo实现，其实原理很简单，首先获取点击的那个位置的坐标：

int[] startLocation = new int[2];// 一个整型数组，用来存储按钮的在屏幕的X、Y坐标
v.getLocationInWindow(startLocation);// 这是获取购买按钮的在屏幕的X、Y坐标（这也是动画开始的坐标）

通过同样的方法计算结束位置（即购物车的位置坐标）,然后计算x，y轴上的平移距离，用AnimationSet添加translateAnimationX和translateAnimationY就ok了，具体的可以去下载源码看看。

仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮

转载请标明出处：http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门：喜欢的话，随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文，酷炫Path动画已经预告了，今... 查看详情

饿了么购物车动画(代码片段)

前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画，所以想看看别人是怎么实现的，但是看了很多仿饿了么的demo都是实现了一个完整的大的项目，要找到那个小模块很麻烦，所以自己将联动菜单和动画提取出来... 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用：vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

仿饿了么首页导航栏（viewpager）

1、需求分析在饿了么首页中我们能看到这样的布局（如下图）。红框内是一个可以左右滑动的页面，每一个页面类似于九宫格，都有可供点击图标。对于这样的布局，我在网上找了很久都没有找到相关的名称，所以我这里暂时... 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接：http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括：MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问：//引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

基于vue2+nuxt构建的高仿饿了么（2018版）(代码片段)

前言高仿饿了么，以nuxt作为vue的服务端渲染，适合刚接触或者准备上vuessr的同学参考和学习项目地址如遇网络不佳，请移步国内镜像加速节点效果演示查看demo请戳这里（请用chrome手机模式预览）移动端扫描下方二维码API接口文... 查看详情

仿饿了么项目-vue-cli开启项目

环境搭建安装nodeJs在用vue-cli开启项目之前，首先我们需要安装Node环境，安装Node很简单，只需要去官网下载http://nodejs.cn/download/，下载完成后点击安装，安装过程很简单，一直next即可，安装完成会自动添加node及npm环境变量。检... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、准备工作1.大前提：已安装好node、npm、vue、vue-cli、stylus（此项目使用stylus来编译）2.开发软件：GoogleChrome（建议安装插件vue-devtools，方便调试），webstorm/sublimeText/VSCode（推荐使用webstorm，sublime和VSCode需要安装相应的插件）3.... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件，在底部导航的时候可以相应的显示不同的标题技术点：使用slot进行组件间的通信；父组件给子组件传值（子组件里面通过props接收父组件传过来的数据）查看链接：https://blog.csdn.net/sinat_17775997/article/... 查看详情

基于springboot+redis+vue仿饿了么外卖系统（后台+移动端）

优质文章，第一时间送达六、运行效果前端展示（点击图片查看大图）后台管理（点击图片查看大图）七、源码下载源码下载云盘链接:链接：https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码：lry9复制这... 查看详情

css贝塞尔曲线模仿饿了么购物车小球动画

在线观看贝塞尔曲线值：传送门在线观看动画效果：传送门代码：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JSBin</title><style> 查看详情

用vue制作饿了么首页

...sp;上面的头部（商家信息），中间路由购物车每部分先占住自己位置，然后挨个将这三部分分别实现完整。我理解的vue里，index.html好比是车轱辘，main.js就好比是变速箱，App.vue就好比是汽车方向盘和档把子，其... 查看详情

一个基于springboot+redis+vue仿饿了么外卖系统（后台+移动端），可二次开发接私活！...(代码片段)

...PN翻墙被抓了！已大规模行政处罚！该项目是一款仿饿了么外卖平台系统，参考了一些现有其他开源外卖项目，在此基础之上，做了优化处理，并使用SpringBoot+Vue技术开发。可用于学习使用。01项目说明... 查看详情

【css动画】饿了么加入购物车抛物线动画实现

...肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一... 查看详情

vue.js高仿饿了么外卖app2016最火前端框架百度云

ReactReact和Vue有许多相似之处，它们都有：使用VirtualDOM提供了响应式（Reactive）和组件化（Composable）的视图组件。保持注意力集中在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。相似的作用域，我们会用更多... 查看详情

前端实战项目：vue.js实现外卖平台webapp,饿了么项目的翻版

...为一体的移动端点餐APP1.点餐页面点选商品后自动添加到购物车，并计算好总价，在商品列表、购物车列表和商品详情页都可以随意增减数目，此外左侧商品分类和右侧的商品相互关联，通过better-scroll插件滑动商品列表时，相应... 查看详情

vuejs仿美团，饿了么项目之——商品数量加减篇

...品数量的加减功能组件，就叫cartcontrol.vue吧。新增个底部购物车组件，叫shopcart.vue吧。在good.vue中引入并注册组件。cartcontrol.vue中，通过props来接收list对象因为我在json中没有设置数量这个key，所以需要全局用vue.set进行注册这个... 查看详情