最近在公司比较闲,中午点外卖的时候突然发现订餐页面还可以,正好没事情做~ 于是准备仿照(饿了么)写一个~
下面上效果图
1、滑动联动的效果
2、订餐效果
恩,大致功能都完成了~
下面开始上代码
一、布局
布局比较简单,左右各一个ListView,这里我用到一个开源项目 PinnedHeaderListView
https://github.com/JimiSmith/PinnedHeaderListView
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rel_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:orientation="horizontal"
android:paddingBottom="48dp">
<ListView
android:id="@+id/my_listview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/gray002"
android:scrollbars="none" />
<com.lly.order.view.PinnedHeaderListView
android:id="@+id/pinnedListView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@android:color/white" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#4E4E4E">
<ImageView
android:id="@+id/imageView2"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:src="@mipmap/icon_cart" />
<TextView
android:id="@+id/tv_nm"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_alignTop="@+id/imageView2"
android:layout_toLeftOf="@+id/textView4"
android:layout_toStartOf="@+id/textView4"
android:background="@mipmap/cemara_bg_timer_red"
android:gravity="center"
android:text=""
android:textColor="@color/white"
android:textSize="12sp"
android:visibility="gone" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toRightOf="@+id/imageView2"
android:text="¥0"
android:textColor="@color/white"
android:textSize="21sp" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:text="¥30起送"
android:textColor="@color/gray006"
android:textSize="18sp" />
</RelativeLayout>
</RelativeLayout>
然后填充数据~ 我这里用的假数据,创建一个实体
package com.lly.order.entity;
import java.util.List;
public class FoodEntity {
private List<category> categoryList;
public List<category> getCategoryList() {
return categoryList;
}
public void setCategoryList(List<category> categoryList) {
this.categoryList = categoryList;
}
public static class category {
private String name;
private List<foodbean> foodbeans;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<foodbean> getFoodbeans() {
return foodbeans;
}
public void setFoodbeans(List<foodbean> foodbeans) {
this.foodbeans = foodbeans;
}
public static class foodbean {
private String dishes;
private int count;
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public String getDishes() {
return dishes;
}
public void setDishes(String dishes) {
this.dishes = dishes;
}
}
}
}
添加数据
//获取数据
private void getData() {
List<FoodEntity.category.foodbean> foodbeanList;
int num = 0;
for (int i = 0; i < 8; i++) { //三种类型
num++;
FoodEntity.category category = new FoodEntity.category();
category.setName("类型" + i);
foodbeanList = new ArrayList<>();
int random = new Random().nextInt(6) + 3;//随机
for (int j = 0; j < random; j++) {
num++;
FoodEntity.category.foodbean foodbean = new FoodEntity.category.foodbean();
foodbean.setDishes("鲍鱼" + j);
foodbeanList.add(foodbean);
}
category.setFoodbeans(foodbeanList);
categories.add(category);
location.put(i, num);
}
}
然后就是setAdapter啥的,具体不贴代码了,这里说一下怎么联动的
首先 监听pinnedHeaderListView的滑动事件 setOnScrollListener
pinnedHeaderListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
int section = testSectionedAdapter.getSectionForPosition(firstVisibleItem);//获取当前的head
if (mSection != section) {
mCateGoryAdapter.setIndex(section);
mSection = section;
}
}
});
}
首先获取head的位置,然后传入分类的Adapter
/**
* 设置当前的位置
*
* @param mIndex
*/
public void setIndex(int mIndex) {
this.mIndex = mIndex;
notifyDataSetChanged();
}
在getView方法中判断
if (position == mIndex) {
convertView.setBackgroundColor(mContext.getResources().getColor(R.color.white));
} else {
convertView.setBackgroundColor(mContext.getResources().getColor(R.color.gray002));
}
就可以滑动的时候,左边列表更新了
//点击事件
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (position == 0) {
pinnedHeaderListView.setSelection(0);
} else {
pinnedHeaderListView.setSelection(location.get(position - 1));
}
mCateGoryAdapter.setIndex(position);
}
});
location 是一个MAP 里面保存着head的位置,在getData里面就是 i 的值
//保存head的位置
private HashMap<Integer, Integer> location = new HashMap<>();
菜品添加效果的实现的实现方式,
点击添加按钮然后滑出的效果,仔细 观察其实是平移加旋转,下面帖代码
PropertyValuesHolder p1 = PropertyValuesHolder.ofFloat("translationX", viewHolder.imgbtn_add.getX(), 0f);
PropertyValuesHolder p2 = PropertyValuesHolder.ofFloat("rotation", 0, 720);
ObjectAnimator.ofPropertyValuesHolder(viewHolder.imgbtn_cancle, p1, p2).setDuration(Duration).start();
PropertyValuesHolder pp1 = PropertyValuesHolder.ofFloat("translationX", (viewHolder.imgbtn_add.getX() - viewHolder.tv_number.getX()), 0f);
PropertyValuesHolder pp2 = PropertyValuesHolder.ofFloat("rotation", 0, 360);
ObjectAnimator ObjectAnimator1 = ObjectAnimator.ofPropertyValuesHolder(viewHolder.tv_number, pp1, pp2);
ObjectAnimator1.setStartDelay(50);//延迟
ObjectAnimator1.setDuration(Duration);
ObjectAnimator1.start();
就是把 “-” 和 数量 2个view从添加按钮的位置移动到本身的位置,且进行旋转
当然还有收回去的效果,就在把值换一下就行了,然后监听动画执行完毕,把按钮隐藏就行了
丢到购物车效果的实现,这里我差不多花了一下午时间,才弄好.......
开始我在ListView item里面写了一个View 然后准备移动到指定的位置(购物车),发现移动范围只能在item里面......一想发现自己2B了,View只能在父容器里面移动
恩,所以要在跟布局中写动画了,下面说一下实现过程
1、获取点击item的坐标,这里是获取屏幕的绝对坐标
int[] location = new int[2];
viewHolder.imgbtn_add.getLocationOnScreen(location)
通过写一个接口,通过回调的方式到Activity
public interface onItemClickLocation {
public void onLocation(int x, int y);
}
然后在Activity拿到坐标
public void onLocation(final int x, final int y) {
//生成一个View
final ImageView img_view = new ImageView(this);
img_view.setImageResource(R.mipmap.food_button_add);
relativeLayout.addView(img_view);
//把View的位置移动到和点击的一个位置
img_view.setX(x);
img_view.setY(y - 48);//-48
// 计算位移
float endX = imageViewX - x;
float endY = imageViewY - y;
//执行位移和透明度动画
TranslateAnimation translateAnimationx = new TranslateAnimation(0, endX, 0, 0);
translateAnimationx.setInterpolator(new LinearInterpolator());//匀速
img_view.setAnimation(translateAnimationx);
TranslateAnimation translateAnimationY = new TranslateAnimation(0, 0, 0, endY);
translateAnimationY.setInterpolator(new AccelerateInterpolator());
translateAnimationY.setStartOffset(50);
img_view.setAnimation(translateAnimationY);
AlphaAnimation alphaAnimation = new AlphaAnimation(1f, 0.1f);
img_view.setAnimation(alphaAnimation);
AnimationSet set = new AnimationSet(false);
set.setFillAfter(false);
set.addAnimation(translateAnimationY);
set.addAnimation(translateAnimationx);
set.addAnimation(alphaAnimation);
set.setDuration(500);// 动画的执行时间
img_view.startAnimation(set);
set.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
setTextNum();
relativeLayout.postDelayed(new Runnable() {
@Override
public void run() {
relativeLayout.removeView(img_view);
}
}, 100);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
}
动画执行完之后,然后remove掉View,我这里延迟是因为view可能没有立马执行完onDrawa方法,这时候remove会报错
代码量不多,理清楚思路就好了~
文章浏览阅读2.7k次。linux关机重启六种方法(sysrq shutdown halt init ipmi poweroff)我的博客已迁移到xdoujiang.com请去那边和我交流linux关机重启六种方法(sysrqshutdownhaltinit)当前版本cat/etc/debian_version5.0.1一、linux关机命令(前四种)1、shutdown-hnow(-h:haltafter..._linux poweroff关机失败,poweroff -f关机成功
文章浏览阅读7.8k次,点赞6次,收藏11次。作为一名IT民工来说,对于电脑的各种操作都需要熟练掌握,不仅要学会Windows电脑的操作,更要学会Mac电脑的操作,不同的操作系统,有些操作是不一样的,就拿终端命令行来说,Windows系统的cmd和Mac系统自带的终端就不一样。 由于觉得Windows系统的cmd命令工具用着不习惯,所以本篇博文只来分享一下Mac电脑系统下自带的终端的关于管理员用户的切换方法,这个知识点虽然比较..._mac 终端切换交互方式
文章浏览阅读3.3k次,点赞4次,收藏10次。他说按我的操作步骤,到开启Root的步骤后,无论如何也下载不下来Root安装包,导致无法获取Root权限。从我的小米5手机Root成功,到现在才一个来月,难道小米官方就关闭了此型号的Root服务,彻底把这枚钉子户抛弃了?下载一个刷机包->下载并安装magisk->用magic修改刷机包->将刷机包刷入手机->测试成功->舔杯(只是阶段性的胜利,不能大张旗鼓的干杯)备份手机数据-->解锁BL-->刷开发版-->开启Root-->安装文件管理器-->替换相关文件-->测试-->干杯!下面是一些我的维修故事。_小米5电信卡不能打电话
文章浏览阅读539次。[java] view plain copytextview.getPaint().setFlags(Paint. STRIKE_THRU_TEXT_FLAG ); //中间横线 [java] view plain copytextview.getPaint().setFlags(Paint.UNDERLINE__android textview paint 添加中横线
文章浏览阅读1.4k次。思想: 将DataGridView界面设置成显示固定条数的大小,比如要显示10条数据,就将DataGridView设成只能显示10条数据的大小。根据设置FirstDisplayedScrollingRowIndex属性,实现翻页效果。(实际上,这种实现方式只是将数据隐藏了,翻页时将要显示的数据放到第一行的位置,让人看起来就像是翻页了……) FirstDisplayedScrollingRo..._c# datagridview 滚动条改成翻页
文章浏览阅读53次。正则表达式什么是正则表达式?正则表达式又称规则表达式,正则表达式是对字符串(包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为“元字符”))操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式通常被用来检索、替换那些符合某...
文章浏览阅读580次。魅族号称耗费了很长时间打造的魅族17终于发布了,搭载高通的高端芯片骁龙865,定价高达3699元起,看起来比小米10便宜了300元,然而别忘记了如今小米主打性价比的是红米品牌,而同样搭载...
文章浏览阅读763次。Springboot乐校园二手书交易管理系统oc81w计算机毕业设计-课程设计-期末作业-毕设程序代做。springboot基于springboot技术的游戏交易平台。springboot基于Bootstrap的家具商城系统设计。springboot体育馆预定管理平台的设计与实现。ssm基于Java的幼儿早教系统软件的设计与实现。jsp基于web的面向公众的食品安全知识系统。ssm基于SSM框架的学习资料校内共享平台。ssm基于JavaWeb的好好吃查询系统。_二手书店系统服务器开发课程设计
文章浏览阅读2.1w次,点赞7次,收藏17次。项目场景:Linux springboot上传文件报错:java.nio.file.NoSuchFileException: /tmp/undertowXXXXXX问题描述:系统使用频率较低,用户上传附件时提示报错:java.nio.file.NoSuchFileException: /tmp/undertow*****原因分析:查阅资料找到问题原因:在Linux系统中,Spring Boot应用以java -jar命令启动时,会在操作系统的/tmp目录下生成一个to..._java.nio.file.nosuchfileexception
文章浏览阅读4.4k次。展开全部python适合做框架程序,就是把其他编程语言的程序组合起来。e69da5e887aa62616964757a686964616f31333431376535不要用python做太多行的代码,python不适合写超长程序。C语言和Java是可以用于嵌入式的,产品数量非常大,但程序员数量却相对很少。ARMv7和CORTEX-M还是以C为主,支持C++的后缀名,但不能使用C++的语法。CORT..._pyhon和易语言哪个难
文章浏览阅读422次。插件列表说明新增E3D一键安装版{可选下载}最新版的调色插件套装Red Giant Color Suite (英文:AE Pr插件) Magic Bullet Looks (汉化:AE Pr插件) Magic Bullet Colorista (汉化:AE Pr插件) Magic Bullet Denoiser II..._csdn e3d菜单插件
文章浏览阅读1.1k次。V4L2框架简介 几乎所有的设备都有多个 IC 模块,它们可能是实体的(例如 USB 摄像头里面包含 ISP、sensor 等)、也可能是抽象的(如 USB 设备里面的抽象拓扑结构),它们在 /dev 目录下面生成了多个设备节点,并且这些 IC 模块还创建了一些非 v4l2 设备:DVB、ALSA、FB、I2C 和输入设备。正是由于硬件的复杂性,v4l2 的驱动也变得非常复杂。 特别是 v4l2 驱动要支持 IC 模块来进行音/视频的混合/编解码操作,这就更加使得 v4l2 驱动变得异常复._君正v4l2 camera架构