[原创]recyclerview实现多行分组 给分组块加圆角.

2024-05-04 10:48

本文主要是介绍[原创]recyclerview实现多行分组 给分组块加圆角.,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如果用多个recyclerview 或者里面多套个adapter当我没说,这里的实现方式是通过.借助griviewmanager和item

效果图是要达到这样的.当然这也是我最后搞完的图.

29a5f9a7d0ecebe84ed456ae9ff84eb.jpg
需求:

标题作为1行 内容为3列任意行.
标题内容分组 给标题内容包裹区域加圆角.
只有内容无标题的分组 就给内容区域加圆角

遇到的问题

1.当内容未满3列,颜色为recyclerview颜色或背景色.
2.边距写的不对,导致内容被扭曲,某个item出现背景色而且未和其他行对其.
3.滑动的时候发现我绘制的颜色掉了(是我粗心用的i而不是适配器位置导致)
4.判断末尾行
如果是末尾行直接填充白色圆角
5.如果没有标题,直接给内容加上左 和上右圆角.
6.最底部的边距没得.

其它

直接什么都不做的时候,没有圆角,没有分割线.
设置内容item为3列,但是不满3列,会导致出现背景颜色,有些朋友可能直接设置recyclerview背景了,但是你怕是不要处理圆角了??

如何实现?

  1. 使用GridLayoutManager
    2.给GridLayoutManager 设置setSpanSizeLookup 如果是标题就合并 getSpanSize 表示合并的尺寸,如果是内容是3列,那么这里返回3.否则返回1 ,
  2. 设置ItemDecoration 用getItemOffsets 控制间隔 ,
  3. 设置ItemDecoration 用public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
int spanSize = layoutManager.getSpanSizeLookup().getSpanSize(childAdapterPosition);

主要用于判断当前组是不是0,最后一组我用的另外的方法,组0 index=0, 代表是头部,如果是标题就绘制整个,如果内容 index=0也绘制 ,额好像不需要用到spanGroupIndex我记得用到过得

int spanGroupIndex = layoutManager.getSpanSizeLookup().getSpanGroupIndex(childAdapterPosition, spanCount);
int spanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(childAdapterPosition, spanCount); //比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。

用于判断是否是最后一行

int itemCount = parent.getLayoutManager().getItemCount();

用于预测下一个是不是标题,是标题那么现在就应该开始绘制下半身的圆角,以及如果内容item列不满足总列数,就绘制弥补空白处.

int lastspanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(itemCount-1, spanCount); //比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。

下面是具体写完之后的代码.

绘制空缺块和圆角块.
下图红色代表填充的空缺快,最后一组的填充则是绿色 , 头部是蓝色圆角 , 非最后一组底部圆角填充了黄色,我这样做只是为了调试,弄完之后我就把颜色改成白色了..
经常用到的判断
判断当前是跨了几行,用于判断是否是标题

