Android實現(xiàn)列表時間軸
本文實例為大家分享了Android列表時間軸展示的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)的效果圖如下:

實現(xiàn)的方式是利用recycleview的ItemDecoration這個抽象類,就是我們經(jīng)常用來畫分割線的的這個類,
具體如下
public class DividerItemDecoration extends RecyclerView.ItemDecoration{
// 寫右邊字的畫筆(具體信息)
private Paint mPaint;
// 寫左邊日期字的畫筆( 時間 + 日期)
private Paint mPaint1;
private Paint mPaint2;
private Paint mPaint3;
// 左 上偏移長度
private int itemView_leftinterval;
private int itemView_topinterval;
// 軸點半徑
private int circle_radius;
// 圖標(biāo)
private Bitmap mIcon;
//月份合集(使用時需要設(shè)置)
private List<String> monthList= new ArrayList<>();
//年份合集(使用時需要設(shè)置)
private List<String> yearList= new ArrayList<>();
public void setMonthList(List<String> monthList) {
this.monthList = monthList;
}
public void setYearList(List<String> yearList) {
this.yearList = yearList;
}
// 在構(gòu)造函數(shù)里進(jìn)行繪制的初始化,如畫筆屬性設(shè)置等
public DividerItemDecoration(Context context) {
// 軸點畫筆(紅色)
mPaint = new Paint();
mPaint.setColor(Color.rgb(58, 154, 239));
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(3);
// 左邊時間文本畫筆(藍(lán)色)
// 此處設(shè)置了兩只分別設(shè)置 時分 & 年月
mPaint1 = new Paint();
mPaint1.setColor(Color.BLACK);
mPaint1.setTextSize(30);
mPaint2 = new Paint();
mPaint2.setColor(context.getResources().getColor(R.color.divider));
mPaint2.setTextSize(26);
mPaint3 = new Paint();
mPaint3.setColor(Color.rgb(58, 154, 239));
mPaint3.setTextSize(20);
// 賦值ItemView的左偏移長
itemView_leftinterval = 150;
// 賦值ItemView的上偏移長度
itemView_topinterval = 30;
// 賦值軸點圓的半徑為10
circle_radius = 8;
}
// 重寫getItemOffsets()方法
// 作用:設(shè)置ItemView 左 & 上偏移長度
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
// 設(shè)置ItemView的左 & 上偏移長度分別為150 px & 30px,即此為onDraw()可繪制的區(qū)域
outRect.set(itemView_leftinterval, itemView_topinterval, 0, 0);
}
// 重寫onDraw()
// 作用:在間隔區(qū)域里繪制時光軸線 & 時間文本
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
// 獲取RecyclerView的Child view的個數(shù)
int childCount = parent.getChildCount();
// 遍歷每個Item,分別獲取它們的位置信息,然后再繪制對應(yīng)的分割線
for (int i = 0; i < childCount; i++) {
// 獲取每個Item對象
View child = parent.getChildAt(i);
View lastChild = null;
if (i > 0) {
lastChild = parent.getChildAt(i - 1);
}
/**
* 繪制軸點
*/
// 軸點 = 圓 = 圓心(x,y) 位置可以根據(jù)需求來調(diào)節(jié)
float centerx = child.getLeft() - itemView_leftinterval / 4;
float centery = child.getTop() + itemView_topinterval +10;
// 繪制軸點圓
c.drawCircle(centerx, centery, circle_radius, mPaint);
/**
* 繪制上半軸線(x軸是保持不變的)
*/
// 上端點坐標(biāo)(x,y)
float upLine_up_x = centerx;
float upLine_up_y = 0;
if (i>0){
upLine_up_y = lastChild.getBottom();
}else {
upLine_up_y = centery - itemView_topinterval;
}
// 下端點坐標(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);
/**
* 繪制下半軸線,最后一個不畫下半軸
*/
if (i <childCount-1){
// 上端點坐標(biāo)(x,y)
float bottomLine_up_x = centerx;
float bottom_up_y = centery + circle_radius;
// 下端點坐標(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);
}
/**
* 繪制左邊時間文本
*/
// 獲取每個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è)置時間文本
switch (index) {
case (0):
// 設(shè)置日期繪制位置
c.drawText(monthList.get(0), Text_x, Text_y, mPaint1);
c.drawText(yearList.get(0), Text_x + 8, Text_y + 28, mPaint2);
break;
case (1):
// 設(shè)置日期繪制位置
c.drawText(monthList.get(1), Text_x, Text_y, mPaint1);
c.drawText(yearList.get(1), Text_x + 8, Text_y + 28, mPaint2);
break;
case (2):
// 設(shè)置日期繪制位置
if (TextUtils.isEmpty(yearList.get(2))){
c.drawText(monthList.get(2), Text_x, Text_y, mPaint3);
}else {
c.drawText(monthList.get(2), Text_x, Text_y, mPaint1);
c.drawText(yearList.get(2), Text_x + 8, Text_y + 28, mPaint2);
}
break;
case (3):
// 設(shè)置日期繪制位置
c.drawText(monthList.get(3), Text_x, Text_y, mPaint1);
c.drawText(yearList.get(3), Text_x + 8, Text_y + 28, mPaint2);
break;
case (4):
// 設(shè)置日期繪制位置
c.drawText(monthList.get(4), Text_x, Text_y, mPaint1);
c.drawText(yearList.get(4), Text_x + 8, Text_y + 28, mPaint2);
break;
default:c.drawText("結(jié)束", Text_x, Text_y, mPaint1);
}
}
}
}
使用比較簡單:
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(this); dividerItemDecoration.setMonthList(monthList); dividerItemDecoration.setYearList(yearList); mRecyclerView.addItemDecoration(dividerItemDecoration);
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android中獲取資源 id 及資源 id 的動態(tài)獲取
這篇文章主要介紹了 Android中獲取資源 id 及資源 id 的動態(tài)獲取的相關(guān)資料,需要的朋友可以參考下2017-01-01
解決EditText編輯時hint 在6.0 手機(jī)上顯示不出來的問題
下面小編就為大家?guī)硪黄鉀QEditText編輯時hint 在6.0 手機(jī)上顯示不出來的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Android簡單實現(xiàn)動態(tài)權(quán)限獲取相機(jī)權(quán)限及存儲空間等多權(quán)限
這篇文章主要介紹了Android簡單實現(xiàn)動態(tài)權(quán)限獲取相機(jī)權(quán)限及存儲空間等多權(quán)限,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的朋友可以參考一下2022-07-07
Android實現(xiàn)環(huán)形進(jìn)度條代碼
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)環(huán)形進(jìn)度條的代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
Android實現(xiàn)判斷手機(jī)未接來電及處理方法
這篇文章主要介紹了Android實現(xiàn)判斷手機(jī)未接來電及處理方法,需要的朋友可以參考下2014-07-07
Android studio導(dǎo)入項目的方法詳解(簡單快速)
最近開課移動互聯(lián)網(wǎng)應(yīng)用開發(fā),實驗課老師發(fā)了代碼讓我們導(dǎo)入,在網(wǎng)上找了各種方法,發(fā)現(xiàn)不是每一個項目都適合,有些能夠成功,有些還是有錯,頭大的很。后面發(fā)現(xiàn)一個比較簡單的方法,沒翻過車,新手可以試試2017-06-06
Android SharePreferences與數(shù)據(jù)庫SQLite存儲實現(xiàn)方法介紹
這篇文章主要介紹了Android SharePreferences與數(shù)據(jù)庫SQLite用于存儲的具體實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09

