仿京东拼多多商品分类页-(RecyclerView悬浮头部实现、xml绘制ItemDecoration)

文章目录

  • 前言
  • 效果图
  • 思路
    • 方式一：通过xml布局来实现
    • 方式二：通过ItemDecoration方式来实现
  • 实现步骤
    • 1、数据项格式
    • 2、左侧列表适配器
    • 3、右侧列表适配器
    • 4、头部及悬浮头部绘制
      • 4.1头部偏移高度为要绘制xml布局的高度--getItemOffsets()
      • 4.2 绘制固定头部--onDraw()
      • 4.3 绘制悬浮头部-onDrawOver()
  • 总结
  • 参考文章

前言

做过的功能一定要总结，因为，过段时间你就忘记了哈哈哈
最近在做功能分类页功能，我看了下，这不和我之前做的美团购物车功能差不多么，然后就再看了遍之前写的文章，并看了下底下的评论，不得不说，当时实现的方式确实复杂，搞得我都有点懵，所以就打算优化下当时实现的方式。

效果图

先上张最后实现的效果图吧
在这里插入图片描述

思路

有两种方式

方式一：通过xml布局来实现

  • 右侧每个标题加下面的分组列表为一个ItemView，直接在该ItemView的xml布局内绘制好即可
  • 悬浮头部是直接在右侧整个RecyclerView上方和他重合，绘制一个固定的头部布局即可

看下图即可明白该如何来实现，主要的内容是在xml来直接设置好头部及悬浮头部位置布局

在这里插入图片描述

具体的实现可以参考Android 仿京东、拼多多商品分类页这篇文章

优点：

  • 悬浮头部和itemView的头部均可点击
  • 实现便捷

缺点：

  • 每个ItemView的头部样式都一样，不可以来动态的更改

方式二：通过ItemDecoration方式来实现

固定头部通过onDraw()方法来绘制，悬浮头部通过onDrawOver()方法绘制。

这种方法在Android购物车效果实现(RecyclerView悬浮头部实现)中使用过，原理差不多，但是

当时写的比较复杂，主要麻烦在两点：

1、数据项格式太复杂，之前实现的方式是将数据进行整合后，将右侧所有的子项形成一个集合，然后用一个RecyclerView来展示，这样导致左右联动，右侧滑动找左侧父id时，很麻烦。

2、绘制悬浮头部和各组的标题头时，是在onDraw()和onDrawOver()中来绘制的，对于简单的TextView还可以，但是对于一些复杂的头部的话绘制就比较复杂，尤其是不太擅长的小白那就更别说了。

改善点

1、使用源数据的分组结构，左右两侧的数据均使用同一集合，右侧列表的ItemView由RecyclerView组成，这样实现了右侧的数据分组，而不再是将数据分开后再重新分组。这样做可以使左右联动更方便，左右联动只需各自将相同位置的ItemView项展示出来即可。

2、组标题和悬浮头部的绘制使用xml加载布局并在onDraw()和onDrawOver()中绘制，可以实现复杂头部简单加载

难点：

  • 如何使用xml布局来连续绘制到Canvas里
  • 在onDrawOver()中如何绘制实现悬浮头部

优点：

  • 可以动态给每个ItemView都设置不一样的头部布局
  • 切换头部布局和悬浮头部很方便，解耦，直接替换就好

缺点：

  • 悬浮头部和子项头部都不能点击

实现步骤

这里主要介绍下使用ItemDecoration的方式来绘制分组头部布局的实现方法。

1、数据项格式

这里数据使用Android 仿京东、拼多多商品分类页内提供的数据，格式如下

在这里插入图片描述

2、左侧列表适配器

增加点击事件，当点击position位置时，让右侧recyclerView的position项滑动到顶部即可

