Android 自定义View实战系列 ：时间轴

转载自：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 实现步骤

1. 导入 使用 RecyclerView的包
2. 设置主布局 & RecyclerView的Item布局
3. 设置RecyclerView的 Adapter
4. 自定义RecyclerView.ItemDecoration类
5. 初始化 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