GridLayoutManager layoutManager = new GridLayoutManager(recyclerView.getContext(), spanCount, LinearLayoutManager.VERTICAL, false);recyclerView.setLayoutManager(layoutManager);layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {@Overridepublic int getSpanSize(int position) {int type = recyclerView.getAdapter().getItemViewType(position);if (position >= recyclerView.getAdapter().getItemCount()) {return NOT_FOUND_SPAN_SIZE;} else if (type == TYPE_MENU_GROUP_NAME) {return MENU_TITLE_SPAN_SIZE;} else if (type == TYPE_GROUP_DATA) {return 1;} else {return NOT_FOUND_SPAN_SIZE;//这是 decoration调用的。}}@Overridepublic int getSpanIndex(int position, int spanCount) {int spanIndex = super.getSpanIndex(position, spanCount);Log.w(TAG, "spanIndex" + spanIndex + ",pos" + position + ",spanCount:" + spanCount);return spanIndex;}@Overridepublic int getSpanGroupIndex(int adapterPosition, int spanCount) {int spanGroupIndex = super.getSpanGroupIndex(adapterPosition, spanCount);Log.w(TAG, "spanGroupIndex" + spanGroupIndex + ",adapterPosition" + adapterPosition + ",spanCount:" + spanCount);return spanGroupIndex;}});

绘制圆角和空缺快设置代码

for (int ix = 0; ix < childCount; ix++) {final View child = parent.getChildAt(ix);int position = parent.getChildAdapterPosition(child);GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();int spanCount = layoutManager.getSpanCount();//表示整个列表分多少列int spanSize = layoutManager.getSpanSizeLookup().getSpanSize(position);//表示当前格所占有的格子数int spanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(position, spanCount); //这里参数是spanCount,不是spanSize,否则不对,比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。if (BuildConfig.DEBUG) {
//                MyAppListAdapter adapter = (MyAppListAdapter) parent.getAdapter();
//                SubMenuItemI subMenuItemI = adapter.getData().get(position);
//                int spanSizeNext = layoutManager.getSpanSizeLookup().getSpanSize(position + 1);}if (spanSize != MENU_TITLE_SPAN_SIZE) {//普通item只会跨1个。 除非是菜单int spanGroupIndex = layoutManager.getSpanSizeLookup().getSpanGroupIndex(position, spanCount);int spanSizeNext = layoutManager.getSpanSizeLookup().getSpanSize(position + 1);if (spanIndex < MENU_TITLE_SPAN_SIZE - 1) {// MENU_TITLE_SPAN_SIZE 等于new GridManager里面的Count,这里用合并的数来判断也可以做,是否属于最后一个格子,但是最后一个格子又是否铺满整个屏幕是最后一个但是没有刚好没铺满,就把它给铺满。if (spanSizeNext == NOT_FOUND_SPAN_SIZE || spanSizeNext == MENU_TITLE_SPAN_SIZE) {//如果下一个不存在那么是最后一个,或者下一个是标题了。drawable = generateDrawable(-1);//补空缺boundAndDraw(c, child.getRight(), right, drawable, child.getTop(), child.getBottom());//这里没有任何圆角if (BuildConfig.DEBUG) {/*                MyAppListAdapter adapter = (MyAppListAdapter) parent.getAdapter();SubMenuItemI subMenuItemI = adapter.getData().get(position);Log.w(TAG, subMenuItemI + ",为最后一个前后面超出!spanIndex:" + spanIndex + ",spanSize:" + spanSize + ",height:" + child.getHeight());*/}}}if (spanSizeNext == NOT_FOUND_SPAN_SIZE || spanSizeNext == MENU_TITLE_SPAN_SIZE) {// 刚好铺满的那种 铺满还需要判断是否下一行是否是标题.//左下角圆角.drawable = generateDrawable(5);//,spanSizeNext == NOT_FOUND_SPAN_SIZE ?Color.GREEN:Color.YELLOW);int top = child.getTop() + child.getHeight();int bottom = (int) (top + radius);
//                            Log.w(TAG,"LEFT:"+left+",top:"+top+",right:"+right+",bottom:"+bottom);boundAndDraw(c, left, right, drawable, top, bottom);}if( spanGroupIndex==0&&position==0){//没有头部 的顶drawable = generateDrawable(4);int top = (int) (child.getTop() - radius);int bottom = child.getTop();boundAndDraw(c, left, right, drawable, top, bottom);}} else {//标题头drawable = generateDrawable(4);int top = (int) (child.getTop() - radius);int bottom = child.getTop();boundAndDraw(c, left, right, drawable, top, bottom);}}}private void debugDrwa(Canvas c, int left, int right, View child) {//以下计算主要用来确定绘制的位置final int top1 = child.getBottom() + 1;ColorDrawable drawable1 = new ColorDrawable(Color.BLUE);final int bottom = top1 + drawable1.getIntrinsicHeight();boundAndDraw(c, left, right, drawable1, top1, bottom);}/*** /外矩形 0左上、1右上、2 右下、3左下的圆角半 4 上 左和右边 5 ,下 左右。** @param type* @return*/private GradientDrawable generateDrawable(int type, int color) {this.color = color;return generateDrawable(type);}

测距代码 测距就是给view留空间,不留空间就绘制在一坨了.

int childAdapterPosition = parent.getChildAdapterPosition(view);GridLayoutManager layoutManager = (GridLayoutManager) parent.getLayoutManager();int spanCount = layoutManager.getSpanCount(); //构造时传递的参数.//DefaultSpanSizeLookupint spanSize = layoutManager.getSpanSizeLookup().getSpanSize(childAdapterPosition);int spanGroupIndex = layoutManager.getSpanSizeLookup().getSpanGroupIndex(childAdapterPosition, spanCount);if (spanSize == MENU_TITLE_SPAN_SIZE) { //标题才跨 3个。
//            if (needTop) {if (spanGroupIndex == 0) {outRect.top = (int) (getSpace() + radius);} else {outRect.top = (int) (getSpace() + (radius*2));}
//            }} else  {outRect.top = 0;outRect.left = 0;outRect.right = 0;if( spanGroupIndex==0){//没有头部 的顶outRect.top = (int) (getSpace()  + radius);}else{outRect.top = 0;}int spanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(childAdapterPosition, spanCount); //比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。int itemCount = parent.getLayoutManager().getItemCount();int lastspanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(itemCount-1, spanCount); //比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。if (childAdapterPosition>=itemCount-(lastspanIndex+1)) {//最后一行outRect.bottom= (int) (getSpace()+(radius/2));if(lastspanIndex==spanIndex&&(1+spanIndex!=MENU_TITLE_SPAN_SIZE)){
//                        outRect.right=30;//=parent.getRight()-parent.getPaddingRight();//写不写其实都一样,因为不绘制右边?不,应该说都铺满屏幕了,不怕控件没给够}//不能加right,会影响空间}}if (BuildConfig.DEBUG) {
//            int spanGroupIndex =;//1 23格子 或者 1列 都算一组,int spanIndex = layoutManager.getSpanSizeLookup().getSpanIndex(childAdapterPosition, spanCount); //比如第一个是标题 ,第二列是 3格子,标题的永远是0 ,分3列的则是0 12 这样的循环。groupindex就是 每一列的完毕  就算一组。/*       SubMenuItemI subMenuItemI = ((MyAppListAdapter) parent.getAdapter()).getData().get(childAdapterPosition);String title = subMenuItemI.getTitle();*/Log.w(TAG, "Decoration SpanIndex:" + spanIndex + ",groupindex:" + spanGroupIndex + ",spanSize:" + spanSize + ",model:" + "title" + ",adapterposition:" + childAdapterPosition);}

这篇关于[原创]recyclerview实现多行分组 给分组块加圆角.的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/959027

相关文章

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Docker部署Jenkins持续集成(CI)工具的实现

《Docker部署Jenkins持续集成(CI)工具的实现》Jenkins是一个流行的开源自动化工具,广泛应用于持续集成(CI)和持续交付(CD)的环境中,本文介绍了使用Docker部署Jenkins... 目录前言一、准备工作二、设置变量和目录结构三、配置 docker 权限和网络四、启动 Jenkins

Python3脚本实现Excel与TXT的智能转换

《Python3脚本实现Excel与TXT的智能转换》在数据处理的日常工作中,我们经常需要将Excel中的结构化数据转换为其他格式,本文将使用Python3实现Excel与TXT的智能转换,需要的可以... 目录场景应用:为什么需要这种转换技术解析:代码实现详解核心代码展示改进点说明实战演练:从Excel到

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

C# string转unicode字符的实现

《C#string转unicode字符的实现》本文主要介绍了C#string转unicode字符的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录1. 获取字符串中每个字符的 Unicode 值示例代码:输出:2. 将 Unicode 值格式化

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件?二、我们为什么需要使用whl文件来安装python库?三、我们应该去哪儿下

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi

Java中将异步调用转为同步的五种实现方法

《Java中将异步调用转为同步的五种实现方法》本文介绍了将异步调用转为同步阻塞模式的五种方法:wait/notify、ReentrantLock+Condition、Future、CountDownL... 目录异步与同步的核心区别方法一:使用wait/notify + synchronized代码示例关键