转载自:http://blog.csdn.net/carson_ho/article/details/75005994
前言
-
Android
开发中,时间轴的UI
需求非常常见,如下图: -
本文将结合 自定义
View
&RecyclerView
的知识,手把手教你实现该常见 & 实用的自定义View
:时间轴
目录
1. 知识储备
本文采用 自定义View
& RecyclerView
实现时间轴,所以必须先了解相关知识:
1.1 RecyclerView
-
RecyclerView
的基础使用:Android开发:ListView、AdapterView、RecyclerView全面解析 -
RecyclerView
的高级使用:教你玩转 Android RecyclerView:深入解析 RecyclerView.ItemDecoration类(含实例讲解)
1.2 自定义View
具体请看文章 Canvas类的最全面详解 - 自定义View应用系列
2. 具体实现
下面,我将手把手教你实现 时光轴的效果。
2.1 效果图
2.2 实现思路
2.3 实现步骤
- 导入 使用
RecyclerView
的包 - 设置主布局 &
RecyclerView
的Item
布局 - 设置
RecyclerView
的Adapter
- 自定义
RecyclerView.ItemDecoration
类 - 初始化
RecyclerView
& 绑定数据
特别注意
1. 步骤1、2、3、5都用到RecyclerView
的基本知识,请看文章Android开发:ListView、AdapterView、RecyclerView全面解析
2. 步骤 4 涉及到RecyclerView
高级使用 & 自定义View的知识,具体请看Canvas类的最全面详解 - 自定义View应用系列 & 教你玩转 Android RecyclerView:深入解析 RecyclerView.ItemDecoration类(含实例讲解)
2.4 步骤说明
步骤1:导入 使用 RecyclerView
的包
build.gradle
dependencies {
...
compile 'com.android.support:recyclerview-v7:23.2.0'
}
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
步骤2:设置主布局 & RecyclerView
的Item
布局
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal"
/>
</RelativeLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
list_cell.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:text="New Text"
android:id="@+id/Itemtitle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:textSize="10sp"
android:id="@+id/Itemtext"
android:layout_below="@+id/Itemtitle"/>
</LinearLayout>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
步骤3:设置RecyclerView
的 Adapter
MyAdapter.Java
public class MyAdapter extends RecyclerView.Adapter {
private LayoutInflater inflater;
private ArrayList<HashMap<String, Object>> listItem;
//构造函数,传入数据
public MyAdapter(Context context, ArrayList<HashMap<String, Object>> listItem) {
inflater = LayoutInflater.from(context);
this.listItem = listItem;
}
//定义Viewholder
class Viewholder extends RecyclerView.ViewHolder {
private TextView Title, Text;
public Viewholder(View root) {
super(root);
Title = (TextView) root.findViewById(R.id.Itemtitle);
Text = (TextView) root.findViewById(R.id.Itemtext);
}
public TextView getTitle() {
return Title;
}
public TextView getText() {
return Text;
}
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new Viewholder(inflater.inflate(R.layout.list_cell, null));
}//在这里把ViewHolder绑定Item的布局
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
Viewholder vh = (Viewholder) holder;
// 绑定数据到ViewHolder里面
vh.Title.setText((String) listItem.get(position).get("ItemTitle"));
vh.Text.setText((String) listItem.get(position).get("ItemText"));
}
//返回Item数目
@Override
public int getItemCount() {
return listItem.size();
}
}
- 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
- 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
步骤4:自定义RecyclerView.ItemDecoration
类
- 此步骤就是该实例的实现关键,具体思路请看下图:
阅读前请先看文章:教你玩转 Android RecyclerView:深入解析 RecyclerView.ItemDecoration类(含实例讲解)
- 具体代码实现
DividerItemDecoration.java
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
// 写右边字的画笔(具体信息)
private Paint mPaint;
// 写左边日期字的画笔( 时间 + 日期)
private Paint mPaint1;
private Paint mPaint2;
// 左 上偏移长度
private int itemView_leftinterval;
private int itemView_topinterval;
// 轴点半径
private int circle_radius;
// 图标
private Bitmap mIcon;
// 在构造函数里进行绘制的初始化,如画笔属性设置等
public DividerItemDecoration(Context context) {
// 轴点画笔(红色)
mPaint = new Paint();
mPaint.setColor(Color.RED);
// 左边时间文本画笔(蓝色)
// 此处设置了两只分别设置 时分 & 年月
mPaint1 = new Paint();
mPaint1.setColor(Color.BLUE);
mPaint1.setTextSize(30);
mPaint2 = new Paint();
mPaint2.setColor(Color.BLUE);
// 赋值ItemView的左偏移长度为200
itemView_leftinterval = 200;
// 赋值ItemView的上偏移长度为50
itemView_topinterval = 50;
// 赋值轴点圆的半径为10
circle_radius = 10;
// 获取图标资源
// mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
}
// 重写getItemOffsets()方法
// 作用:设置ItemView 左 & 上偏移长度
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
// 设置ItemView的左 & 上偏移长度分别为200 px & 50px,即此为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);
/**
* 绘制轴点
*/
// 轴点 = 圆 = 圆心(x,y)
float centerx = child.getLeft() - itemView_leftinterval / 3;
float centery = child.getTop() - itemView_topinterval + (itemView_topinterval + child.getHeight()) / 2;
// 绘制轴点圆
c.drawCircle(centerx, centery, circle_radius, mPaint);
// 通过Canvas绘制角标
// c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);
/**
* 绘制上半轴线
*/
// 上端点坐标(x,y)
float upLine_up_x = centerx;
float upLine_up_y = child.getTop() - 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);
/**
* 绘制下半轴线
*/
// 上端点坐标(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("13:40", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (1):
// 设置日期绘制位置
c.drawText("17:33", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (2):
// 设置日期绘制位置
c.drawText("20:13", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (3):
// 设置日期绘制位置
c.drawText("11:40", Text_x, Text_y, mPaint1);
c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
break;
case (4):
// 设置日期绘制位置
c.drawText("13:20", Text_x, Text_y, mPaint1);
c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
break;
case (5):
// 设置日期绘制位置
c.drawText("22:40", Text_x, Text_y, mPaint1);
c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
break;
default:c.drawText("已签收", Text_x, Text_y, mPaint1);
}
}
}
}
- 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
- 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
步骤5:初始化RecyclerView
& 绑定数据
MainActivity.java
public class MainActivity extends AppCompatActivity {
private RecyclerView Rv;
private ArrayList<HashMap<String,Object>> listItem;
private MyAdapter myAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化显示的数据
initData();
// 绑定数据到RecyclerView
initView();
}
// 初始化显示的数据
public void initData(){
listItem = new ArrayList<HashMap<String, Object>>();/*在数组中存放数据*/
HashMap<String, Object> map1 = new HashMap<String, Object>();
HashMap<String, Object> map2 = new HashMap<String, Object>();
HashMap<String, Object> map3 = new HashMap<String, Object>();
HashMap<String, Object> map4 = new HashMap<String, Object>();
HashMap<String, Object> map5 = new HashMap<String, Object>();
HashMap<String, Object> map6 = new HashMap<String, Object>();
map1.put("ItemTitle", "美国谷歌公司已发出");
map1.put("ItemText", "发件人:谷歌 CEO Sundar Pichai");
listItem.add(map1);
map2.put("ItemTitle", "国际顺丰已收入");
map2.put("ItemText", "等待中转");
listItem.add(map2);
map3.put("ItemTitle", "国际顺丰转件中");
map3.put("ItemText", "下一站中国");
listItem.add(map3);
map4.put("ItemTitle", "中国顺丰已收入");
map4.put("ItemText", "下一站广州华南理工大学");
listItem.add(map4);
map5.put("ItemTitle", "中国顺丰派件中");
map5.put("ItemText", "等待派件");
listItem.add(map5);
map6.put("ItemTitle", "华南理工大学已签收");
map6.put("ItemText", "收件人:Carson");
listItem.add(map6);
}
// 绑定数据到RecyclerView
public void initView(){
Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
//使用线性布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
Rv.setLayoutManager(layoutManager);
Rv.setHasFixedSize(true);
//用自定义分割线类设置分割线
Rv.addItemDecoration(new DividerItemDecoration(this));
//为ListView绑定适配器
myAdapter = new MyAdapter(this,listItem);
Rv.setAdapter(myAdapter);
}
}
- 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
- 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
2.5 结果展示
2.6 源码地址
Carson_Ho的Github地址:自定义View实践 - 时间轴
希望大家动动手指给个
Star
呗, 嘻嘻!
3. 扩展使用
- 此次的扩展使用是为了更加丰富UI效果:将轴点圆圈改成图标,如下图:
- 代码实现
private Bitmap mIcon;
// 获取图标资源
mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
// 在步骤4中,绘制轴点圆圈处 通过Canvas绘制该图
c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7