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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android实现快递物流时间轴效果

    本文实例为大家分享了Android实现快递物流时间轴效果展示的具体代码,供大家参考,具体内容如下 首先,这篇参考了别人的代码.根据自己的项目需求简单改造了一下,效果图如下 xml:代码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:lay

  • Android控件之使用ListView实现时间轴效果

     实现思路: 该View是通过ListView实现的,通过实体两个字段内容content和时间time来展示每个ListItem 时间轴是使用上面一条线(20dp)和中间一个圆(15dp)和下面一条线(40dp)组装成的 在ListView中,设置其分割线为空,并且没有点击效果 效果图: 步骤一:使用xml画出一个灰色的圆点(time_cycle.xml) <?xml version="1.0" encoding="utf-8"?> <shape

  • Android自定义View实现垂直时间轴布局

    时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴,想必大家都不陌生,如下图: 分析 实现这个最常用的一个方法就是用ListView,我这里用继承LinearLayout的方式来实现.首先定义了一些自定义属性: attrs.xml <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable

  • 教你3分钟了解Android 简易时间轴的实现方法

    一.有段时间没更了,因为一直在思索,应该写点什么,真的是无比纠结.这一回,就给大家分享一款简便好用的,小编自制的土晾时间轴. 附上XML预览图: 效果图 注:小黄鸭不是效果哈,是为了保护个人隐私P上去的: 1.新建一个自定义控件: public class WorkExcView extends LinearLayout { private TextView dataLeft; private TextView dataRight; private TextView company; priva

  • Android自定义view仿淘宝快递物流信息时间轴

    学了Android有一段时间了,一直没有时间写博客,趁着周末有点空,就把自己做的一些东西写下来. 一方面锻炼一下自己的写文档的能力,另一方面分享代码的同时也希望能与大家交流一下技术,共同学习,共同进步. 废话不多少说,我们先来看看我们自定义view要实现的效果: 效果图 自定义属性 <resources> <declare-styleable name="TimeLineView"> <attr name="timelineRadius"

  • Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • Android自定义时间轴的实现过程

    本文讲述Android自定义时间轴的实现过程,供大家参考,具体内容如下 相关视频链接: Android自定义控件系列 http://edu.csdn.net/course/detail/3719/65396 Android视频全系列 http://edu.csdn.net/course/detail/2741/43163 时间轴效果,实际上非常简单,就是listView中一个又一个的条目而已-.大家可以只关注一个条目. 首先展示一个条目的布局效果 <?xml version="1.0&qu

  • Android实现列表时间轴

    本文实例为大家分享了Android列表时间轴展示的具体代码,供大家参考,具体内容如下 实现的效果图如下: 实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类, 具体如下 public class DividerItemDecoration extends RecyclerView.ItemDecoration{ // 写右边字的画笔(具体信息) private Paint mPaint; // 写左边日期字的画笔( 时间 + 日期)

  • Android自定义控件实现时间轴

    本文实例为大家分享了Android自定义控件实现时间轴的具体代码,供大家参考,具体内容如下 由于项目中有需求,就简单的封装一个,先记录一下,有时间上传到github. 1.先增加自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="global_TimelineLayout"> <!--时间轴左

  • Android recyclerview实现纵向虚线时间轴的示例代码

    效果图 代码 package com.jh.timelinedemo; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.DashPathEffect; import android.graphics.Paint; import android.util.AttributeSet; import

随机推荐