android自定义 ProgressBar(继承自View)

        github上已经有如此多漂亮的progressbar,可还是满足不了美工MM的胃口，无奈只得根据美工的需求，自定义一个符合要求的progrssbar了，美工给的效果图如下：

好看是好看，还要求上面指示器的颜色随着进度去改变，上网找了一番还真没有发现完全符合要求的，只好自己想办法了。

        思路：1.肯定的继承View或者progressbar去重写，由于我对progressbar的源码不太熟悉，就继承View开始自定义。继承progressbar一定可以更加轻松的实现，应为基本只需重写onDraw()方法即可。

                    2.就是重写 View的onDraw(), onMeasure(),onDetachedFromWindow(),onTouchEvent() 等若干方法。

       思路就这么点，下面先看最终效果：

       模拟器中的圆角度数有点太园了，用的时候可以调整下。

      源码如下：   

package com.example.demo;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;

/**
 * @author rzq
 * @function 风险指数标示View
 *
 */
public class IndiactorView extends View {

	/**
	 * 公共部分
	 */
	private static final int MAX = 100;
	private static final int ROUND_DEGREE = 8;
	private static final int[] cursorColors = new int[] { R.color.color_7ea1de,
			R.color.color_7aa7d6, R.color.color_73adcd, R.color.color_6cb4c4,
			R.color.color_66bbba, R.color.color_63c6a8, R.color.color_63cd99,
			R.color.color_6bce90, R.color.color_7dce8a, R.color.color_96cc84,
			R.color.color_b2c97d, R.color.color_d3c477, R.color.color_e9be72,
			R.color.color_fab76d, R.color.color_ffae68, R.color.color_ff9c60,
			R.color.color_f87653, R.color.color_ff8a5a, R.color.color_f0674e,
			R.color.color_e85548 };
	private Context mContext;
	private Resources res;
	private Paint mPaint;
	private DisplayMetrics dm;
	/**
	 * resource
	 */
	private Bitmap bitmapProgress;
	private Bitmap bitmapIndictor;

	/**
	 * 进度条宽高，坐标
	 */
	private float bitmapProgressWidth, bitmapProgressHeight;
	private float bitmapProgressX, bitmapProgressY;

	private float bitmapIndictorWidth, bitmapIndictorHeight;
	/**
	 * 手机屏幕宽高
	 */
	private int screenHeight, screenWidth;

	/**
	 * 指示矩形的宽高
	 */
	private int rectWidth;
	private int rectHeight;
	/**
	 * 风险指数内容
	 */
	private int cursorPosition = 0;
	private float precent = 0;
	private String drawText = "0/100";

	public IndiactorView(Context context, AttributeSet attrs) {
		super(context, attrs);
		this.mContext = context;
		this.res = getResources();
		initView();
	}

	private void initView() {
		mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

		dm = new DisplayMetrics();
		WindowManager wm = (WindowManager) mContext
				.getSystemService(Context.WINDOW_SERVICE);
		wm.getDefaultDisplay().getMetrics(dm);

		screenWidth = dm.widthPixels;
		screenHeight = dm.heightPixels;

		rectWidth = dip2px(47);
		rectHeight = dip2px(25);

		bitmapProgress = BitmapFactory.decodeResource(res,
				R.drawable.icon_indictor);
		bitmapIndictor = BitmapFactory.decodeResource(res, R.drawable.san_jiao);

		bitmapProgressWidth = bitmapProgress.getWidth();
		bitmapProgressHeight = bitmapProgress.getHeight();

		bitmapIndictorWidth = bitmapIndictor.getWidth();
		bitmapIndictorHeight = bitmapIndictor.getHeight();

		bitmapProgressX = (screenWidth - bitmapProgressWidth) / 2;
		bitmapProgressY = rectHeight + bitmapIndictorHeight;
	}

	/**
	 * 更新游标位置
	 * 
	 * @param position
	 */
	public void setPosition(int position) {

		cursorPosition = position;
		precent = (position * bitmapProgressWidth) / MAX;
		drawText = new StringBuilder().append(position).append("/100")
				.toString();
		/**
		 * 还要根据position设置paint颜色
		 */
		int offset = position / 5;
		if (offset == 20) {
			offset = offset - 1;
		}
		mPaint.setColor(res.getColor(cursorColors[offset]));
		invalidate();
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

		int viewHeight = (int) (bitmapIndictorHeight + bitmapProgressHeight + rectHeight);
		setMeasuredDimension((int) screenWidth, viewHeight);
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		return super.onTouchEvent(event);
	}

	@Override
	protected void onDraw(Canvas canvas) {

		/**
		 * 游标当前X坐标
		 */
		float cursorX = (cursorPosition > 0) ? (bitmapProgressX + precent - bitmapIndictorWidth / 2)
				: (bitmapProgressX + precent);

		canvas.drawBitmap(bitmapProgress, bitmapProgressX, bitmapProgressY,
				null);

		canvas.drawBitmap(bitmapIndictor, cursorX, rectHeight, null);

		/**
		 * 边界判断，防止超出屏幕
		 */
		if (cursorX + rectWidth >= screenWidth) {

			cursorX = cursorX - rectWidth + bitmapIndictorWidth;
		}
		RectF rect = new RectF(cursorX, 0, cursorX + rectWidth, rectHeight - 1);
		canvas.drawRoundRect(rect, ROUND_DEGREE, ROUND_DEGREE, mPaint);

		mPaint.setColor(Color.WHITE);
		mPaint.setTextSize(dip2px(11));
		float cursorTextX = (rectWidth - mPaint.measureText(drawText)) / 2;
		float cursorTextY = ((rectHeight / 2) - ((mPaint.descent() + mPaint
				.ascent()) / 2));
		canvas.drawText(drawText, cursorX + cursorTextX, cursorTextY, mPaint);

	}

	/**
	 * 释放资源，竟可能少消耗内存
	 */
	@Override
	protected void onDetachedFromWindow() {

		mContext = null;
		res = null;
		mPaint = null;
		dm = null;
		bitmapIndictor = null;
		bitmapProgress = null;
	}

	/**
	 * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
	 */
	private int dip2px(float dpValue) {
		return (int) (dpValue * dm.density + 0.5f);
	}
}

package com.example.demo;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;

public class MainActivity extends Activity {

	private IndiactorView indictorView;
	private int i = 0;
	private Handler handler = new Handler() {

		public void handleMessage(Message msg) {

			indictorView.setPosition(i++);
			if (i <= 100) {

				this.sendEmptyMessageDelayed(0x01, 500);
			}
		};
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		indictorView = (IndiactorView) findViewById(R.id.indictor_view);

		 indictorView.setPosition(i);

		handler.sendEmptyMessageDelayed(0x01, 500);
	}

}

      注释的已经很详细了，就不在啰嗦的解释代码了，源码及如何使用DEMO会在最后给出。

       扩展：对指示器添加触摸事件处理，可以将此progressbar扩站位一个带指示器的SeekBar,待后续完成后给出。有兴趣的也可以自行扩展。  

      DEMO下载