leftAdapter.setLeftClickListener(object : LeftAdapter.LeftClickListener {override fun onItemClick(position: Int) {var layoutManager = binding.rightRcy.layoutManager as LinearLayoutManager//将position该位置的itemView移动到第一项layoutManager.scrollToPositionWithOffset(position, 0)}
})

3、右侧列表适配器

增加滑动监听，实现两个功能：

  • 当滑动时，实时获取右侧第一个可见项所在的位置position，同时将左侧RecyclerView的position项选中
  • 当滑动到底部且无法下滑时，将左侧RecyclerView的最后一项选中
  • 后续可以增加：如果左侧选中项位置太低，将其滑动到上方来的操作
binding.rightRcy.addOnScrollListener(object :RecyclerView.OnScrollListener(){
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {super.onScrollStateChanged(recyclerView, newState)
}override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {super.onScrolled(recyclerView, dx, dy)//无法下滑，移动到最后时，将左侧列表的最后一项设置为选中if (!recyclerView.canScrollVertically(1)) {leftAdapter.setSelectedNum(dataList.size-1)}//右侧列表可以滑动else {val rightLayoutManager = binding.rightRcy.layoutManager as LinearLayoutManagerval position = rightLayoutManager.findFirstVisibleItemPosition()leftAdapter.setSelectedNum(position)}
}
})

4、头部及悬浮头部绘制

4.1头部偏移高度为要绘制xml布局的高度–getItemOffsets()

override fun getItemOffsets(outRect: Rect,view: View,parent: RecyclerView,state: RecyclerView.State,
) {super.getItemOffsets(outRect, view, parent, state)if (headTitleView == null) {headTitleView =LayoutInflater.from(parent.context).inflate(R.layout.head_itemview, null, false)val width = parent.layoutManager?.width?:0headTitleView?.measure(View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))}headTitleView?.let {//距离ItemView的上方偏移topHeight高度outRect.top = it.measuredHeight}
}

这里我们首先需要加载headTitleView布局，然后获取该布局的高度，最后通过outRect.top来偏移该布局的高度，后面我们在onDraw()和onDrawOver()方法里分别绘制头部和悬浮头部。

注意：

  • View的宽高属性在measure()方法调用之前都是默认值，不反映实际情况。

    measure()方法是用来测量View的大小的，它会根据父容器传递的限制条件(例如这里的width和height参数)来确定View的实际宽高。

    所以在获取View的宽高之前，需要先调用measure()方法，否则得到的只是默认值，不符合实际需要，调用它之后才能保证后续的宽高数据是准确的。

  • 这里使用layoutManager来获取recyclerview的宽度，因为在此处直接调用parent.width 或parent.measuredWidth方法获取到的宽度均为0

    • getItemOffsets在RecyclerView完成布局和测量前调用，这时measuredWidth还没准备好，所以获取到的宽度为0
    • layoutManager可以获取到RecyclerView的宽高限制条件spec，知道RecyclerView的宽高限制，所以只能通过layoutManager.width获取宽度，measuredWidth无效

  • 这里的头部布局如下，建议在最外层套一层

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="@drawable/sp_headtitle"android:layout_gravity="center_horizontal"><ImageViewandroid:layout_width="129dp"android:layout_height="match_parent"android:layout_alignParentRight="true"android:src="@mipmap/ic_bg"android:scaleType="fitXY"/><TextViewandroid:id="@+id/tvTitle"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="头部标题"android:textColor="@color/black"android:textSize="18sp" /></RelativeLayout>
</FrameLayout>

    如果按如下方式写，否则会出现下面的情况

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="50dp"android:layout_gravity="center_horizontal"android:background="@drawable/sp_headtitle"><ImageViewandroid:layout_width="129dp"android:layout_height="match_parent"android:layout_alignParentRight="true"android:scaleType="fitXY"android:src="@mipmap/ic_bg" /><TextViewandroid:id="@+id/tvTitle"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="头部标题"android:textColor="@color/black"android:textSize="18sp" />
</RelativeLayout>

    在这里插入图片描述

  • 宽高设置

    val width = parent.layoutManager?.width?:0
headTitleView?.measure(View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY),View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
)

    宽度：
    因为我们头部布局的父容器为match_parent，且我们想绘制的宽度为占满右侧RecyclerView的宽度，所以这里View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.EXACTLY)用View.MeasureSpec.EXACTLY代表精确模式，将其设定为我们获取到的RecyclerView的宽度即可。

    其实使用View.MeasureSpec.makeMeasureSpec(width, View.MeasureSpec.AT_MOST)也可以，代表子View宽度不确定，但是最大为我们测量的RecyclerView的width即可。

    高度：

    因为我们加载headTitleView后，需要通过measure()方法测量后才可用，所以此时我们并不知道它的具体高度，所以不能用EXACTLY或AT_MOST模式，所以使用UNSPECIFIED，代表父容器不对子View有限制，子View要多大给多大

4.2 绘制固定头部–onDraw()

