1、概述

最近需要用進度條，秉著不重複造輪子的原則，上github上搜索了一番，看了幾個覺得比較好看的ProgressBar，比如：daimajia的等。簡單看了下程式碼，基本都是繼承自View，徹徹底底的自定義了一個進度條。盯著那絢麗滾動條，忽然覺得，為什麼要通過View去寫一個滾動條，系統已經提供了ProgressBar以及屬於它的特性，我們沒必要重新去構建一個，但是系統的又比較醜，不同版本變現還不一定一樣。那麼得出我們的目標：改變系統ProgressBar的樣子。

對沒錯，我們沒有必要去從0打造一個ProgressBar，人家雖然長的不好看，但是特性以及穩定性還是剛剛的，我們只需要為其整下容就ok了。

說到整容，大家都知道我們的控制元件是通過onDraw()畫出來的，那麼我們只需要去覆蓋它的onDraw()方法，自己寫下就ok 。

對了，我建立了一個微信公眾號，歡迎關注，左邊欄目上掃一掃即可。

接下來，我們貼下效果圖：

2、效果圖

1、橫向的進度條

2、圓形的進度條

沒錯，這就是我們的進度條效果，橫向的模仿了daimajia的進度條樣子。不過我們繼承子ProgressBar，簡單的為其整個容，程式碼清晰易懂。為什麼說，易懂呢？

橫向那個進度條，大家會drawLine()和drawText()吧，那麼通過getWidth()拿到控制元件的寬度，再通過getProgress()拿到進度，按比例控制繪製線的長短，字的位置還不是分分鐘的事。

3、實現

橫向的滾動條繪製肯定需要一些屬性，比如已/未到達進度的顏色、寬度，文字的顏色、大小等。
本來呢，我是想通過系統ProgressBar的progressDrawable，從裡面提取一些屬性完成繪製需要的引數的。但是，最終呢，反而讓程式碼變得複雜。所以最終還是改用自定義屬性。說道自定義屬性，大家應該已經不陌生了。

1、HorizontalProgressBarWithNumber

1、自定義屬性

values/attr_progress_bar.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="HorizontalProgressBarWithNumber">
        <attr name="progress_unreached_color" format="color" />
        <attr name="progress_reached_color" format="color" />
        <attr name="progress_reached_bar_height" format="dimension" />
        <attr name="progress_unreached_bar_height" format="dimension" />
        <attr name="progress_text_size" format="dimension" />
        <attr name="progress_text_color" format="color" />
        <attr name="progress_text_offset" format="dimension" />
        <attr name="progress_text_visibility" format="enum">
            <enum name="visible" value="0" />
            <enum name="invisible" value="1" />
        </attr>
    </declare-styleable>
    
    <declare-styleable name="RoundProgressBarWidthNumber">
        <attr name="radius" format="dimension" />
    </declare-styleable>

</resources>

12345678910111213141516171819202122

<?xml version="1.0"encoding="utf-8"?><resources><declare-styleable name="HorizontalProgressBarWithNumber"><attr name="progress_unreached_color"format="color"/><attr name="progress_reached_color"format="color"/><attr name="progress_reached_bar_height"format="dimension"/><attr name="progress_unreached_bar_height"format="dimension"/><attr name="progress_text_size"format="dimension"/><attr name="progress_text_color"format="color"/><attr name="progress_text_offset"format="dimension"/><attr name="progress_text_visibility"format="enum"><enumname="visible"value="0"/><enumname="invisible"value="1"/></attr></declare-styleable><declare-styleable name="RoundProgressBarWidthNumber"><attr name="radius"format="dimension"/></declare-styleable></resources>

2、構造中獲取

Java

public class HorizontalProgressBarWithNumber extends ProgressBar
{

	private static final int DEFAULT_TEXT_SIZE = 10;
	private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1;
	private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da;
	private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2;
	private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2;
	private static final int DEFAULT_SIZE_TEXT_OFFSET = 10;

