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

原创 2015年11月17日 21:59:16

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


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


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);
	}


版权声明:本文为博主原创文章,未经博主允许不得转载。

我的Android进阶之旅------>Android自定义View实现带数字的进度条(NumberProgressBar)

今天在Github上面看到一个来自于 daimajia所写的关于Android自定义View实现带数字的进度条(NumberProgressBar)的精彩案例,在这里分享给大家一起来学习学习!同时感谢...

Android 带百分比数字的水平、圆形进度条

https://github.com/bingoogolapple/BGAProgressBar-AndroidBGAProgressBar-Android主要功能: Android 系统自带的 Pr...

我的Android进化论——[View自定义] 画双环进度条

正在学习中,大神请指教 最近需要双环形进度条,就长下面这样: (为毛贴图这么不清晰啊...) 于是,就练习了下简单的自定义view。 虽然很简单,但是纪录一下。 代码如下,注释很详细 i...

Android自定义View——菊花进度条

当你看完这篇博客过后,相信你已经可以摸到自定义View的门道了,本篇博客将带你走一遍自定义View之旅废话不多说先上效果图。实现思路1. 创建attrs.xml文件,自定义一些我们需要的属性,对于fo...
  • a_zhon
  • a_zhon
  • 2016年11月12日 21:40
  • 4565

Android 自定义View——动态进度条

效果图: 这个是看了梁肖的demo,根据他的思路自己写了一个,但是我写的这个貌似计算还是有些问题,这个过程还是有点曲折的,不过还是觉得收获挺多的。比如通动画来进行动态的展示(之前做的都是通过Ha...

Android自定义View分享——一个水平的进度条

笔者近来在学习Android自定义View,收集了一些不算复杂但又“长得”还可以的自定义View效果实现,这些View的逻辑不算复杂,大多都只用到了Paint、Canvas类的一些常用的API。在后续...

使用 Android Studio自定义View03——圆环进度条

整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/24500107 要实现的效果如图: 分析一下,需要这么几个属性:两个...
  • lvyoujt
  • lvyoujt
  • 2016年06月05日 18:13
  • 1067

自定义View之——图片加载进度条

  • 2016年08月18日 11:52
  • 9.34MB
  • 下载

Android自定义View:圆环带数字百分比的进度条

分享一个自己制作的Android自定义View。是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动。先来一张效果图。 先说一下思路:这个View一共分为三部分:第一部分...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义View——带数字的进度条
举报原因:
原因补充:

(最多只允许输入30个字)