关闭

Android自定义View——带数字的进度条

436人阅读 评论(0) 收藏 举报
分类:

最近看到高德地图下载离线地图包的进度条效果,作为程序猿的本能就是想着怎样实现它


刚好在学习自定义控件,这个应该不需要处理事件消息,应该还是比较简单的。废话少说直接上效果图


NumProgressView.java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class NumProgressView extends View{
    
	private Paint mUnreachedBarPaint;
	private Paint mReachedBarPaint;
	private Paint mTextPaint;
	private int mDrawTextEnd;
    private int mCurrentProgress = 0;
    private int mMaxProgress = 100;
	private String mCurrentDrawText;
	private float mDrawTextWidth;
	private float mDrawTextStart;
	private RectF mReachedRectF = new RectF(0, 0, 0, 0);
	private RectF mUnreachedRectF  = new RectF(0, 0, 0, 0);
	private float mReachedBarHeight = 10;
	private float mUnreachedBarHeight = 10;
	

	public int getCurrentProgress() {
		return mCurrentProgress;
	}

	public void setCurrentProgress(int mCurrentProgress) {
		this.mCurrentProgress = mCurrentProgress;
	}

	public int getMaxProgress() {
		return mMaxProgress;
	}

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

	public NumProgressView(Context context) {
		this(context, null);
	}

	public NumProgressView(Context context, AttributeSet attrs) {
		 this(context, attrs, R.attr.numProgressStyle);
	}

	public NumProgressView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initializePainters();
	}

	@Override
	protected void onDraw(Canvas canvas) {
		//1.计算到达区域、未到达区域、Text坐标位置
		calculateDrawRectF();
		//2.画左边到达区域
		canvas.drawRect(mReachedRectF, mReachedBarPaint);
		//3.画右边未到达区域
		canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
		//4.画数字文本区域
		canvas.drawText(mCurrentDrawText, mDrawTextStart, mDrawTextEnd,mTextPaint);
		super.onDraw(canvas);
	}
	
	
	
    private void initializePainters() {
        mReachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mReachedBarPaint.setColor(Color.rgb(66, 145, 241));

        mUnreachedBarPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mUnreachedBarPaint.setColor(Color.rgb(66, 145, 241));

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(Color.rgb(66, 145, 241));
        mTextPaint.setTextSize(24);
        
    }
	
    private void calculateDrawRectF() {
        mReachedRectF.left = getPaddingLeft();
        mReachedRectF.top = getHeight() / 2.0f - mReachedBarHeight / 2.0f;
        mReachedRectF.right = (getWidth() - getPaddingLeft() - getPaddingRight()) / (getMaxProgress() * 1.0f) * getCurrentProgress() + getPaddingLeft();
        mReachedRectF.bottom = getHeight() / 2.0f + mReachedBarHeight / 2.0f;

        mUnreachedRectF.left = mReachedRectF.right;
        mUnreachedRectF.right = getWidth() - getPaddingRight();
        mUnreachedRectF.top = getHeight() / 2.0f + -mUnreachedBarHeight / 2.0f;
        mUnreachedRectF.bottom = getHeight() / 2.0f + mUnreachedBarHeight / 2.0f;
        
        mCurrentDrawText = String.format("%d", getCurrentProgress() * 100 / getMaxProgress()) + "%";
        mDrawTextWidth = mTextPaint.measureText(mCurrentDrawText);
        mDrawTextStart = mReachedRectF.right - mDrawTextWidth;
        mDrawTextEnd = (int) ((getHeight() / 2.0f) - ((mTextPaint.descent() + mTextPaint.ascent()) / 2.0f) - (mDrawTextWidth/2.0) - (mReachedRectF.height()/2.0));
    }
    
    
    public void increaseProgressBy(int by) {
        if (by > 0) {
            setProgress(getCurrentProgress() + by);
        }

    }

    public void setProgress(int progress) {
        if (progress <= getMaxProgress() && progress >= 0) {
            this.mCurrentProgress = progress;
            invalidate();
        }
    }

}


主要实现看 onDraw方法就可以了

	@Override
	protected void onDraw(Canvas canvas) {
		//1.计算到达区域、未到达区域、Text坐标位置
		calculateDrawRectF();
		//2.画左边到达区域
		canvas.drawRect(mReachedRectF, mReachedBarPaint);
		//3.画右边未到达区域
		canvas.drawRect(mUnreachedRectF, mUnreachedBarPaint);
		//4.画数字文本区域
		canvas.drawText(mCurrentDrawText, mDrawTextStart, mDrawTextEnd,mTextPaint);
		super.onDraw(canvas);
	}


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:59372次
    • 积分:1071
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:31篇
    • 译文:0篇
    • 评论:7条
    最新评论