Recycleview模仿瑞幸咖啡菜单物品列表
- 首先得明白一点Recycleview的ItemDecoration非常强大,你可以使用它实现listview的分割线,悬浮窗,甚至一些非常炫的动画。
- 先看下效果图
ItemDecoration
- onDraw():和普通view的onDraw差不多,就是绘制在画布上绘制东西。
- onDrawOver():就是基于onDraw上再次绘制点东西,over的意思。
getItemOffsets():Recycleview可以通过他拿到每一个item的间距,所以只需要控制这个间距,并在间距里利用onDrawOver再绘制你想绘制的东西。
实现这个的思路,我们只需要在指定的的行数通过getItemOffsets预留出我们要空出的高度,然后通过onDrawOver绘制出你所希望的view即可。
一:手动构造数据格式,如下,返回list
Goods goods1 = new Goods("人气TOP", "正果拿铁1", "Y27", "默认:大/单糖/热");
Goods goods99 = new Goods("人气TOP", "正果拿铁2", "Y27", "默认:大/单糖/热");
Goods goods91 = new Goods("人气TOP", "正果拿铁3", "Y27", "默认:大/单糖/热");
Goods goods2 = new Goods("大师咖啡", "拿铁", "Y27", "默认:大/单糖/热");
Goods goods3 = new Goods("大师咖啡", "香草拿铁", "Y24", "默认:大/单糖/热");
Goods goods4 = new Goods("大师咖啡", "焦糖拿铁", "Y26", "默认:大/半糖/热");
List<Goods> list = new ArrayList<>();
二:书写自己的ItemDecoration
- getItemOffsets预留空间,只需要在每个数组的第一个数据预留一个高度,比如第一个人气TOP,第一个大师咖啡。
第一个必须预留,当前位置的name和前一个不相等则为预留空间@Override
public boolean isParent(int position) {if (position == 0) return true;if (!list.get(position).getType().equals(list.get(position - 1).getType()))return true;return false;
}
//是否为当前最后一个item
protected boolean lastOneInGroup(int position) {String parentName = mDecorListener.parentName(position);String nextGroupName;try {nextGroupName = mDecorListener.parentName(position + 1);} catch (Exception e) {nextGroupName = null;}if (nextGroupName == null) {return false;}return !TextUtils.equals(parentName, nextGroupName);//与下一行的name不一样说明当前是最后一行}由上isParent判断是第一个的返回你要预留的高度大小,否则为不需要空间0@Overridepublic void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {super.getItemOffsets(outRect, view, parent, state);int position = parent.getChildAdapterPosition(view);if (parent.getLayoutManager() instanceof LinearLayoutManager && mDecorListener.isParent(position)) {outRect.top = decorationHeight;return;}outRect.top = 0;}
- 在预留的空间上画上你的view
@Overridepublic void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {super.onDrawOver(c, parent, state);final int itemCount = state.getItemCount(); 全部item的数量final int childCount = parent.getChildCount(); 可看见的排除悬停的分割线的个数final int left = parent.getPaddingLeft();final int right = parent.getWidth() - parent.getPaddingRight();for (int i = 0; i < childCount; i++) {View childView = parent.getChildAt(i);int position = parent.getChildAdapterPosition(childView);//就是当前可见每一行的position,从0开始//默认第一个就是有个Groupif (mDecorListener.isParent(position) || i == 0) {//中第一个位置和可见的第一个才有这个悬停//绘制悬浮,int bottom = Math.max(decorationHeight, (childView.getTop() + parent.getPaddingTop()));//决定当前顶部第一个悬浮Group的bottom,拿到item高度和规定高度对比,只是选择一个合适的高度定义分割线if (position + 1 < itemCount) {//下一组的第一个View接近头部int viewBottom = childView.getBottom();if (lastOneInGroup(position) && viewBottom < bottom) {bottom = viewBottom; //如果这个关掉,会覆盖,顶上去效果失去,其实viewBottom逐渐变为0,这样动态的放置即将消失的悬浮拦,看上去就是下一个悬浮拦顶上来的}}drawDecoration(c, position, left, right, bottom, parent);stickyHeaderPosArray.put(position, bottom);} }}private void drawDecoration(Canvas c, int position, int left, int right, int bottom, RecyclerView parent) {c.drawRect(left, bottom - decorationHeight, right, bottom, mGroutPaint);Paint.FontMetrics fm = mTextPaint.getFontMetrics();//文字竖直居中显示float baseLine = bottom - (decorationHeight - (fm.bottom - fm.top)) / 2 - fm.bottom;//获取文字宽度mSideMargin = Math.abs(mSideMargin);c.drawText(mDecorListener.parentName(position), left + mSideMargin, baseLine, mTextPaint);//x轴,baseLineRect rect = new Rect();//为了得到当前text的属性mTextPaint.getTextBounds(mDecorListener.parentName(position), 0, mDecorListener.parentName(position).length(), rect);//绘制那条横线c.drawLine(left + mSideMargin * 2 + rect.width(), baseLine - rect.height() / 2, parent.getWidth() -mSideMargin, baseLine - rect.height() / 2, mTextPaint);}
完结
转载于:https://blog.51cto.com/8912823/2367243
Recycleview模仿瑞幸咖啡菜单物品列表相关推荐
- 艾永亮:分析瑞幸咖啡的商业模式,超级产品战略为企业带来新机会
一.抛开偏见 瑞幸咖啡从问世到上市只用了17个月,创下了国内企业最快的上市记录,上市后市值高达50亿美金. 早期的瑞幸咖啡总是备受争议,不少媒体抱着唱衰的态度发布着一些瑞幸咖啡疯狂补贴.流血上市具有争 ...
- 鸿蒙版瑞幸咖啡开发日记(五)咖啡详情页逻辑实现
鸿蒙版瑞幸咖啡开发日记之咖啡详情页逻辑实现 1.逻辑归纳 2.开发流程 2.1 咖啡标题 2.2 温度和糖度选择 2.3 数量选择 2.4 结算后返回 3.整体代码 我们先来看一下总体的效果 1.逻辑 ...
- 瑞幸咖啡百万大咖活动 记人生第一次豪赌,净赔了200元钱。
记人生第一次豪赌,净赔了200元钱. 从几个月前,瑞幸咖啡就开始了一个百万大咖活动,游戏规则大体如下: 奖池总共有500W元的奖金,奖金将分摊给所有满足条件的用户 购买满7件商品的用户即视为满足条件的 ...
- 从猎豹移动到瑞幸咖啡,看中国企业在海外的信誉破产
2020年4月2号,「瑞幸咖啡」被爆出22亿人民币的财务造假,随后股价大跌80%,并5次触发熔断机制.看到这起巨大的中国企业丑闻事件后,不禁让我联想起两个月前的2月21号,「猎豹移动」旗下的45款应用 ...
- 跌破发行价——瑞幸咖啡这个案例,小白可能会疑惑的几个问题
作者 | 铺子店长 来源 | 茶水铺子 以下内容并非原创,均为搬运整理,用于解答当前我感到困惑或者好奇的问题.与你分享. 由于篇幅太长,所以先抛问题,便于自行思考或浏览: 1.瑞幸咖啡为什么这么惹眼? ...
- 中概股最快IPO:瑞幸咖啡成立两年后上市,市值47亿美元
成立一年半,瑞幸咖啡要上市了.在刷新拼多多.趣头条IPO的速度后,它如此急于上市最终的目的无非是两种:一是套现.走人,二是继续烧钱.圈地. 一个靠"烧钱"催熟的实体经济,想借助互联 ...
- 鸿蒙版瑞幸咖啡开发日记(二)首页功能实现
鸿蒙版瑞幸咖啡开发日记之首页功能实现 1.需开发的功能归纳 2.首页功能开发 2.1 顶部TabList开发 2.2 一级分类数据渲染 2.3 右侧大分类模板渲染 2.4 右侧具体咖啡数据渲染 2.5 ...
- 鸿蒙版瑞幸咖啡开发日记(一)首页布局设计
鸿蒙版瑞幸咖啡开发日记之首页布局设计 1.整体布局设计思路 2.三大模块开发 2.1 头部信息栏的开发 2.2 中间菜单栏的开发 2.2.1 一级分类菜单 2.2.2 二级分类菜单思路整理 2.2.3 ...
- 鸿蒙版瑞幸咖啡开发日记(三)购物车结算栏开发
鸿蒙版瑞幸咖啡开发日记之已点咖啡结算栏开发 1.整体设计思路 2.购物车结算栏布局设计 2.1 右侧购物车图标 2.2 购物车结算栏 2.3 已点咖啡数量圆圈 2.4 已点咖啡模板 这里我实现的效果其 ...
最新文章
- 16岁开宝马,19岁创立自己的电脑公司,戴尔传奇
- Windows Server 2008自定义任务栏和开始菜单
- js在for循环中绑定事件
- nodejs 面向对象 私有变量_Java准备校招之面向对象总结
- paip. 调试技术打印堆栈 uapi print stack java php python 总结.
- 【Kafka】kafka 客户端 控制台 flink 都无法消费的情况
- 网工年薪100w+,你在哪个阶段?
- HDU 4558 剑侠情缘
- Gravatar - globally recognized avatar
- 他们才是全球高频交易顶级玩家
- php中的opendir函数,php中opendir函数的用法详解
- FFmpeg无损转换ts为mp4
- C语言中的全局变量定义与使用
- [再寄小读者之数学篇](2014-06-26 绝对值不等式)
- Online Learning and Pricing with Reusable Resources: Linear Bandits with Sub-Exponential Rewards: Li
- python爬虫——爬取马蜂窝景点翻页文字评论
- 我所经历的一次社会无赖中介的大考验,仅此记录,以介。(北京朝阳区黑中介杨沫)
- 《工具箱-服务器相关》Moba连接FTP服务器,EElFTPSUnacceptedReplyError(error code is 550)已解决
- 交互式分割: Interactive Object Segmentation with Inside-Outside Guidance
- Potplayer安装 之 视频编解码器
热门文章
- 译——冠状病毒:这是全球离岸测试模型的终结吗?
- linux C++ 使用openssl rsa算法实现对计算机物理地址进行签名和认证
- VC++中*.dsp与*.dsw文件各有什么用处
- 计算机网络(树形DP)
- java 二维数组排序_java – 如何对二维ArrayList进行排序
- linux 怎么更新 8021q模块,在ubuntu14.04上实现收发VLAN(802.1Q)帧
- hypermesh 学习笔记二,
- 中移ML302模组通过MQTT协议接入oneNT平台
- 更新PYthon3.8 以及Python may not be configured for TK解决
- 《构建之法》——第一次博客作业