	/**
	 * painter of all drawing things
	 */
	protected Paint mPaint = new Paint();
	/**
	 * color of progress number
	 */
	protected int mTextColor = DEFAULT_TEXT_COLOR;
	/**
	 * size of text (sp)
	 */
	protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);

	/**
	 * offset of draw progress
	 */
	protected int mTextOffset = dp2px(DEFAULT_SIZE_TEXT_OFFSET);

	/**
	 * height of reached progress bar
	 */
	protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);

	/**
	 * color of reached bar
	 */
	protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
	/**
	 * color of unreached bar
	 */
	protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;
	/**
	 * height of unreached progress bar
	 */
	protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
	/**
	 * view width except padding
	 */
	protected int mRealWidth;
	
	protected boolean mIfDrawText = true;

	protected static final int VISIBLE = 0;

	public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs)
	{
		this(context, attrs, 0);
	}

	public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs,
			int defStyle)
	{
		super(context, attrs, defStyle);
		
		setHorizontalScrollBarEnabled(true);

		obtainStyledAttributes(attrs);

		mPaint.setTextSize(mTextSize);
		mPaint.setColor(mTextColor);

	}
	
	/**
	 * get the styled attributes
	 * 
	 * @param attrs
	 */
	private void obtainStyledAttributes(AttributeSet attrs)
	{
		// init values from custom attributes
		final TypedArray attributes = getContext().obtainStyledAttributes(
				attrs, R.styleable.HorizontalProgressBarWithNumber);

		mTextColor = attributes
				.getColor(
						R.styleable.HorizontalProgressBarWithNumber_progress_text_color,
						DEFAULT_TEXT_COLOR);
		mTextSize = (int) attributes.getDimension(
				R.styleable.HorizontalProgressBarWithNumber_progress_text_size,
				mTextSize);

		mReachedBarColor = attributes
				.getColor(
						R.styleable.HorizontalProgressBarWithNumber_progress_reached_color,
						mTextColor);
		mUnReachedBarColor = attributes
				.getColor(
						R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color,
						DEFAULT_COLOR_UNREACHED_COLOR);
		mReachedProgressBarHeight = (int) attributes
				.getDimension(
						R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height,
						mReachedProgressBarHeight);
		mUnReachedProgressBarHeight = (int) attributes
				.getDimension(
						R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height,
						mUnReachedProgressBarHeight);
		mTextOffset = (int) attributes
				.getDimension(
						R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,
						mTextOffset);

		int textVisible = attributes
				.getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,
						VISIBLE);
		if (textVisible != VISIBLE)
		{
			mIfDrawText = false;
		}
		attributes.recycle();
	}

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122

publicclassHorizontalProgressBarWithNumberextendsProgressBar{privatestaticfinalintDEFAULT_TEXT_SIZE=10;privatestaticfinalintDEFAULT_TEXT_COLOR=0XFFFC00D1;privatestaticfinalintDEFAULT_COLOR_UNREACHED_COLOR=0xFFd3d6da;privatestaticfinalintDEFAULT_HEIGHT_REACHED_PROGRESS_BAR=2;privatestaticfinalintDEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR=2;privatestaticfinalintDEFAULT_SIZE_TEXT_OFFSET=10;/** * painter of all drawing things */protectedPaint mPaint=newPaint();/** * color of progress number */protectedintmTextColor=DEFAULT_TEXT_COLOR;/** * size of text (sp) */protectedintmTextSize=sp2px(DEFAULT_TEXT_SIZE);/** * offset of draw progress */protectedintmTextOffset=dp2px(DEFAULT_SIZE_TEXT_OFFSET);/** * height of reached progress bar */protectedintmReachedProgressBarHeight=dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);/** * color of reached bar */protectedintmReachedBarColor=DEFAULT_TEXT_COLOR;/** * color of unreached bar */protectedintmUnReachedBarColor=DEFAULT_COLOR_UNREACHED_COLOR;/** * height of unreached progress bar */protectedintmUnReachedProgressBarHeight=dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);/** * view width except padding */protectedintmRealWidth;protectedbooleanmIfDrawText=true;protectedstaticfinalintVISIBLE=0;publicHorizontalProgressBarWithNumber(Context context,AttributeSet attrs){this(context,attrs,0);}publicHorizontalProgressBarWithNumber(Context context,AttributeSet attrs,intdefStyle){super(context,attrs,defStyle);setHorizontalScrollBarEnabled(true);obtainStyledAttributes(attrs);mPaint.setTextSize(mTextSize);mPaint.setColor(mTextColor);}/** * get the styled attributes * * @param attrs */privatevoidobtainStyledAttributes(AttributeSet attrs){// init values from custom attributesfinalTypedArray attributes=getContext().obtainStyledAttributes(attrs,R.styleable.HorizontalProgressBarWithNumber);mTextColor=attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_text_color,DEFAULT_TEXT_COLOR);mTextSize=(int)attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_text_size,mTextSize);mReachedBarColor=attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_reached_color,mTextColor);mUnReachedBarColor=attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color,DEFAULT_COLOR_UNREACHED_COLOR);mReachedProgressBarHeight=(int)attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height,mReachedProgressBarHeight);mUnReachedProgressBarHeight=(int)attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height,mUnReachedProgressBarHeight);mTextOffset=(int)attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_text_offset,mTextOffset);inttextVisible=attributes.getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility,VISIBLE);if(textVisible!=VISIBLE){mIfDrawText=false;}attributes.recycle();}

嗯，看起來程式碼挺長，其實都是在獲取自定義屬性，沒什麼技術含量。

3、onMeasure

剛才不是出onDraw裡面寫寫就行了麼，為什麼要改onMeasure呢，主要是因為我們所有的屬性比如進度條寬度讓使用者自定義了，所以我們的測量也得稍微變下。

Java

@Override  
protected synchronized void onMeasure(int widthMeasureSpec,  
        int heightMeasureSpec)  
{  
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);  
  
    if (heightMode != MeasureSpec.EXACTLY)  
    {  
  
        float textHeight = (mPaint.descent() + mPaint.ascent());  
        int exceptHeight = (int) (getPaddingTop() + getPaddingBottom() + Math  
                .max(Math.max(mReachedProgressBarHeight,  
                        mUnReachedProgressBarHeight), Math.abs(textHeight)));  
  
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight,  
                MeasureSpec.EXACTLY);  
    }  
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  
}

