手把手教你撸出一个圆形加载进度条
手撸一个精美的环形进度条,一步一步教你学会自定义View
BraveJoy的博客地址:
http://www.jianshu.com/p/be71f6ffe512
最近很长一段时间都在撸自定义View,说实话,在成为大牛的路上,这一块是必走之路,而作为菜鸡的我必须把它啃下来,俗话说不会自定义View的大牛不是好的程序猿,所以呢,强撸吧!!!
先来看一张漂亮妹子的图片,额呸呸呸,不对,是来看一张效果图图片(手动滑稽)。
看到这样的一个效果,该如何去实现呢?下面我就一步一步的把她撸出来!
思路
1.自定义属性:文字的颜色和字体大小,圆弧的颜色和宽度,一开始加载进度的位置,等等;
2.画出需要的效果:画圆弧,画字体,使用画笔paint在canvas上绘制;
3.设置进度,重新绘制;
4.接口回调。
好的,接下来我们就按照这个思路一步一步的撸:
1.自定义我们需要的属性:
在values文件夹下新建文件attrs.xml
<declare-styleable name="CircleProgressView">
<!--画笔宽度-->
<attr name="progress_paint_width" format="dimension" />
<!--画笔颜色-->
<attr name="progress_paint_color" format="color" />
<!--字体颜色-->
<attr name="progress_text_color" format="color" />
<!--字体尺寸-->
<attr name="progress_text_size" format="dimension" />
<!--加载进度的开始位置-->
<attr name="location" format="enum">
<enum name="left" value="1" />
<enum name="top" value="2" />
<enum name="right" value="3" />
<enum name="bottom" value="4" />
</attr>
</declare-styleable>
然后在自定义View中获取并设置这些属性: 首先,来声明我们的属性类型:
private int mCurrent;//当前进度
private Paint mPaintOut;
private Paint mPaintCurrent;
private Paint mPaintText;
private float mPaintWidth;//画笔宽度
private int mPaintColor = Color.RED;//画笔颜色
private int mTextColor = Color.BLACK;//字体颜色
private float mTextSize;//字体大小
private int location;//从哪个位置开始
private float startAngle;//开始角度
获取自定义属性值:
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
location = array.getInt(R.styleable.CircleProgressView_location, 1);
mPaintWidth = array.getDimension(R.styleable.CircleProgressView_progress_paint_width, dip2px(context, 4));//默认4dpmPaintColor = array.getColor(R.styleable.CircleProgressView_progress_paint_color, mPaintColor);
mTextSize = array.getDimension(R.styleable.CircleProgressView_progress_text_size, dip2px(context, 18));//默认18spmTextColor = array.getColor(R.styleable.CircleProgressView_progress_text_color, mTextColor);array.recycle();
初始化和赋值:
//画笔->背景圆弧
mPaintOut = new Paint();
mPaintOut.setAntiAlias(true);
mPaintOut.setStrokeWidth(mPaintWidth);
mPaintOut.setStyle(Paint.Style.STROKE);
mPaintOut.setColor(Color.GRAY);
mPaintOut.setStrokeCap(Paint.Cap.ROUND);//画笔->进度圆弧
mPaintCurrent = new Paint();
mPaintCurrent.setAntiAlias(true);
mPaintCurrent.setStrokeWidth(mPaintWidth);
mPaintCurrent.setStyle(Paint.Style.STROKE);
mPaintCurrent.setColor(mPaintColor);
mPaintCurrent.setStrokeCap(Paint.Cap.ROUND);//画笔->绘制字体
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setStyle(Paint.Style.FILL);
mPaintText.setColor(mTextColor);
mPaintText.setTextSize(mTextSize);
2.画出需要的效果:画圆弧,画字体,使用画笔paint在canvas上绘制:
注意:绘制操作是在onDraw(Canvas canvas)方法中。
第一步:绘制背景灰色圆弧
:我们使用cancas的drawArc()方法,来了解一下这个方法是什么意思:
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint){}
oval // 绘制范围
startAngle // 开始角度
sweepAngle // 扫过角度
useCenter // 是否使用中心
至于这些都是什么意思,我讲一堆未必能懂,怎么办?
假设是这样:canvas.drawArc(rectF, 45, 90, false, mPaintOut);代表:从45°开始,扫过90°范围,方向是顺时针方向绘制,至于那个false是什么意思,暂时先不管,传true一般画扇形图才能用到。
来看看草图:
好的,一目了然,如果我们要画一个圆圈怎么办呢,很简单,扫过的范围是360°就OK了。起点在哪个位置就无所谓了。看到这里有些人就要问了,画圆为什么不使用canvas.drawCircle()方法,这是因为后面要画的圆弧使用的也是drawArc()方法,所以为了易懂我们都用这个吧(手动大笑)。
//绘制背景圆弧,因为画笔有一定的宽度,所有画圆弧的范围要比View本身的大小稍微小一些,不然画笔画出来的东西会显示不完整
RectF rectF = new RectF(mPaintWidth / 2, mPaintWidth / 2, getWidth() - mPaintWidth / 2, getHeight() - mPaintWidth / 2);
canvas.drawArc(rectF, 0, 360, false, mPaintOut);
第二步:绘制当前进度的圆弧
这里有人就发现了,我们还继续按照上面的方式只要传入不同的sweepAngle扫过角度的值不就好了吗?yes,没错。我们只要计算出当前百分比所对应的角度值是多少度就OK了。很简单的一个公式:画个草图吧!
那么代码就很容易写了。
//绘制当前进度float sweepAngle = 360 * mCurrent / 100;
canvas.drawArc(rectF, startAngle, sweepAngle, false, mPaintCurrent);
第三步:绘制文字
先来看看canvas的方法:
// 参数分别为 (文本 基线x 基线y 画笔)canvas.drawText(String text, float x, float y,Paint paint);
基线是个什么鬼,画个草图吧!
OK,上代码:
//绘制进度数字
String text = mCurrent + "%"; //获取文字宽度
float textWidth = mPaintText.measureText(text, 0, text.length()); float dx = getWidth() / 2 - textWidth / 2;
Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt(); float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom; float baseLine = getHeight() / 2 + dy;
canvas.drawText(text, dx, baseLine, mPaintText);
为什么这么写,说白了都是套路。。。。。。
3.设置进度,重新绘制;
为了让当前进度mCurrent从0~100的增加,我们需要暴露一个方法可以实时的设置mCurrent值然后不断的进行绘制界面。
/**
* 设置当前进度并重新绘制界面 *
* @param mCurrent
*/
public void setmCurrent(int mCurrent) {
this.mCurrent = mCurrent;
invalidate();
}
相信很所人都知道只要调用了 invalidate()方法,正常情况下系统就会调用onDraw方法,然后就可以不断的绘制界面了。 这里写个属性动画来达到进度条加载的效果:
//进度条从0到100ValueAnimator animator = ValueAnimator.ofFloat(0, 100);
animator.setDuration(4000);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) { float current = (float) animation.getAnimatedValue();
mCircleProgressView.setmCurrent((int) current);
}
});
animator.start();
4.接口回调。
这一步就很简单了,只要监听进度条达到100就是完成了加载,所以我们先来写一个接口。
//声明接口
public interface OnLoadingCompleteListener {
void complete();
}
//暴露回调方法
public void setOnLoadingCompleteListener(OnLoadingCompleteListener loadingCompleteListener) {
this.mLoadingCompleteListener = loadingCompleteListener;
}
//监听
if (mLoadingCompleteListener != null && mCurrent == 100) {
mLoadingCompleteListener.complete();
}
在对应的Activity中回调接口就可以了。
OK,到这里就算全部结束了
部分关键代码
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas); //绘制背景圆弧,因为画笔有一定的宽度,所有画圆弧的范围要比View本身的大小稍微小一些,不然画笔画出来的东西会显示不完整
RectF rectF = new RectF(mPaintWidth / 2, mPaintWidth / 2, getWidth() - mPaintWidth / 2, getHeight() - mPaintWidth / 2);
canvas.drawArc(rectF, 0, 360, false, mPaintOut); //绘制当前进度
float sweepAngle = 360 * mCurrent / 100;
canvas.drawArc(rectF, startAngle, sweepAngle, false, mPaintCurrent); //绘制进度数字
String text = mCurrent + "%"; //获取文字宽度
float textWidth = mPaintText.measureText(text, 0, text.length());
float dx = getWidth() / 2 - textWidth / 2;
Paint.FontMetricsInt fontMetricsInt = mPaintText.getFontMetricsInt();
float dy = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom; float baseLine = getHeight() / 2 + dy;
canvas.drawText(text, dx, baseLine, mPaintText);
if (mLoadingCompleteListener != null && mCurrent == 100) {
mLoadingCompleteListener.complete();
}
}
博客地址:
http://www.jianshu.com/p/2b5ef5e18fe5
项目地址:
https://github.com/SuperKotlin/CirclrProgress
终端研发部提倡: 没有做不到的,只有想不到的。
在这里获得的不仅仅是技术!
这里学到不仅仅是技术