/*** 绘制头部*/
override fun onDraw(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {super.onDraw(c, parent, state)val childCount = parent.childCountfor (i in 0 until childCount) {val child = parent.getChildAt(i)val bottom = child.topheadTitleView?.let {val top = bottom - it.measuredHeightval itemView = parent.getChildAt(i)val position = parent.getChildAdapterPosition(itemView)//获取该位置的标题名称val groupTitleName = titleDataList[position].toUpperCase()//设置标题内容it.findViewById<TextView>(R.id.tvTitle).text = groupTitleName// 保存 Canvas 的状态c.save()// 平移 Canvas，使 View 绘制在正确位置c.translate(0f, top.toFloat())it.layout(0, top, parent.measuredWidth, bottom)it.draw(c)c.restore()}}
}

具体的头部绘制的位置，可参考前两篇文章Android购物车效果实现(RecyclerView悬浮头部实现)

自定义ItemDecoration分割线的高度、颜色、偏移，看完这个你就懂了

这里主要讲下注意事项

  • 设置title的名字要在draw()方法之前，不然你都绘制了，还在那设置名字没有意义

  • 因为右侧每个ItemView都是一组数据，该ItemView布局由一个RecyclerView构成，所以需要给每个ItemView都绘制头部布局，getItemOffsets() 是针对每一个 ItemView，而 onDraw()方法却是针对 RecyclerView 本身，所以在onDraw()方法中需要遍历屏幕上可见的ItemView来循环绘制。

  • 这里在绘制前分别调用了translate()、layout()方法：
    刚开始是直接调用 headTitleView.draw(canvas)，但发现并没有绘制出来，这是因为我们没有将Canvas平移到指定位置，直接绘制的话，头部View会默认绘制在Canvas的(0,0)坐标点，而我们期望它绘制在ItemView的顶部适当位置。通过translate平移和layout重新布局,可以重用同一个头部View来绘制不同Item的头部，避免重复创建View。

  • 这里在绘制前和绘制后分别调用了c.save()和c.restore()方法：

    保存Canvas状态可以防止绘制操作对Canvas产生影响，绘制完成后恢复状态可以保证不污染Canvas。

4.3 绘制悬浮头部-onDrawOver()

 override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {super.onDrawOver(c, parent, state)val itemView = parent.getChildAt(0)val position = parent.getChildAdapterPosition(itemView)var titleName = titleDataList[position].toUpperCase()val left = 0val right = parent.measuredWidth//默认的指定高度var height = headTitleView?.measuredHeight ?: 0//当前ItemView的底部var bottom = itemView.bottomif (bottom<height){height=bottom}headTitleView?.let {it.findViewById<TextView>(R.id.tvTitle).text = titleNamec.save()// 平移 Canvas，使 View 绘制在正确位置c.translate(0f, (height-it.measuredHeight).toFloat())it.layout(left, height-it.measuredHeight, right, height)it.draw(c)c.restore()}}

通过不断改变绘制的顶部和底部位置来实现被顶出的动画效果，这里不再详细阐述，具体可看Android购物车效果实现(RecyclerView悬浮头部实现)的第4小节
具体的绘制和onDraw()方法中的绘制流程一致。

总结

其实主要还是ItemDecoration相关的内容，相比较Android购物车效果实现(RecyclerView悬浮头部实现)的内容，不同点在于优化了数据项的分组使用和头部绘制使用xml两个地方，所以说做功能前还是要先考虑考虑数据该如何使用，不然会增加很多工作量。

如果本文对你有帮助，请别忘记三连，如果有不恰当的地方也请提出来，下篇文章见。

参考文章

MeasureSpec讲解

DividerItemDecoration.java

Android 仿京东、拼多多商品分类页

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/171234.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

互联网Java工程师面试题·微服务篇·第二弹

互联网Java工程师面试题·微服务篇·第二弹

目录 18、什么是 Spring 引导的执行器&#xff1f; 19、什么是 Spring Cloud&#xff1f; 20、Spring Cloud 解决了哪些问题&#xff1f; 21、在 Spring MVC 应用程序中使用 WebMvcTest 注释有什么用处&#xff1f; 22、你能否给出关于休息和微服务的要点&#xff1f; 23、…
阅读更多...
Crypto | Affine password 第二届“奇安信”杯网络安全技能竞赛

Crypto | Affine password 第二届“奇安信”杯网络安全技能竞赛

题目描述&#xff1a; 明文经过仿射函数y3x9加密之后变为JYYHWVPIDCOZ&#xff0c;请对其进行解密&#xff0c;flag的格式为flag{明文的大写形式}。 密文&#xff1a; JYYHWVPIDCOZ解题思路&#xff1a; 1、使用在线网站直接破解或手工计算破解&#xff0c;获得flag。&#xf…
阅读更多...
【ARM Trace32(劳特巴赫) 使用介绍 4 - Trace32 Discovery 详细介绍】

【ARM Trace32(劳特巴赫) 使用介绍 4 - Trace32 Discovery 详细介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 SYS.Detect1.2 AHBAPn/AXIAPnAPBAPn.Base1.1 SYS.Detect 在 TRACE32 中， SYS.Detect 是一个用来检测目标系统配置的命令。 当你执行 SYS.Detect DAP 命令时，TRACE32 将自动检测和识别目标系统上的 ARM De…
阅读更多...
lc307.区域和检索 - 数组可修改

lc307.区域和检索 - 数组可修改

暴力解法 创建方法&#xff0c;通过switch-case判断所需要调用的方法。 public class RegionsAndSertches {public static void main(String[] args) {String[] str new String[]{"NumArray", "sumRange", "update", "sumRange"};i…
阅读更多...
DevEco Studio开发工具下载、安装(HarmonyOS开发)_For Mac

DevEco Studio开发工具下载、安装(HarmonyOS开发)_For Mac

一、说明 初学HarmonyOS开发&#xff0c;DevEco Studio开发工具的安装和使用是必须的。 &#xff08;注&#xff1a;不多废话&#xff0c;跟着下面流程操作下载、安装DevEco Studio即可。&#xff09; 二、下载DevEco Studio 1.官网下载地址&#xff1a; https://developer.…
阅读更多...
全域全自主建设，亚信科技AntDB数据库助力广电5G业务上线运行

全域全自主建设，亚信科技AntDB数据库助力广电5G业务上线运行

自2019年6月&#xff0c;中国广电成功获得5G牌照以来&#xff0c;迅速推进网络建设目标&#xff0c;成为5G网络覆盖广、应用场景多、用户体验出色的第四大运营商。其依托全球独有的700MHz频谱资源&#xff0c;具备覆盖能力强、容量足、速率高的优势。通过不断深化和中国移动的共…
阅读更多...
数据复现-企业数字化转型与中国实体经济发展分析

数据复现-企业数字化转型与中国实体经济发展分析

数据简介&#xff1a;在当今快速发展的数字化时代&#xff0c;数字技术已经成为企业数字化转型的核心驱动力之一。尤其对于中国这样一个拥有庞大实体经济的国家而言&#xff0c;结合数字技术的应用&#xff0c;可以为企业带来前所未有的巨大机遇和挑战。在中国&#xff0c;实体…
阅读更多...
5 Paimon数据湖之表数据查询详解

5 Paimon数据湖之表数据查询详解

更多Paimon数据湖内容请关注&#xff1a;https://edu.51cto.com/course/35051.html 虽然前面我们已经讲过如何查询Paimon表中的数据了&#xff0c;但是有一些细节的东西还需要详细分析一下。 首先是针对Paimon中系统表的查询&#xff0c;例如snapshots\schemas\options等等这些…
阅读更多...
接口开放太麻烦？试试阿里云API网关吧

接口开放太麻烦？试试阿里云API网关吧

前言 我在多方合作时&#xff0c;系统间的交互是怎么做的&#xff1f;这篇文章中写过一些多方合作时接口的调用规则和例子&#xff0c;然而&#xff0c;接口开放所涉及的安全、权限、监控、流量控制等问题&#xff0c;可不是简简单单就可以解决的&#xff0c;这一般需要专业的…
阅读更多...
ElasticSearch简单操作

ElasticSearch简单操作

目录 1.单机部署 1.1 解压软件 1.2 创建软链接 1.3 修改配置文件 1.4 配置环境变量 1.5 后台启动 2.配置分词器 2.1 安装IK分词器 2.2 ES 扩展词汇 3.常用操作 3.1 索引 3.1.1 创建索引 3.1.2 查看所有索引 3.1.3 查看单个索引 3.1.4 删除索引 3.2.文档 3.2.1…
阅读更多...
@Async注解的坑

@Async注解的坑

问题描述 一个方法调用另一个方法(该方法使用Async注解)在同一个类文件中&#xff0c;该注解会失效&#xff01; 问题复现 TestAsyncController 类 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.scheduling.annotation.Async; im…
阅读更多...
双十一大促已过，虾皮、Lazada年底如何通过测评补单打造搜索排名

双十一大促已过，虾皮、Lazada年底如何通过测评补单打造搜索排名

双十一大促已过&#xff0c;有人欢喜有人忧&#xff0c;不管怎么样&#xff0c;年底的这波旺季还是要好好把握的。 如何提升虾皮搜索排名 1、标题关键词匹配度 Shopee、Lazada的排名规则主要是根据用户搜索时输入的关键字和卖家的商品标题、描述等是否相匹配来进行排名&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023