Android教程網 >> Android技術 >> 關於Android編程 >> Android自定義View之三種流行進度條的寫法

Android自定義View之三種流行進度條的寫法

編輯：關於Android編程

概述：

利用自定義View的onDraw()方法，可以繪制很多種圖形，進度框只是其中之一。

Demo

這是一個模擬下載的demo。

自中央逐漸充滿型圓形進度框

這裡寫圖片描述

demo1

public class FirstProgressView extends View{

    private int width;
    private int height;

    private int progress;
    private int maxProgress = 100;
    private Paint mPaintBackGround;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    public void setWidth(int width) {
        this.width = width;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

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

    public FirstProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackGround = new Paint();//新定義一個畫筆，用來畫背景
        mPaintBackGround.setColor(Color.GRAY);//設置畫筆顏色
        mPaintBackGround.setAntiAlias(true);//設置為true，代表抗鋸齒

        mPaintCurrent = new Paint();//用於畫進度圖
        mPaintCurrent.setColor(Color.GREEN);
        mPaintCurrent.setAntiAlias(true);

        mPaintText = new Paint();//用來畫文本的畫筆
        mPaintText.setColor(Color.BLACK);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);//設置文本排布方式：正中央
        mPaintText.setTextSize(50);//設置文本大小，這裡為50xp
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //左起：圓心x坐標，圓心y坐標，半徑，Paint對象(畫筆)
        canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround);
        canvas.drawCircle(width/2,height/2,progress*400f/maxProgress,mPaintCurrent);
        //左起：文本內容，起始位置x坐標，起始位置y坐標，畫筆
        canvas.drawText(progress*100f/maxProgress+%,width / 2, height / 2,mPaintText);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //該View布局寬
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        //該View布局高
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        //設定本View的大小的方法
        setMeasuredDimension(width, height);
    }
}

水箱型注水式進度框

這裡寫圖片描述

demo2

public class SecondProgressView extends View {

    private int width;
    private int height;

    private int progress;
    private int maxProgress = 100;
    private Paint mPaintBackGround;
    private Paint mPaintCurrent;
    private Paint mPaintText;

    public void setWidth(int width) {
        this.width = width;
    }

    public void setHeight(int height) {
        this.height = height;
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }

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

    public SecondProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaintBackGround = new Paint();
        mPaintBackGround.setColor(Color.GRAY);
        mPaintBackGround.setStyle(Paint.Style.STROKE);
        mPaintBackGround.setStrokeWidth(20);
        mPaintBackGround.setAntiAlias(true);

        mPaintCurrent = new Paint();
        mPaintCurrent.setColor(Color.BLUE);
        mPaintCurrent.setAntiAlias(true);

        mPaintText = new Paint();
        mPaintText.setColor(Color.BLACK);
        mPaintText.setAntiAlias(true);
        mPaintText.setTextAlign(Paint.Align.CENTER);
        mPaintText.setTextSize(50);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawRect(width / 2 - 200, height / 2 - 200, width / 2 + 200, height / 2 + 200, mPaintBackGround);
        canvas.drawRect(width/2-190,height/2-190+(380-progress*380f/maxProgress),width/2+190,height/2+190,mPaintCurrent);
        canvas.drawText(progress*100f/maxProgress+%,width / 2, height / 2,mPaintText);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        setMeasuredDimension(width, height);
    }
}

圓圈式弧形進度框：

這裡寫圖片描述

