Android实现列表时间轴
时间:2019-04-15
本文章向大家介绍Android实现列表时间轴,主要包括Android实现列表时间轴使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了Android列表时间轴展示的具体代码,供大家参考,具体内容如下
实现的效果图如下:
实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类,
具体如下
public class DividerItemDecoration extends RecyclerView.ItemDecoration{ // 写右边字的画笔(具体信息) private Paint mPaint; // 写左边日期字的画笔( 时间 + 日期) private Paint mPaint1; private Paint mPaint2; private Paint mPaint3; // 左 上偏移长度 private int itemView_leftinterval; private int itemView_topinterval; // 轴点半径 private int circle_radius; // 图标 private Bitmap mIcon; //月份合集(使用时需要设置) private List<String> monthList= new ArrayList<>(); //年份合集(使用时需要设置) private List<String> yearList= new ArrayList<>(); public void setMonthList(List<String> monthList) { this.monthList = monthList; } public void setYearList(List<String> yearList) { this.yearList = yearList; } // 在构造函数里进行绘制的初始化,如画笔属性设置等 public DividerItemDecoration(Context context) { // 轴点画笔(红色) mPaint = new Paint(); mPaint.setColor(Color.rgb(58, 154, 239)); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(3); // 左边时间文本画笔(蓝色) // 此处设置了两只分别设置 时分 & 年月 mPaint1 = new Paint(); mPaint1.setColor(Color.BLACK); mPaint1.setTextSize(30); mPaint2 = new Paint(); mPaint2.setColor(context.getResources().getColor(R.color.divider)); mPaint2.setTextSize(26); mPaint3 = new Paint(); mPaint3.setColor(Color.rgb(58, 154, 239)); mPaint3.setTextSize(20); // 赋值ItemView的左偏移长 itemView_leftinterval = 150; // 赋值ItemView的上偏移长度 itemView_topinterval = 30; // 赋值轴点圆的半径为10 circle_radius = 8; } // 重写getItemOffsets()方法 // 作用:设置ItemView 左 & 上偏移长度 @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); // 设置ItemView的左 & 上偏移长度分别为150 px & 30px,即此为onDraw()可绘制的区域 outRect.set(itemView_leftinterval, itemView_topinterval, 0, 0); } // 重写onDraw() // 作用:在间隔区域里绘制时光轴线 & 时间文本 @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); // 获取RecyclerView的Child view的个数 int childCount = parent.getChildCount(); // 遍历每个Item,分别获取它们的位置信息,然后再绘制对应的分割线 for (int i = 0; i < childCount; i++) { // 获取每个Item对象 View child = parent.getChildAt(i); View lastChild = null; if (i > 0) { lastChild = parent.getChildAt(i - 1); } /** * 绘制轴点 */ // 轴点 = 圆 = 圆心(x,y) 位置可以根据需求来调节 float centerx = child.getLeft() - itemView_leftinterval / 4; float centery = child.getTop() + itemView_topinterval +10; // 绘制轴点圆 c.drawCircle(centerx, centery, circle_radius, mPaint); /** * 绘制上半轴线(x轴是保持不变的) */ // 上端点坐标(x,y) float upLine_up_x = centerx; float upLine_up_y = 0; if (i>0){ upLine_up_y = lastChild.getBottom(); }else { upLine_up_y = centery - itemView_topinterval; } // 下端点坐标(x,y) float upLine_bottom_x = centerx; float upLine_bottom_y = centery - circle_radius; //绘制上半部轴线 c.drawLine(upLine_up_x, upLine_up_y, upLine_bottom_x, upLine_bottom_y, mPaint); /** * 绘制下半轴线,最后一个不画下半轴 */ if (i <childCount-1){ // 上端点坐标(x,y) float bottomLine_up_x = centerx; float bottom_up_y = centery + circle_radius; // 下端点坐标(x,y) float bottomLine_bottom_x = centerx; float bottomLine_bottom_y = child.getBottom(); //绘制下半部轴线 c.drawLine(bottomLine_up_x, bottom_up_y, bottomLine_bottom_x, bottomLine_bottom_y, mPaint); } /** * 绘制左边时间文本 */ // 获取每个Item的位置 int index = parent.getChildAdapterPosition(child); // 设置文本起始坐标 float Text_x = child.getLeft() - itemView_leftinterval * 5 / 6; float Text_y = upLine_bottom_y; // 根据Item位置设置时间文本 switch (index) { case (0): // 设置日期绘制位置 c.drawText(monthList.get(0), Text_x, Text_y, mPaint1); c.drawText(yearList.get(0), Text_x + 8, Text_y + 28, mPaint2); break; case (1): // 设置日期绘制位置 c.drawText(monthList.get(1), Text_x, Text_y, mPaint1); c.drawText(yearList.get(1), Text_x + 8, Text_y + 28, mPaint2); break; case (2): // 设置日期绘制位置 if (TextUtils.isEmpty(yearList.get(2))){ c.drawText(monthList.get(2), Text_x, Text_y, mPaint3); }else { c.drawText(monthList.get(2), Text_x, Text_y, mPaint1); c.drawText(yearList.get(2), Text_x + 8, Text_y + 28, mPaint2); } break; case (3): // 设置日期绘制位置 c.drawText(monthList.get(3), Text_x, Text_y, mPaint1); c.drawText(yearList.get(3), Text_x + 8, Text_y + 28, mPaint2); break; case (4): // 设置日期绘制位置 c.drawText(monthList.get(4), Text_x, Text_y, mPaint1); c.drawText(yearList.get(4), Text_x + 8, Text_y + 28, mPaint2); break; default:c.drawText("结束", Text_x, Text_y, mPaint1); } } } }
使用比较简单:
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(this); dividerItemDecoration.setMonthList(monthList); dividerItemDecoration.setYearList(yearList); mRecyclerView.addItemDecoration(dividerItemDecoration);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- HTML5中类jQuery选择器querySelector的使用
- Ceph 集群整体迁移方案
- CSS3矩阵变换
- 可直接运行
- Ryu:网络时延探测应用
- box布局
- Event Loop
- 把图片变成字体,然后在引入到网页
- Flutter环境搭建
- java.net.ConnectException: Call From slaver1/192.168.19.128 to slaver1:8020 failed on connection exc
- 18/03/18 04:53:44 WARN TaskSchedulerImpl: Initial job has not accepted any resources; check your clu
- 技术干货 | Hadoop3.0稳定版安装攻略来啦!
- ios逆向工具MonkeyDev简介
- 自定义下拉列表
- java教程
- Java快速入门
- Java 开发环境配置
- Java基本语法
- Java 对象和类
- Java 基本数据类型
- Java 变量类型
- Java 修饰符
- Java 运算符
- Java 循环结构
- Java 分支结构
- Java Number类
- Java Character类
- Java String类
- Java StringBuffer和StringBuilder类
- Java 数组
- Java 日期时间
- Java 正则表达式
- Java 方法
- Java 流(Stream)、文件(File)和IO
- Java 异常处理
- Java 继承
- Java 重写(Override)与重载(Overload)
- Java 多态
- Java 抽象类
- Java 封装
- Java 接口
- Java 包(package)
- Java 数据结构
- Java 集合框架
- Java 泛型
- Java 序列化
- Java 网络编程
- Java 发送邮件
- Java 多线程编程
- Java Applet基础
- Java 文档注释
- 「R」数据可视化21: Edge Bunding图
- 一个服务器能干什么?
- 按照说明做了 ,还是没有点亮网关,一直离线模式
- iOS音视频接入-快速集成TRTC SDK
- 基于Flink快速开发实时TopN程序最简单的思路
- MySQL+Flask,在本地实现一个API接口。
- Java新特性:数据类型可以扔掉了?
- 使用Flask在服务器实现一个API接口。
- 深入理解谷歌最强V8垃圾回收机制
- 用Python下载抖音无水印视频!
- 多年管理系统开发经验总结~代码解决方案
- 分析B站100万+视频,发现竟然有这么多干货资源。
- Pandas,数据处理的好帮手!
- 如何用Python,制作疫情可视化大屏?
- vue实战电商管理后台