Android自定義控件實現(xiàn)圓形進度條
項目中常用到的圓形進度條有好多個,從網(wǎng)上搜到的自定義進度條多是封裝的比較好的代碼,但是不利于初學(xué)者,現(xiàn)在本博客就教給大家如何一步步實現(xiàn)自定義進度條的效果:
先看效果如圖…
代碼實現(xiàn)過程–main布局
這個布局中就是一個簡單的引用
<LinearLayout 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" android:orientation="vertical" > <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="開始下載" android:onClick="start" /> <com.example.pb.ProgressView android:id="@+id/circleView" android:layout_width="100dp" android:layout_height="100dp" /> </LinearLayout>
自定義ProgressView-默認(rèn)是圖中第一種效果
package com.example.pb; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Rect; import android.graphics.RectF; import android.os.Handler; import android.util.AttributeSet; import android.view.View; public class ProgressView extends View { int progress = 0; private String text="0%"; private int max = 100; public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public ProgressView(Context context, AttributeSet attrs) { super(context, attrs); } public ProgressView(Context context) { super(context); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 對于畫筆 Paint paint = new Paint(); // 設(shè)置抗鋸齒 paint.setAntiAlias(true); // 設(shè)置畫筆顏色 // 三種樣式--Stroke 只要描邊 Fill 填充 FILL_AND_STROKE和既有描邊又有填充 paint.setStyle(Style.STROKE); //設(shè)置描邊寬度 paint.setStrokeWidth(2); //定義外圈員的顏色 paint.setColor(Color.RED); //繪制圓形進度條--獲取當(dāng)前控件多大,正好讓進度條在這個控件區(qū)間內(nèi) canvas.drawCircle(getMeasuredWidth()/2, getMeasuredWidth()/2, getMeasuredWidth()/2, paint); //重新設(shè)置描邊寬度,這個寬度最好能完全蓋過圓形 paint.setStrokeWidth(3); //定義限制圓弧的矩形,當(dāng)前這樣定義正好讓圓弧和圓重合 RectF oval = new RectF(0, 0, getMeasuredWidth(), getMeasuredWidth()); //設(shè)置進度條(圓弧的顏色) paint.setColor(Color.GREEN); //繪制,設(shè)置進度條的度數(shù)從0開始,結(jié)束值是個變量,可以自己自由設(shè)置,來設(shè)置進度 //true和false 代表是否使用中心點,如果true,代表連接中心點,會出現(xiàn)扇形的效果 canvas.drawArc(oval, 0, 360 * progress / max, false, paint); //文字的繪制 paint.setTextSize(40); //設(shè)置文字寬度 paint.setStrokeWidth(1.0f); //測量文字大小-提前準(zhǔn)備個矩形 Rect bounds = new Rect(); //測量文字的寬和高,測量的值可以根據(jù)矩形獲取 paint.getTextBounds(text, 0, text.length(), bounds); paint.setColor(Color.BLACK); paint.setStyle(Style.FILL); //繪制文字,計算文字的寬高進行設(shè)置 canvas.drawText(text, getMeasuredWidth()/2 - bounds.width() / 2, getMeasuredWidth()/2 + bounds.height() / 2, paint); } /** * 初始設(shè)置當(dāng)前進度的最大值-默認(rèn)100 * @param max */ public void setMax(int max) { this.max = max; } /** * 更新進度和文字 * @param progress * @param text */ public void setProgressAndText(int progress, String text) { this.progress = progress; this.text = text; //重新繪制 postInvalidate(); } }
如果想要實現(xiàn)第二種效果
//設(shè)置填充模式 paint.setStyle(Style.FILL); //繪制,設(shè)置進度條的度數(shù)從0開始,結(jié)束值是個變量,可以自己自由設(shè)置,來設(shè)置進度 //true和false 代表是否使用中心點,如果true,代表連接中心點,會出現(xiàn)扇形的效果 canvas.drawArc(oval, 0, 360 * progress / max, false, paint);
Activity中代碼–模擬一下下載的過程,效果隨便定義
package com.example.pb; import android.app.Activity; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity { private ProgressView circleView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); circleView = (ProgressView) findViewById(R.id.circleView); } int progress = 0; public void start(View v) { // 1000公里 circleView.setMax(100); progress=0; new Thread() { public void run() { while (true) { progress = progress + 1; String text = progress + "%"; circleView.setProgressAndText(progress, text); try { sleep(30); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } if (progress == 100) { break; } } }; }.start(); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Studio 3.6 調(diào)試 smali的全過程
這篇文章主要介紹了Android Studio 3.6 調(diào)試 smali, 目前最新版的 Android Studio 利用附加功能調(diào)試 smali 非常方便,具體操作步驟跟隨小編一起看看吧2020-02-0221天學(xué)習(xí)android開發(fā)教程之SurfaceView與多線程的混搭
21天學(xué)習(xí)android開發(fā)教程之SurfaceView與多線程的混搭,感興趣的小伙伴們可以參考一下2016-02-02android開發(fā)之listView組件用法實例簡析
這篇文章主要介紹了android開發(fā)之listView組件用法,結(jié)合實例形式簡單分析了listView組件的相關(guān)屬性與使用技巧,需要的朋友可以參考下2016-01-01android自動生成dimens適配文件的圖文教程詳解(無需Java工具類)
這篇文章主要介紹了android自動生成dimens適配文件,無需Java工具類,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03Android基于ViewFilpper實現(xiàn)文字LED顯示效果示例
這篇文章主要介紹了Android基于ViewFilpper實現(xiàn)文字LED顯示效果,結(jié)合完整實例形式分析了Android使用ViewFilpper實現(xiàn)文字LED顯示動畫效果的相關(guān)步驟與實現(xiàn)技巧,需要的朋友可以參考下2017-08-08Android實現(xiàn)App中導(dǎo)航Tab欄懸浮的功能
相信大家在玩手機的過程中應(yīng)該會注意到很多的app都有這種功能,比如說外賣達人常用的“餓了么”。所以這篇文章給大家分享了Android如何實現(xiàn)app中的導(dǎo)航Tab欄懸浮的功能,有需要的朋友們可以參考借鑒。2016-10-10Android Presentation雙屏異顯開發(fā)流程詳細講解
最近開發(fā)的一個項目,有兩個屏幕,需要將第二個頁面投屏到副屏上,這就需要用到Android的雙屏異顯(Presentation)技術(shù)了,研究了一下,這里做下筆記2023-01-01