android 時間進度條自定義View

B0CCQC~OXT~Q`VIM2A1Z{CM.png

自定義的時間進度條,主要是分一種是黃色,一種是暗灰色,比如某個時間段占用了那么改時間段就是黃色....

首先我們先要準備畫布大小代碼如下:

QQ圖片20170615121413.png

大家會疑問:progressIndex是多少呢? 或者又是什么意思呢。這個在之前已經定義了。效果圖可以看出時間段從08:00-20:00(一共12小時) 。如果按5分鐘為一個小單位的話,那么半小時就是6個小單位。一個小時就是12個小單位。那么也就是說progressInde就是12*12.那么每一個單位寬度就是preIndex=mWidth/progressIndex;

第二步就是準備畫筆,畫布,并且在畫筆上畫畫了。在onDraw()方法里面搞事情:


QQ圖片20170615123334.png

第三步:就是填充色值

QQ圖片20170615124217.png

最后貼上代碼:

public class MeetingRoomBookView extends View {

/**進度條最大值*/
private float maxCount;
/**進度條當前值*/
private float currentCount;
/**畫筆*/
private Paint mPaint;
private int mWidth,mHeight;
private int preT=6;
//分為24份每一份30分鐘
private long progressIndex=24*preT;
private List<String> timeListIndex=new ArrayList<>();
//每30分鐘有多寬
private long preIndex=0;
private List<MeetingManaBean> bookViewList=new ArrayList<>();

public MeetingRoomBookView(Context context) {
    super(context);
}

public MeetingRoomBookView(Context context, AttributeSet attrs) {
    super(context, attrs);
    setMaxTimeIndex();
}

public MeetingRoomBookView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

//設置時間標誌
private void setMaxTimeIndex(){
    timeListIndex.add("8:00");
    timeListIndex.add("12:00");
    timeListIndex.add("14:00");
    timeListIndex.add("18:00");
    timeListIndex.add("20:00");
}

/***
 * 設置最大的進度值
 * @param maxCount
 */
public void setMaxCount(float maxCount) {
    this.maxCount = maxCount;
}
/**
 * 得到最大進度值
 */
public double getMaxCount(){
    return maxCount;
}
/***
 * 設置當前的進度值
 * @param currentCount
 */
public void setCurrentCount(float currentCount) {
    this.currentCount = currentCount > maxCount ? maxCount : currentCount;

/**

  • invalidate()是用來刷新View的,必須是在UI線程中進行工作。比如在修改某個view的顯示時,

  • 調用invalidate()才能看到重新繪制的界面。invalidate()的調用是把之前的舊的view從主UI

  • 線程隊列中pop掉。
    /
    invalidate();
    }
    @Override
    protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);
    mPaint = new Paint();
    //設置抗鋸齒效果
    mPaint.setAntiAlias(true);
    //設置畫筆顏色
    mPaint.setColor(Color.WHITE);
    int round = mHeight;
    /
    *

  • RectF:繪制矩形,四個參數分別是left,top,right,bottom

  • 類型是單精度浮點數
    /
    RectF rf = new RectF(0, 0, mWidth, mHeight);
    /
    繪制圓角矩形,背景色為畫筆顏色/
    canvas.drawRoundRect(rf, round, round, mPaint);
    /
    設置progress內部是灰色*/
    mPaint.setColor(Color.parseColor("#f8f9fd"));
    RectF rectBlackBg = new RectF(0, 0, mWidth-2, mHeight-2);
    canvas.drawRoundRect(rectBlackBg, round, round, mPaint);
    //設置進度條進度及顏色
    setBookIndex(canvas,round);
    //寫文字
    paintText(canvas);
    }

    private void setFreeTimeColor(){//設置空閒的

    }

    private void setBookIndex(Canvas canvas,int round){
    //設置8-10點定制了 11-12:30 14:30-15:00 18:30-20:00
    if(bookViewList.size()>0){
    mPaint.setColor(Color.parseColor("#f6d125"));
    for(int i=0;i<bookViewList.size();i++){
    MeetingManaBean bean= bookViewList.get(i);
    setHasBookTimeColor(canvas,round,bean.begin,bean.end,mPaint);
    }
    }

// //11-12:30
// setHasBookTimeColor(canvas,round,6,9,mPaint);
// //14:30-16:00
// setHasBookTimeColor(canvas,round,13,16,mPaint);
// //18:30-20:00
// setHasBookTimeColor(canvas,round,21,24,mPaint);

}

private void setHasBookTimeColor(Canvas canvas,int round,int startIndex,int endIndex,Paint mPaint){
    RectF rectProgressBg = new RectF(((mWidth-1)*startIndex)/progressIndex, 3, ((mWidth-1)*endIndex)/progressIndex, mHeight-3);
    if(endIndex==progressIndex||startIndex==0){
        canvas.drawRoundRect(rectProgressBg, round, round, mPaint);
    }else {
        canvas.drawRect(rectProgressBg, mPaint);
    }
}



private void paintText(Canvas canvas){
    mPaint.setColor(Color.parseColor("#888888"));
    mPaint.setTextSize(20);
    canvas.drawText(timeListIndex.get(0),0,mHeight*2,mPaint);
    canvas.drawText(timeListIndex.get(1),(8*preT*mWidth/progressIndex),mHeight*2,mPaint);
    canvas.drawText(timeListIndex.get(2),(12*preT*mWidth/progressIndex),mHeight*2,mPaint);
    canvas.drawText(timeListIndex.get(3),(20*preT*mWidth/progressIndex),mHeight*2,mPaint);
    canvas.drawText(timeListIndex.get(4),(22*preT*mWidth/progressIndex),mHeight*2,mPaint);

}
//dip * scale + 0.5f * (dip >= 0 ? 1 : -1)
private int dipToPx(int dip){
    float scale = getContext().getResources().getDisplayMetrics().density;
    return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));//加0.5是為了四舍五入
}
/**指定自定義控件在屏幕上的大小,onMeasure方法的兩個參數是由上一層控件
 * 傳入的大小,而且是模式和尺寸混合在一起的數值,需要MeasureSpec.getMode(widthMeasureSpec)
 * 得到模式,MeasureSpec.getSize(widthMeasureSpec)得到尺寸
 *
 */
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

// TODO Auto-generated method stub
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
//MeasureSpec.EXACTLY,精確尺寸
if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
mWidth = widthSpecSize;
} else {
mWidth = 0;
}

    preIndex=mWidth/progressIndex;//每30分鐘有多寬

//MeasureSpec.AT_MOST,最大尺寸,只要不超過父控件允許的最大尺寸即可,MeasureSpec.UNSPECIFIED未指定尺寸
if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
mHeight = dipToPx(20);
} else {
mHeight = heightSpecSize;
}
mHeight=30;
//設置控件實際大小
setMeasuredDimension(mWidth, mHeight*2);
}

public void setBookViewList(List<MeetingManaBean> bookViewList) {
    this.bookViewList = bookViewList;
    this.postInvalidate();
}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容