前言
-
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、2、3、5都用到
RecyclerView的基本知识，请看文章Android开发：ListView、AdapterView、RecyclerView全面解析 - 步骤 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'
}
步骤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>
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>
步骤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();
}
}
步骤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);
}
}
}
}
** 步骤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);
}
}
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);
4. 总结
- 通过本文，相信你的自定义
View库又多了一把杀器了！ - Carson带你学自定义View文章系列：
Carson带你学自定义View：自定义View基础
Carson带你学自定义View：一文梳理自定义View工作流程
Carson带你学自定义View：Measure过程
Carson带你学自定义View：Layout过程
Carson带你学自定义View：Draw过程
Carson带你学自定义View：手把手教你写一个完整的自定义View
Carson带你学自定义View：Canvas类全面解析
Carson带你学自定义View：Path类全面解析
欢迎关注Carson_Ho的简书
不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。