demo3:<喎?/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPjwvcD4NCjxwcmUgY2xhc3M9"brush:java;"> public class ThirdProgressView extends View { private int width; private int height; private int progress; private int maxProgress = 100; private Paint mPaintBackGround; private Paint mPaintCurrent; private Paint mPaintText; public void setWidth(int width) { this.width = width; } public void setHeight(int height) { this.height = height; } public int getProgress() { return progress; } public void setProgress(int progress) { this.progress = progress; invalidate(); } public int getMaxProgress() { return maxProgress; } public void setMaxProgress(int maxProgress) { this.maxProgress = maxProgress; } public ThirdProgressView(Context context) { super(context); } public ThirdProgressView(Context context, AttributeSet attrs) { super(context, attrs); mPaintBackGround = new Paint(); mPaintBackGround.setColor(Color.GRAY); mPaintBackGround.setStrokeWidth(60); mPaintBackGround.setStyle(Paint.Style.STROKE); mPaintBackGround.setAntiAlias(true); mPaintCurrent = new Paint(); mPaintCurrent.setColor(Color.GREEN); mPaintCurrent.setStrokeWidth(60); mPaintCurrent.setStyle(Paint.Style.STROKE); mPaintCurrent.setAntiAlias(true); mPaintText = new Paint(); mPaintText.setColor(Color.BLACK); mPaintText.setAntiAlias(true); mPaintText.setTextAlign(Paint.Align.CENTER); mPaintText.setTextSize(50); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawCircle(width / 2, height / 2, 400, mPaintBackGround); RectF oval = new RectF(width/2-400,height/2-400,width/2+400,height/2+400); //左起分別是RectF對象，起始角度，終止角度，是否顯示扇邊（如果為true畫出的是一個扇形），Paint對象 canvas.drawArc(oval,0,progress*360f/maxProgress,false,mPaintCurrent); canvas.drawText(progress*100f/maxProgress+%,width / 2, height / 2,mPaintText); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec); height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec); setMeasuredDimension(width, height); } }

需要在布局文件中加載自定義View，這裡隨便加載一個作示范（自定義View都這麼加載）：

主活動的中自定義View也需要聲明和findViewById，這裡寫的是一個模擬下載的小demo,加載的是第三種自定義View，其他的自定義View加載方式完全一樣。

public class MainActivity extends Activity { private int progress; private Button mButtonStart; private ThirdProgressView mProgressView; private static final int DOWNLOAD_UPDATE = 0x99; //模擬下載 private Handler mHandler = new Handler() { @Override public void handleMessage(Message msg) { super.handleMessage(msg); //處理msg switch (msg.what) { case DOWNLOAD_UPDATE: progress++; if (progress <= 100) { mProgressView.setProgress(progress); sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 100);//每隔100毫秒發送一次handler } break; } } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mButtonStart = (Button) findViewById(R.id.button_start); mProgressView = (ThirdProgressView) findViewById(R.id.progress_view_first); mButtonStart.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //向handler發送一個延時空消息，1000毫秒後發送 mHandler.sendEmptyMessageDelayed(DOWNLOAD_UPDATE, 1000); } }); } }

上一頁:Android圖形圖像之以Bitmap作為Canvas畫布的材料
下一頁:Android：微信授權登錄與微信分享全解析

關於Android編程

 java/android 設計模式學習筆記（10）---建造者模式
這篇博客我們來介紹一下建造者模式（Builder Pattern），建造者模式又被稱為生成器模式，是創造性模式之一，與工廠方法模式和抽象工廠模式不同，後兩者的目的是為了實

 Android聲音焦點----從音樂回到Luncher調節音量顯示的是Music的音量
聲音的類型有：定義在AudioSystem.java文件中 /* The default audio stream */public static final

Android系統開發中log的使用方法及簡單的原理
在程序開發過程中，LOG是廣泛使用的用來記錄程序執行過程的機制，它既可以用於程序調試，也可以用於產品運營中的事件記錄。在Android系統中，提供了簡單、便利的LOG機制

 Android實戰打飛機游戲之子彈生成與碰撞以及爆炸效果(5)
Android實戰打飛機游戲子彈生成，新建子彈類public class Bullet { // 子彈圖片資源 public Bitmap bmpBullet; // 子

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章

OPPO Find 5(X909)手動刷入recovery以及卡刷固件教程
史上最詳解的華為Ascend G7升級刷機教程
三星Galaxy Grand2 G7102安裝第三方recovery教程
LG G3全系列機型Android L 5.0升級刷機教程
華為P8 EMUI4.0 ROOT教程華為P8 Android 6.0獲取超級權限方法
索尼X Performance官方FTF固件rom包強刷包下載
索尼X Performance強刷官方FTF系統包的具體教程
華為榮耀暢玩4C Android5.1 ROOT教程榮耀暢玩4C獲取Android5.1的root權限
努比亞N1官方rom刷機包 nubia N1原版系統升級包下載
努比亞N1刷機教程 Nubia N1卡刷升級更新官方系統包
努比亞N1 NX541J線刷刷機教程 Nubia N1 NX541J線刷救磚包
安卓Android4.0刷機通用教程
Android 安卓手機清理釋放內存空間技巧
OPPO Find 5 完整使用小技巧

熱門文章

安卓學習筆記之理解WindowManger Android獲取cpu使用率,剩余內存和硬盤容量 Android SDK目錄及版本號區別在code裡設置內置外置SD卡盤符名稱，讓在pc機顯示的盤符名稱區分大小寫 Android 中的注解深入探究 Android Gallery無限循環

 Android開發之Location用法實例分析
本文實例講述了Android開發中Location用法。分享給大家供大家

 Android app系統設置界面數據的保存與讀取 SharedPreferences 的正確使用
很開心的是經歷過兩個多月的努力，項目在11月份即將要交付使用，基礎功能已

 android中簽名、證書、公鑰密鑰的概念及使用
公鑰和私鑰的概念在現代密碼體制中加密和解密是采用不同的密鑰（公開密鑰），

Android Logger 日志框架源碼分析
Logger框架使用 Logger框架是一個優雅的日志系統，通過Logg

閱讀排行版

Contest - 2013校賽暨華中邀請賽 Problem D: Tetrahedron Inequality

Android App開發中的適配

Android基於ListView實現類似QQ空間的滾動翻頁與滾動加載效果

Android官方文檔翻譯十七 4.1Starting an Activity

Android應用程序的編譯流程及使用Ant編譯項目的攻略

Android通過startService播放背景音樂簡單示例

AIDL/IPC Android AIDL/IPC 進程通信機制——超詳細講解及用法案例剖析(播放器)

安卓工具類------)常用單位轉換的輔助類