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
     @Override
      public 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
     @Override
        public 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开始
                //默认第一个就是有个Group
                if (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轴,baseLine
            Rect 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

    时间: 2024-08-03 21:59:56

    Recycleview模仿瑞幸咖啡菜单物品列表的相关文章

    当瑞幸“咖啡的小世界”遇上星巴克“全世界的咖啡”

    玺哥统计了腾讯智慧零售和阿里新零售共60篇10余万字的报道,搜索近20个高频词汇后发现,腾讯30篇文章中--合作出现了158次.超市出现了75次.流量出现了64次.上线出现了59次,小程序出现了48次:阿里30篇文章中--零售.门店.数字化.业态.供应链这5个关键词是30篇文章中提及较多的词汇,其中新零售出现了319次.门店出现了155次.数字化出现了70次.数据出现了166次.供应链出现了158次. 8月初,阿里巴巴宣布旗下饿了么与星巴克战略合作.饿了么将为星巴克提供直送服务,实现门店附近范围

    jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

    我有一个水货的上司,大家都是知道的.所以我就只能自学了,今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能.比如电话,短信,浏览器,音乐的标签菜单.好吧,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery Mobile模仿iphone菜单项</title

    从瑞幸看尽调技术

    瑞幸不同于马蜂窝,马蜂窝是用的爬虫技术,爬取数据,分析用户行为. 瑞幸是门店,这次是采用的人肉技术. 这份做空报告的实际制作方,是一家投资管理公司雪湖资本.雪湖找到了三家咨询公司--外资咨询公司Third Bridge,本土咨询公司汇生咨询.久谦咨询,来完成做空所需的调研工作.其中,Third Bridge协助早期的专家访谈环节,汇生咨询和久谦咨询执行后期的实地调查环节.截至发稿前,燃财经暂未得到这四家机构的回应. 当时雪湖找到久谦,给了一份名单,让久谦在全国40个城市400多家瑞幸门店统计客流

    用python爬取亚马逊物品列表

    1. 仔细分析亚马逊查询详细界面可以看出来,主要关键部分有三个地方,这三个地方分别控制了查询列表的页面和关键字,所以修改这几个参数可以改变列表页数以及模糊查询的结果 http://www.amazon.cn/s/ref=sr_pg_3?rh=n%3A658390051%2Ck%3Aphp&page=3&keywords=Java&ie=UTF8&qid=1459478790 2. 通过基础链接以及正则表达式匹配的方法进行替换的方式改变爬取页面,注意由于使用了正则表达式匹配,

    关于一个隐藏和显示物品列表的demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"

    android PopupWindow嵌套ListView(模仿分类下拉菜单效果)

    先看下UI效果 这就是使用PopupWindow嵌套ListView实现的,这个简单,不做多介绍直接上代码 1:布局文件 <span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

    点击含下拉菜单的列表/表单按钮:通过JS创建虚拟按钮并点击

    ${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0]}' and @class='mnuBtn']/parent::span/table[@class='mnuList']//tr/td[text()='${MenuArr[1]}']/parent::[email protected] 注释: 1.MenuArr为传入的需要点击的按钮路径,如:新增

    肯德基联手亚马逊Kindle试水咖啡主题店中店能成功吗?

    互联网上始终有一个传说:kindle与泡面是绝配.因为用kindle压着泡面,泡出来的味道格外的好.当然,这只是一个调侃.毕竟很多人购买kindle的动力是为了摆脱其他电子设备的诱惑,想去好好去读书.但没想到,最后还是没能抵住诱惑,让kindle彻底"吃灰",成为了泡面的"最佳拍档". 不过我已经购买过三部kindle,确实看书体验没得说,而且使用频率也是极高的.或许,每个人的使用方式不同吧.而kindle作为"专业看书神器",的确比较适合安静时

    3星|《哈佛商业评论》2018年第8期:数字化且联网的系统永远不可能安全

    网络安全新策略(<哈佛商业评论>2018年第8期) 本期主打文章是系统安全.核心观点是联网的系统不可能安全,安全期间需要后退一步,把最关键的系统断网. 本期高质量的文章较少. 电子版翻页有问题,电脑上在#473页按->键,会跳到书的首页. 总体评价3星,有参考价值. 以下是书中一些内容的摘抄,#号后面是kindle电子版中的页码,[]中是我根据上下文补充的信息: 1:私募股权.激进投资者和对加大披露力度的要求为通用电气带来了挑战,迫使公司证明其价值应超过各部分业务之和,然而在这一挑战面前