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

时间:2023-01-27 10:06:50

前言

  • Android开发中,时间轴的 UI需求非常常见,如下图:
    Android 自定义View实战系列 :时间轴

  • 本文将结合 自定义View & RecyclerView的知识,手把手教你实现该常见 & 实用的自定义View:时间轴


目录

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


1. 知识储备

本文采用 自定义View & RecyclerView 实现时间轴,所以必须先了解相关知识:

1.1 RecyclerView

1.2 自定义View

具体请看文章 Canvas类的最全面详解 - 自定义View应用系列


2. 具体实现

下面,我将手把手教你实现 时光轴的效果。

2.1 效果图

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

2.2 实现思路

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

2.3 实现步骤

  1. 导入 使用 RecyclerView的包
  2. 设置主布局 & RecyclerViewItem布局
  3. 设置RecyclerViewAdapter
  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'
}

步骤2:设置主布局 & RecyclerViewItem布局
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:设置RecyclerViewAdapter
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 自定义View实战系列 :时间轴

阅读前请先看文章教你玩转 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 结果展示

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

2.6 源码地址

Carson_Ho的Github地址:自定义View实践 - 时间轴

希望大家动动手指给个 Star 呗, 嘻嘻!


3. 扩展使用

  • 此次的扩展使用是为了更加丰富UI效果:将轴点圆圈改成图标,如下图:

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

  • 代码实现
      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 库又多了一把杀器了!
  • 下一篇文章我将对讲解Android 自定义 View相关知识,有兴趣可以继续关注Carson_Ho的安卓开发笔记

请帮顶或评论点赞!因为你的鼓励是我写作的最大动力!