正文

Android实现列表时间轴

︶ㄣ速达网 メ
米米素材网V管理员 / 阅读
0707

这篇文章主要为大家详细介绍了Android实现列表时间轴效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Android列表时间轴展示的具体代码，供大家参考，具体内容如下

实现的效果图如下:

Android实现列表时间轴

实现的方式是利用recycleview的ItemDecoration这个抽象类,就是我们经常用来画分割线的的这个类,
具体如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
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);
   }
  }
 }
 
}

使用比较简单:

?
1
2
3
4
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(this);
  dividerItemDecoration.setMonthList(monthList);
  dividerItemDecoration.setYearList(yearList);
  mRecyclerView.addItemDecoration(dividerItemDecoration);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持米米素材网。

原文链接：https://blog.csdn.net/sinat_35670989/article/details/79591728