前言
-
Android開發(fā)中，時(shí)間軸的UI需求非常常見，如下圖：
示意圖 本文將結(jié)合 自定義
View&RecyclerView的知識(shí)，手把手教你實(shí)現(xiàn)該常見 & 實(shí)用的自定義View：時(shí)間軸
目錄
目錄
1. 知識(shí)儲(chǔ)備
本文采用 自定義View & RecyclerView 實(shí)現(xiàn)時(shí)間軸，所以必須先了解相關(guān)知識(shí)：
1.1 RecyclerView
RecyclerView的基礎(chǔ)使用：Android開發(fā)：ListView、AdapterView、RecyclerView全面解析RecyclerView的高級(jí)使用：教你玩轉(zhuǎn) Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實(shí)例講解）
1.2 自定義View
具體請(qǐng)看文章 Canvas類的最全面詳解 - 自定義View應(yīng)用系列
2. 具體實(shí)現(xiàn)
下面，我將手把手教你實(shí)現(xiàn) 時(shí)光軸的效果。
2.1 效果圖
示意圖
2.2 實(shí)現(xiàn)思路
示意圖
2.3 實(shí)現(xiàn)步驟
- 導(dǎo)入 使用
RecyclerView的包 - 設(shè)置主布局 &
RecyclerView的Item布局 - 設(shè)置
RecyclerView的Adapter - 自定義
RecyclerView.ItemDecoration類 - 初始化
RecyclerView& 綁定數(shù)據(jù)
特別注意
- 步驟1、2、3、5都用到
RecyclerView的基本知識(shí)，請(qǐng)看文章Android開發(fā)：ListView、AdapterView、RecyclerView全面解析 - 步驟 4 涉及到
RecyclerView高級(jí)使用 & 自定義View的知識(shí)，具體請(qǐng)看Canvas類的最全面詳解 - 自定義View應(yīng)用系列 & 教你玩轉(zhuǎn) Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實(shí)例講解）
2.4 步驟說明
** 步驟1：導(dǎo)入 使用 RecyclerView的包**
build.gradle
dependencies {
...
compile 'com.android.support:recyclerview-v7:23.2.0'
}
步驟2：設(shè)置主布局 & 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：設(shè)置RecyclerView的 Adapter
MyAdapter.java
public class MyAdapter extends RecyclerView.Adapter {
private LayoutInflater inflater;
private ArrayList<HashMap<String, Object>> listItem;
//構(gòu)造函數(shù)，傳入數(shù)據(jù)
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;
// 綁定數(shù)據(jù)到ViewHolder里面
vh.Title.setText((String) listItem.get(position).get("ItemTitle"));
vh.Text.setText((String) listItem.get(position).get("ItemText"));
}
//返回Item數(shù)目
@Override
public int getItemCount() {
return listItem.size();
}
}
步驟4：自定義RecyclerView.ItemDecoration類
- 此步驟就是該實(shí)例的實(shí)現(xiàn)關(guān)鍵，具體思路請(qǐng)看下圖：
示意圖
閱讀前請(qǐng)先看文章：教你玩轉(zhuǎn) Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實(shí)例講解）
- 具體代碼實(shí)現(xiàn)
DividerItemDecoration.java
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
// 寫右邊字的畫筆(具體信息)
private Paint mPaint;
// 寫左邊日期字的畫筆( 時(shí)間 + 日期)
private Paint mPaint1;
private Paint mPaint2;
// 左 上偏移長(zhǎng)度
private int itemView_leftinterval;
private int itemView_topinterval;
// 軸點(diǎn)半徑
private int circle_radius;
// 圖標(biāo)
private Bitmap mIcon;
// 在構(gòu)造函數(shù)里進(jìn)行繪制的初始化，如畫筆屬性設(shè)置等
public DividerItemDecoration(Context context) {
// 軸點(diǎn)畫筆(紅色)
mPaint = new Paint();
mPaint.setColor(Color.RED);
// 左邊時(shí)間文本畫筆(藍(lán)色)
// 此處設(shè)置了兩只分別設(shè)置 時(shí)分 & 年月
mPaint1 = new Paint();
mPaint1.setColor(Color.BLUE);
mPaint1.setTextSize(30);
mPaint2 = new Paint();
mPaint2.setColor(Color.BLUE);
// 賦值ItemView的左偏移長(zhǎng)度為200
itemView_leftinterval = 200;
// 賦值ItemView的上偏移長(zhǎng)度為50
itemView_topinterval = 50;
// 賦值軸點(diǎn)圓的半徑為10
circle_radius = 10;
// 獲取圖標(biāo)資源
// mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
}
// 重寫getItemOffsets（）方法
// 作用：設(shè)置ItemView 左 & 上偏移長(zhǎng)度
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
// 設(shè)置ItemView的左 & 上偏移長(zhǎng)度分別為200 px & 50px,即此為onDraw()可繪制的區(qū)域
outRect.set(itemView_leftinterval, itemView_topinterval, 0, 0);
}
// 重寫onDraw（）
// 作用:在間隔區(qū)域里繪制時(shí)光軸線 & 時(shí)間文本
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
// 獲取RecyclerView的Child view的個(gè)數(shù)
int childCount = parent.getChildCount();
// 遍歷每個(gè)Item，分別獲取它們的位置信息，然后再繪制對(duì)應(yīng)的分割線
for (int i = 0; i < childCount; i++) {
// 獲取每個(gè)Item對(duì)象
View child = parent.getChildAt(i);
/**
* 繪制軸點(diǎn)
*/
// 軸點(diǎn) = 圓 = 圓心(x,y)
float centerx = child.getLeft() - itemView_leftinterval / 3;
float centery = child.getTop() - itemView_topinterval + (itemView_topinterval + child.getHeight()) / 2;
// 繪制軸點(diǎn)圓
c.drawCircle(centerx, centery, circle_radius, mPaint);
// 通過Canvas繪制角標(biāo)
// c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);
/**
* 繪制上半軸線
*/
// 上端點(diǎn)坐標(biāo)(x,y)
float upLine_up_x = centerx;
float upLine_up_y = child.getTop() - itemView_topinterval;
// 下端點(diǎn)坐標(biāo)(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);
/**
* 繪制下半軸線
*/
// 上端點(diǎn)坐標(biāo)(x,y)
float bottomLine_up_x = centerx;
float bottom_up_y = centery + circle_radius;
// 下端點(diǎn)坐標(biāo)(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);
/**
* 繪制左邊時(shí)間文本
*/
// 獲取每個(gè)Item的位置
int index = parent.getChildAdapterPosition(child);
// 設(shè)置文本起始坐標(biāo)
float Text_x = child.getLeft() - itemView_leftinterval * 5 / 6;
float Text_y = upLine_bottom_y;
// 根據(jù)Item位置設(shè)置時(shí)間文本
switch (index) {
case (0):
// 設(shè)置日期繪制位置
c.drawText("13:40", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (1):
// 設(shè)置日期繪制位置
c.drawText("17:33", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (2):
// 設(shè)置日期繪制位置
c.drawText("20:13", Text_x, Text_y, mPaint1);
c.drawText("2017.4.03", Text_x + 5, Text_y + 20, mPaint2);
break;
case (3):
// 設(shè)置日期繪制位置
c.drawText("11:40", Text_x, Text_y, mPaint1);
c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
break;
case (4):
// 設(shè)置日期繪制位置
c.drawText("13:20", Text_x, Text_y, mPaint1);
c.drawText("2017.4.04", Text_x + 5, Text_y + 20, mPaint2);
break;
case (5):
// 設(shè)置日期繪制位置
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 & 綁定數(shù)據(jù) **
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);
// 初始化顯示的數(shù)據(jù)
initData();
// 綁定數(shù)據(jù)到RecyclerView
initView();
}
// 初始化顯示的數(shù)據(jù)
public void initData(){
listItem = new ArrayList<HashMap<String, Object>>();/*在數(shù)組中存放數(shù)據(jù)*/
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", "美國(guó)谷歌公司已發(fā)出");
map1.put("ItemText", "發(fā)件人:谷歌 CEO Sundar Pichai");
listItem.add(map1);
map2.put("ItemTitle", "國(guó)際順豐已收入");
map2.put("ItemText", "等待中轉(zhuǎn)");
listItem.add(map2);
map3.put("ItemTitle", "國(guó)際順豐轉(zhuǎn)件中");
map3.put("ItemText", "下一站中國(guó)");
listItem.add(map3);
map4.put("ItemTitle", "中國(guó)順豐已收入");
map4.put("ItemText", "下一站廣州華南理工大學(xué)");
listItem.add(map4);
map5.put("ItemTitle", "中國(guó)順豐派件中");
map5.put("ItemText", "等待派件");
listItem.add(map5);
map6.put("ItemTitle", "華南理工大學(xué)已簽收");
map6.put("ItemText", "收件人:Carson");
listItem.add(map6);
}
// 綁定數(shù)據(jù)到RecyclerView
public void initView(){
Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
//使用線性布局
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
Rv.setLayoutManager(layoutManager);
Rv.setHasFixedSize(true);
//用自定義分割線類設(shè)置分割線
Rv.addItemDecoration(new DividerItemDecoration(this));
//為L(zhǎng)istView綁定適配器
myAdapter = new MyAdapter(this,listItem);
Rv.setAdapter(myAdapter);
}
}
2.5 結(jié)果展示
示意圖
2.6 源碼地址
Carson_Ho的Github地址：自定義View實(shí)踐 - 時(shí)間軸
希望大家動(dòng)動(dòng)手指給個(gè)
Star唄， 嘻嘻！
3. 擴(kuò)展使用
- 此次的擴(kuò)展使用是為了更加豐富UI效果：將軸點(diǎn)圓圈改成圖標(biāo)，如下圖：
示意圖
- 代碼實(shí)現(xiàn)
private Bitmap mIcon;
// 獲取圖標(biāo)資源
mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
// 在步驟4中，繪制軸點(diǎn)圓圈處 通過Canvas繪制該圖
c.drawBitmap(mIcon,centerx - circle_radius ,centery - circle_radius,mPaint);
4. 總結(jié)
- 通過本文，相信你的自定義
View庫(kù)又多了一把殺器了！ - Carson帶你學(xué)自定義View文章系列：
Carson帶你學(xué)自定義View：自定義View基礎(chǔ)
Carson帶你學(xué)自定義View：一文梳理自定義View工作流程
Carson帶你學(xué)自定義View：Measure過程
Carson帶你學(xué)自定義View：Layout過程
Carson帶你學(xué)自定義View：Draw過程
Carson帶你學(xué)自定義View：手把手教你寫一個(gè)完整的自定義View
Carson帶你學(xué)自定義View：Canvas類全面解析
Carson帶你學(xué)自定義View：Path類全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書
不定期分享關(guān)于安卓開發(fā)的干貨，追求短、平、快，但卻不缺深度。
