Android自定义一款带进度条的精美按键
yuemeng0 2017-08-29
效果预览
不想阅读本文，可以直接到这里获取源码
阅读本文你需要掌握
自定义属性
ValueAnimator动画
Viwe的测量、绘制
Paint和Path的用法
动手实现
拆解
在动手编码之前，要静下心来分析一下，这款View是怎样组成的，也就是要把这个View拆解一下。分析后，不难发现主要有一下部分组成
- 圆形背景
- 圆环的背景
- 圆环
- 文字
知道这个View是怎样组成的，然后完成相应部分的编码，最后将这些部分按时间顺序进行拼装展示，就能达到文章开头那样的效果了。
分析原理
经过拆解，知道了这个View都有那几部分组成了，下面就来分析一下是怎样将以上部分进行整合的
- 在没点击之前，是一个中间带有文字的圆形。
- 点击之后圆形缩小，当缩小到一定程度后，圆环背景出现，同时，圆环进度条开始加载。
- 如果进度条加载完成，则改变文字（回调接口），抬起手后恢复原来的形状；如果没有加载完成，抬起手后，恢复原装，下次点击从新执行此步骤。
为了理解清楚，可以自己画一下流程图。
编码实现
相信，经过分析拆解之后，你脑子里应该有一个实现的流程了，下面就动手开始实现吧！
先将需要的画笔和路径进行初始化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | //初始化画笔及路径
private void initPaintOrPath() {
circleBgPaint = new Paint();
circleBgPaint.setAntiAlias(true);
circleBgPaint.setStyle(Paint.Style.FILL_AND_STROKE);
ringBgPaint = new Paint();
ringBgPaint.setColor(ringBgColor.getColorForState(getDrawableState(),0));
ringBgPaint.setAntiAlias(true);
ringBgPaint.setStrokeWidth(ringSize);
ringBgPaint.setStyle(Paint.Style.STROKE);
ringPaint = new Paint();
ringPaint.setColor(ringColor.getColorForState(getDrawableState(),0));
ringPaint.setAntiAlias(true);
ringPaint.setStrokeWidth(ringSize);
ringPaint.setStyle(Paint.Style.STROKE);
path = new Path();
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setColor(textColor.getColorForState(getDrawableState(),0));
textPaint.setTextSize(textSize);
} |
自定义View需要经过三个重要的步骤，测量，布局，绘制，分别对应onMeasure(),onLayout(),onDraw()方法。这里的onLayout()主要是对自定义ViewGroup的，自定义View只要重写onMeasure()和onDraw()方法就行了，按照自定义View的套路来，先进行测量，直接看代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获得父View传递过来的宽度的大小和类型
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
//获得父View传递过来的高度的大小和类型
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//初始化最终的宽高
int resultWidth = widthSize;
int resultHeight = heightSize;
//为了让文字可以在背景（圆形）中完全显示
if (mRadius * 2 < textPaint.measureText(contentText)) {
mRadius = (int) textPaint.measureText(contentText);
}
if (widthMode == MeasureSpec.AT_MOST) {
//获取我们需要的宽度
int contentWidth = (mRadius + space + ringSize)*2+ getPaddingLeft() + getPaddingRight();
//得到最终的宽度
resultWidth = (contentWidth < widthSize) ? resultWidth : contentWidth;
}
if (heightMode == MeasureSpec.AT_MOST) {
//获取我们需要的高度
int contentHeight = (mRadius + space + ringSize)*2 + getPaddingTop() + getPaddingBottom();
//得到最终的高度
resultHeight = (contentHeight < heightSize) ? resultHeight : contentHeight;
}
//设置测量后的宽高
setMeasuredDimension(resultWidth,resultHeight);
} |
代码中都有注释，相信你可以看的懂。下面就开始画我们需要的圆形，圆环背景，圆环和文字了，我们需要在onDraw()方法中进行作画，代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画圆，改变ringRadius就可以改变圆形背景的大小，主要控制value值的改变
ringRadius = mRadius - DPUtils.dip2px(getContext(),value/2);
circleBgPaint.setColor(circleColor.getColorForState(getDrawableState(),0));
canvas.drawCircle(getWidth() / 2, getHeight() / 2, ringRadius, circleBgPaint);
//用户按键时开始画圆环
if (startDrawLine){
//计算外环的半径，记得要减去外环的宽度的一半
result = ringRadius + space +ringSize/2;
//画完整的进度条
canvas.drawCircle(getWidth() / 2, getHeight() / 2, result, ringBgPaint);
//画进度条路径
path.reset();//重置路径，否则下次精度条不会从开始位置，可以注释掉此代码，看下效果
//计算画路径的矩形
float left = getWidth()/2-result;
float top = getHeight()/2-result;
float right = getWidth()/2+result;
float bottom = getHeight()/2+result;
RectF rect = new RectF(left,top, right ,bottom);
path.addArc(rect, -90, angle);//通过改变angle就可以动态的改变进度条
//画圆环的路径
canvas.drawPath(path, ringPaint);
}
canvas.drawText(contentText,getWidth()/2,getHeight()/2,textPaint);//文字
} |
完成以上几步，点击view时并没有反应，因为还没有为View添加触摸事件，也没有添加动画，进过分析原理那步，可以知道，手指按下时改变圆形背景的大小，既改变半径的大小……，这里就不在重复说了，直接看代码，代码中会有讲解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | @Override
public boolean onTouchEvent(final MotionEvent event) {
//控制加载完成时候是否还可以相应点击事件，可以通过setEnable()方法来控制
if (!enable && event.getAction()!=MotionEvent.ACTION_UP) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
//当手指按下时，移除手指抬起时的监听
if (animator != null) {
animator.removeAllUpdateListeners();
}
//改变narrowDown的值
animatorValue = ValueAnimator.ofInt(0, narrowDown);
animatorValue.setDuration(50);
animatorValue.setInterpolator(new LinearInterpolator());
animatorValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
value = (int) valueAnimator.getAnimatedValue();//改变value的值也就是按下手指让圆形背景缩小
if (value == narrowDown) {
//当缩小到一定值时开始画圆环和精度条
startDrawLine = true;//控制什么时候开始画圆环和进度条
animatorValue.removeAllUpdateListeners();//当开始画进度条时移除改变背景大小的动画，既停止改变
}
postInvalidate();//刷新画布
}
});
animatorValue.start();//开始缩小
angleAnimator = ValueAnimator.ofFloat(0, 360f);
angleAnimator.setDuration(2000);
angleAnimator.setInterpolator(new LinearInterpolator());
angleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
angle = (float) valueAnimator.getAnimatedValue();//angle用来画进度条，动态改变进度条加载的进度
if (angle == 360) {
//加载完成移除动画，既进度条停止加载
angleAnimator.removeAllUpdateListeners();
//进度条加载完成后的回调
onViewClick.onFinish(ImitateKeepButton.this);
}
postInvalidate();
}
});
angleAnimator.start();//开始加载
}
break;
case MotionEvent.ACTION_UP: {
angleAnimator.removeAllUpdateListeners();
animatorValue.removeAllUpdateListeners();
animator = ValueAnimator.ofInt(value,0);
animator.setDuration(300);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
value = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
animator.start();//开始恢复背景原来的大小
}
startDrawLine = false;
break;
}
return true;
} |
好了，到这里已经达到了文章开始时的效果，可以结束本文了。
结束语
文中代码，只是粘贴部分比较重要的，不完整，完整代码可以到这里获取源码。
转载请注明出处：www.wizardev.com
相关推荐
绿豆饼 0喜欢 / 0评论 2020-01-01
刘炳昭 0喜欢 / 0评论 2019-06-29
lgzaaron 0喜欢 / 0评论 2017-01-15
程序员的另一世界 0喜欢 / 0评论 2016-05-30
Mr傅 0喜欢 / 0评论 2014-04-11
chenjinlong 0喜欢 / 0评论 2012-04-24
移动开发者 0喜欢 / 0评论 2011-10-26
ohdajing 0喜欢 / 0评论 2011-10-23
AndroidGA 0喜欢 / 0评论 2011-06-02
yeaperyeo 0喜欢 / 0评论 2010-11-30
Rgenxiao 0喜欢 / 0评论 2013-05-28
fuzhangandroid 0喜欢 / 0评论 2012-06-23
MobileDeviceTalks 0喜欢 / 0评论 2018-02-08