Android自定義控件制作顯示進度的Button
最近看到一些應用在下載文件的時候,并沒有額外彈出進度條,而是很炫的使用啟動下載任務的Button直接顯示文件的下載進度,通過改變其背景色,從左向右推進,直到填滿整個Button時,意味著下載任務的完成。
除了這種效果,還看到某酷的視頻客戶端,在觀看過的視頻對應的按鈕上,會給該按鈕添加一個描邊效果,4條邊,每條邊代表25%的進度,由上沿開始,順時針最終到左邊沿,則代表100%的進度,這種效果也很不錯。
自己也研究了一下,寫了個自定義的button,下面是效果,
普通的填充效果:
描邊的效果:
自定義Button的主要實現就是繼承Button,并重寫onDraw()方法,填充的效果實現起來相對簡單一點:
if(currentType == TYPE_FILL) { mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow)); mPaint.setAntiAlias(true); mPaint.setAlpha(128); mPaint.setStrokeWidth(1.0f); Rect rect = new Rect(); //先獲取Button的邊框 canvas.getClipBounds(rect); rect.left += getPaddingLeft(); //填充條的右邊界根據當前進度來計算 rect.top += getPaddingTop(); rect.right = (rect.left - getPaddingLeft()) + (mProgress * getWidth() / 100) - getPaddingRight(); rect.bottom -= getPaddingBottom(); //繪制一個圓角的長條,這樣相對好看一點 canvas.drawRoundRect(new RectF(rect), 8.0f, 8.0f, mPaint); }
描邊效果實現起來相對復雜一點,確切說是繁瑣:
else if(currentType == TYPE_STROKE) { //初始化畫筆 mPaint.setAntiAlias(true); mPaint.setColor(getContext().getResources().getColor(R.color.green_yellow)); mPaint.setAlpha(255); //獲取Button的邊框 Rect rect = new Rect(); canvas.getClipBounds(rect); Paint paint1, paint2, paint3, paint4; //根據當前進度,確定是繪制哪條邊,其實也是繪制一個矩形,只不過這個矩形比較扁或是比較窄而已,類似一條邊 if(mProgress >= 0 && mProgress < 25) { paint1 = new Paint(mPaint); Rect temp = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.left + mProgress * (getWidth() - getPaddingLeft() - getPaddingRight()) / 25 - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(temp, paint1); } else if(mProgress < 50) { paint1 = new Paint(mPaint); Rect rect1 = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect(rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + (mProgress - 25) * (getHeight() - getPaddingTop() - getPaddingBottom()) / 25); canvas.drawRect(rect2, paint2); } else if(mProgress < 75) { paint1 = new Paint(mPaint); Rect rect1 = new Rect(rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect(rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect2, paint2); paint3 = new Paint(mPaint); Rect rect3 = new Rect( rect.right - getPaddingRight() - (mProgress - 50) * (getWidth() - getPaddingLeft() - getPaddingRight()) / 25, rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect3, paint3); } else if(mProgress <= 100) { paint1 = new Paint(mPaint); Rect rect1 = new Rect( rect.left + getPaddingLeft(), rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.top + getPaddingTop() + 2); canvas.drawRect(rect1, paint1); paint2 = new Paint(mPaint); Rect rect2 = new Rect( rect.right - getPaddingRight() - 2, rect.top + getPaddingTop(), rect.right - getPaddingRight(), rect.bottom - getPaddingBottom()); canvas.drawRect(rect2, paint2); paint3 = new Paint(mPaint); Rect rect3 = new Rect( rect.left + getCompoundPaddingLeft(), rect.bottom - getPaddingBottom() - 2, rect.right - getPaddingRight(), rect.bottom - getPaddingRight()); canvas.drawRect(rect3, paint3); paint4 = new Paint(mPaint); Rect rect4 = new Rect( rect.left + getCompoundPaddingLeft(), rect.bottom - getPaddingBottom() - (mProgress - 75) * (getHeight() - getPaddingTop() - getPaddingBottom()) / 25, rect.left + getPaddingLeft() + 2, rect.bottom - getPaddingBottom()); canvas.drawRect(rect4, paint4); } }
記得最后執(zhí)行 super.onDraw(canvas);
這樣會讓填充或是描邊繪制在最底層,不會擋住Button原有的內容。
然后添加一個API,用于更新進度:
public void updateProgress(int progress) { if(progress >= 0 && progress <= 100) { mProgress = progress; invalidate(); } else if(progress < 0) { mProgress = 0; invalidate(); } else if(progress > 100) { mProgress = 100; invalidate(); } }
Demo的代碼上傳到了github上:https://github.com/YoungLeeForeverBoy/ProgressButton
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android Button按鈕的四種點擊事件
- Android自定義FloatingActionButton滑動行為只隱藏不出現的問題小結
- Android RadioButton 圖片位置與大小實例詳解
- Android 自定義Button控件實現按鈕點擊變色
- Android中button點擊后字體的變色效果
- Android自定義button點擊效果的兩種方式
- Android手機開發(fā) 使用線性布局和相對布局實現Button垂直水平居中
- Android開發(fā)之創(chuàng)建可點擊的Button實現方法
- Android中EditText+Button組合導致輸入板無法收起的原因分析及解決辦法
- Android實現點擊Button產生水波紋效果
- Android編程實現長按Button按鈕連續(xù)響應功能示例
相關文章
Android基于API的Tabs3實現仿優(yōu)酷t(yī)abhost效果實例
這篇文章主要介紹了Android基于API的Tabs3實現仿優(yōu)酷t(yī)abhost效果,結合完整實例形式分析了Android實現優(yōu)酷界面效果的相關技巧,需要的朋友可以參考下2015-12-12Android自定義LinearLayout布局顯示不完整的解決方法
這篇文章主要給大家介紹了關于Android自定義LinearLayout但布局顯示不完整的解決方法,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11