1234567891011121314151617181920

@OverrideprotectedsynchronizedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){intheightMode=MeasureSpec.getMode(heightMeasureSpec);if(heightMode!=MeasureSpec.EXACTLY){floattextHeight=(mPaint.descent()+mPaint.ascent());intexceptHeight=(int)(getPaddingTop()+getPaddingBottom()+Math.max(Math.max(mReachedProgressBarHeight,mUnReachedProgressBarHeight),Math.abs(textHeight)));heightMeasureSpec=MeasureSpec.makeMeasureSpec(exceptHeight,MeasureSpec.EXACTLY);}super.onMeasure(widthMeasureSpec,heightMeasureSpec);}

寬度我們不變，所以的自定義屬性不涉及寬度，高度呢，只考慮不是EXACTLY的情況（使用者明確指定了，我們就不管了），根據padding和進度條寬度算出自己想要的，如果非EXACTLY下，我們進行exceptHeight封裝，傳入給控制元件進行測量高度。

測量完，就到我們的onDraw了~~~

4、onDraw

Java

@Override
	protected synchronized void onDraw(Canvas canvas)
	{
		canvas.save();
		//畫筆平移到指定paddingLeft， getHeight() / 2位置，注意以後座標都為以此為0，0
		canvas.translate(getPaddingLeft(), getHeight() / 2);

		boolean noNeedBg = false;
		//當前進度和總值的比例
		float radio = getProgress() * 1.0f / getMax();
		//已到達的寬度
		float progressPosX = (int) (mRealWidth * radio);
		//繪製的文字
		String text = getProgress() + "%";

		//拿到字型的寬度和高度
		float textWidth = mPaint.measureText(text);
		float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;

		//如果到達最後，則未到達的進度條不需要繪製
		if (progressPosX + textWidth > mRealWidth)
		{
			progressPosX = mRealWidth - textWidth;
			noNeedBg = true;
		}

		// 繪製已到達的進度
		float endX = progressPosX - mTextOffset / 2;
		if (endX > 0)
		{
			mPaint.setColor(mReachedBarColor);
			mPaint.setStrokeWidth(mReachedProgressBarHeight);
			canvas.drawLine(0, 0, endX, 0, mPaint);
		}
	
		// 繪製文字
		if (mIfDrawText)
		{
			mPaint.setColor(mTextColor);
			canvas.drawText(text, progressPosX, -textHeight, mPaint);
		}

		// 繪製未到達的進度條
		if (!noNeedBg)
		{
			float start = progressPosX + mTextOffset / 2 + textWidth;
			mPaint.setColor(mUnReachedBarColor);
			mPaint.setStrokeWidth(mUnReachedProgressBarHeight);
			canvas.drawLine(start, 0, mRealWidth, 0, mPaint);
		}

		canvas.restore();

	}

	@Override
	protected void onSizeChanged(int w, int h, int oldw, int oldh)
	{
		super.onSizeChanged(w, h, oldw, oldh);
		mRealWidth = w - getPaddingRight() - getPaddingLeft();

	}

Android 打造形形色色的進度條實現可以如此簡單

1、概述

2、效果圖

1、橫向的進度條

2、圓形的進度條

3、實現

1、HorizontalProgressBarWithNumber

1、自定義屬性

2、構造中獲取

3、onMeasure

4、onDraw

Android 打造形形色色的進度條實現可以如此簡單

Android 打造形形色色的進度條實現可以如此簡單

Android原生繪圖進度條+簡單自定義屬性程式碼生成器

linux—進度條彩色版簡單實現

【Android】一、Progress進度條實現的三種方式：主執行緒實現，Service載入，動態建立

Android自定義圓形進度條實現程式碼

Android檔案下載進度條的實現

Android花樣loading進度條（二）-簡單環形進度條

Android閃屏頁圓形倒計時進度條實現

Android 自定義進度條ColorfulProgressBar，原理簡單、效果很棒

Android 仿微信載入H5頁面進度條實現

jquery 簡單的進度條實現程式碼

Android更新帶進度條的通知欄

aNDROID自定義進度條顏色

javascript使用ajax下載文件進度條實現

PHP 遠程文件下載的進度條實現

進度條 ProgressBar的簡單運用

android:漸變色進度條（圓環）

頁面載入進度條實現——readyState和onreadystatechange

自定義控制元件Android圓環進度條

Android 打造形形色色的進度條 實現可以如此簡單

1、概述

2、效果圖

1、橫向的進度條

2、圓形的進度條

3、實現

1、HorizontalProgressBarWithNumber

1、自定義屬性

2、構造中獲取

3、onMeasure

4、onDraw

相關推薦

Android 打造形形色色的進度條實現可以如此簡單