Android
开发中,时间轴的 UI
需求非常常见,如下图:
View
& RecyclerView
的知识,手把手教你实现该常见 & 实用的自定义View
:时间轴本文采用 自定义View
& RecyclerView
实现时间轴,所以必须先了解相关知识:
RecyclerView
的基础使用:Android开发:ListView、AdapterView、RecyclerView全面解析RecyclerView
的高级使用:教你玩转 Android RecyclerView:深入解析 RecyclerView.ItemDecoration类(含实例讲解)具体请看文章 Canvas类的最全面详解 - 自定义View应用系列
下面,我将手把手教你实现 时光轴的效果。
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类(含实例讲解)
步骤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);
}
}
Carson_Ho的Github地址:自定义View实践 - 时间轴
希望大家动动手指给个
Star
呗, 嘻嘻!
private Bitmap mIcon;
// 获取图标资源
mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
// 在步骤4中,绘制轴点圆圈处 通过Canvas绘制该图
c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);
View
库又多了一把杀器了!Android
自定义 View
相关知识,有兴趣可以继续关注Carson_Ho的安卓开发笔记