Android 自定义学习(5)自定义Progressbar

自定义View学习的最后一期了,先上效果图。

相信大家心中都有自己的实现方法，这里就贴上我的方法以供参考。

/**
	 * 刻度画笔
	 */
	private Paint linePaint;
	/**
	 * 进度画笔
	 */
	private Paint textPaint;
	/**
	 * 进度
	 */
	private int index = 0;
	/**
	 * 刻度
	 */
	private int ruling = 0;

	private void init() {
		linePaint = new Paint();
		linePaint.setColor(Color.BLACK);
		linePaint.setStrokeWidth(5);
		linePaint.setAntiAlias(true);
		linePaint.setStyle(Style.FILL);

		textPaint = new Paint(linePaint);
		textPaint.setTextSize(70);
		textPaint.setColor(Color.WHITE);

		handler.sendEmptyMessage(0);
		handler.sendEmptyMessageDelayed(1, 2000);
	}

上述相信大家都可以明白。。接下来就是最关键的onDraw（）

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//移动画布
		canvas.translate(getWidth() / 2, getHeight() / 2);
		//填充背景
		canvas.drawColor(getResources().getColor(R.color.gray));
		//刻度总数
		int count = 30;
		//进度字占大小
		Rect rect = new Rect();
		String indexsString = String.valueOf(index);
		if (index < 10) {
			indexsString = "0" + indexsString;
		}
		textPaint.getTextBounds(indexsString, 0, indexsString.length(), rect);
		//进度字体
		canvas.drawText(indexsString, -rect.width() / 2, rect.height() / 2,
				textPaint);
		//旋转画布，画刻度,并根据ruling值来改变颜色
		for (int i = 0; i < count; i++) {
			if (i <= ruling) {
				linePaint.setColor(getResources().getColor(R.color.pink));
			} else {
				linePaint.setColor(Color.BLACK);
			}
			canvas.drawLine(0, 100, 0, 120, linePaint);
			canvas.rotate(360 / count, 0, 0);
		}
	}

注释的应该很详细不懂的也可以留言,接下来看看效果

完成了这个之后相信第二个也是手到擒来!

/**
	 * 圆环
	 */
	private Paint rectPaint;
	/**
	 * 刻度
	 */
	private Paint linePaint;
	/**
	 * 填充
	 */
	private Paint fillPaint;
	/**
	 * 进度字
	 */
	private Paint textPaint;
	private int index = 0;
	private int index2 = 0;
	
	public ProgressView2(Context context) {
		this(context, null);
		// TODO Auto-generated constructor stub
	}

	public ProgressView2(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		// TODO Auto-generated constructor stub
	}

	public ProgressView2(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init();

	}

	private void init() {
		rectPaint = new Paint();
		rectPaint.setAntiAlias(true);
		rectPaint.setStrokeWidth(20);
		rectPaint.setStyle(Style.STROKE);
		rectPaint.setColor(getResources().getColor(R.color.dark));

		linePaint = new Paint(rectPaint);
		linePaint.setStrokeWidth(20);
		linePaint.setColor(getResources().getColor(R.color.pink));

		fillPaint = new Paint(linePaint);
		fillPaint.setStrokeWidth(1);
		fillPaint.setColor(Color.BLACK);
		fillPaint.setAlpha(60);

		textPaint = new Paint();
		textPaint.setStrokeWidth(5);
		textPaint.setAntiAlias(true);
		textPaint.setTextSize(70);
		textPaint.setColor(Color.WHITE);

		handler.sendEmptyMessage(0);
		handler.sendEmptyMessage(1);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		//刻度数
		int count = 60;
		//背景色
		canvas.drawColor(getResources().getColor(R.color.gray));
		//移动画布
		canvas.translate(getWidth() / 2, getHeight() / 2);
		//圆环大小
		RectF rectF = new RectF(-100, -100, 100, 100);
		String indexString = String.valueOf(index);
		if (index < 10) {
			indexString = "0" + indexString;
		}
		Rect rect = new Rect();
		textPaint.getTextBounds(indexString, 0, <span style="font-family: Arial, Helvetica, sans-serif;">indexString </span><span style="font-family: Arial, Helvetica, sans-serif;">.length(), rect);</span>
		canvas.drawText(indexString, -rect.width() / 2, rect.height() / 2,
				textPaint);
		//圆环
		canvas.drawArc(rectF, 0, 360, false, rectPaint);
		//填充色
		canvas.drawArc(rectF, -90, index, false, linePaint);
		for (int i = 0; i < index2; i++) {
			canvas.drawLine(0, -90, 0, -110, fillPaint);
			canvas.rotate(360 / count, 0, 0);
		}

	}

效果图

PS:上传的代码中有一个bug，再onDraw中衡量字体大小时不应该用“00”.length(),应该用indexString.length()

粗心大意要不得啊

项目源码