Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android 自定義圓圈進度並顯示百分比例控件(純代碼實現)

Android 自定義圓圈進度並顯示百分比例控件(純代碼實現)

編輯:關於Android編程

首先,感謝公司能給我閒暇的時間,來穩固我的技術,讓我不斷的去探索研究,在此不勝感激。吐舌頭
先不說實現功能,上圖看看效果
\這個是續上一次水平變色進度條的有一個全新的控件,理論實現原理
1.分析控件:該控件基本上是圓圈內嵌圓圈;

2.進度計算:其實是小學二年級數學題:當前進度/總數=百分比;

3.中間時間:呵呵,純粹忽悠,不解釋(當前時間)。

理論總是和實踐差距的太遠,不扯淡,不吹噓,貼代碼:

<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHByZSBjbGFzcz0="brush:java;">package com.spring.progressview; import java.text.SimpleDateFormat; import java.util.Date; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Align; import android.graphics.Paint.Style; import android.graphics.Rect; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; /**** * 圓圈進度控件 * @author spring sky * Email:[email protected] * 下載地址:http://download.csdn.net/detail/vipa1888/7637905 */ public class RoundProgressView extends View { /**最外圍的顏色值*/ private int mOutRoundColor = Color.argb(60, 255, 255, 255); /**中心圓的顏色值*/ private int mCenterRoundColor = Color.argb(255, 255, 255, 255); /**進度的顏色*/ private int mProgressRoundColor = Color.argb(255, 255, 255, 255); /**進度的背景顏色*/ private int mProgressRoundBgColor = Color.argb(100, 255, 255, 255); /**進度條的寬度*/ private int mProgressWidth = 5; private int[] colors = {Color.WHITE,Color.RED}; /***字體顏色*/ private int mTextColor = Color.rgb(118, 181, 66); private float mPencentTextSize = 65; private int mWidth,mHeight; private int mPaddingX; private float mProgress = 0.5f; private float mMax = 1.0f; /** * 時間顯示格式 */ private SimpleDateFormat mDateFormat = new SimpleDateFormat("HH:mm:ss.S"); private Paint mPaint = new Paint(); public RoundProgressView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } public RoundProgressView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public RoundProgressView(Context context) { super(context); init(); } public void init(){ } @SuppressLint("DrawAllocation") @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mWidth = getWidth(); mHeight = getHeight(); if(mWidth > mHeight){ mPaddingX = (mWidth-mHeight)/2; mWidth = mHeight; } mPaint.setAntiAlias(true); // 消除鋸齒 mPaint.setStyle(Style.FILL); mPaint.setColor(mOutRoundColor); RectF oval = new RectF(new Rect(mPaddingX, 0, mWidth+mPaddingX, mHeight)); canvas.drawArc(oval, 0, 360, true, mPaint); int halfWidth = mWidth/6; mPaint.setColor(mProgressRoundBgColor); mPaint.setStrokeWidth(mProgressWidth); mPaint.setStyle(Style.STROKE); oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*5+mPaddingX, halfWidth*5)); canvas.drawArc(oval, 0, 360, false, mPaint); mPaint.setColor(mProgressRoundColor); canvas.drawArc(oval, 90, 360*mProgress/mMax, false, mPaint); halfWidth = mWidth/4; mPaint.setStyle(Style.FILL); mPaint.setColor(mCenterRoundColor); oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*3+mPaddingX, halfWidth*3)); canvas.drawArc(oval, 0, 360, false, mPaint); mPaint.reset(); mPaint.setTextSize(mPencentTextSize); mPaint.setColor(mTextColor); mPaint.setStyle(Style.FILL); mPaint.setTextAlign(Align.CENTER); String number = (int)(mProgress*100/mMax)+""; canvas.drawText(number, mWidth/2+mPaddingX, mHeight/2+mPencentTextSize/3, mPaint); float textWidth = mPaint.measureText(number); mPaint.setTextSize(mPencentTextSize/2); canvas.drawText("%", mWidth/2+mPaddingX+textWidth/2+5, mHeight/2-mPencentTextSize/8, mPaint); mPaint.setTextSize(mPencentTextSize/2); canvas.drawText(mDateFormat.format(new Date(System.currentTimeMillis())), mWidth/2+mPaddingX, mHeight/2+halfWidth/4*3, mPaint); } public void setMax(float mMax) { this.mMax = mMax; } public void setProgress(float mProgress) { this.mProgress = mProgress; invalidate(); } public float getMax() { return mMax; } public float getProgress() { return mProgress; } }


雖然只有短短不到200行代碼,但是,裡面的有些基本函數,我還是得簡單的說明
1. Color.argb(60, 255, 255, 255); 這個是來得到一個顏色,並且設置他的透明度,第一個參數就是透明度,0~255之間,其他的RGB,呵呵,不解釋,自己搞。
2. 下面的兩個方法,是畫筆的方法,很重要

mPaint.setStyle(Style.STROKE); //這個是原來顯示空心的東西

mPaint.setStrokeWidth(mProgressWidth); //這個是空心最外層的寬度
比如:drawArc 是畫一個圓,那麼,我們的設置了以上兩個方法,就是要畫一個空心圓,圓的軌跡寬度就是 mProgressWidth
3.畫圓的時候,開始度數和結束度數一定要控制好哦。
4.如果您還有什麼不懂的,請多了解:Canvas 和Paint的相關方法和API,在此不勝感激。


寫這篇博客的目的為了分享,我也希望能給你們提供一些思路,希望大家把不錯的控件都共享出來,不勝感激。

好了,博客貼出去,肯定有很多人要Demo,為了防止蜘蛛亂抓取而丟失下載地址,地址請看代碼上的注明點。
轉載請注明作者來源:Spring sky .














  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved