自定义View之CircleIndicatorView实现圆形指
2017-06-30 本文已影响497人
wustor
项目中的自定义控件比较多，今天应该是最后一个了，看下UI效果
圆形指示器UI图
UI分析
- 内侧一个白色的虚线弧
- 外侧有两条弧，一个是灰色的实线弧，一个是白色的虚线弧，实线弧尾部有一个小圆点
- 中间是文字，大小不一致，颜色是白色
- 加载的时候需要一个加载动画，实线椭圆进度条跟可用额度数字需要同时从小到达变化
- 效果图
圆形指示器效果图
下面根据UI的分析，来分享一下实现的过程
自定义属性
- 文字的大小
- 线的颜色
- 虚线的间距
代码
//定义属性
<declare-styleable name="CircleIndicatorView">
<attr name="largeSize" format="dimension"/>
<attr name="smallSize" format="dimension"/>
<attr name="grayColor" format="color"/>
<attr name="whiteColor" format="color"/>
<attr name="lineSpace" format="dimension"/>
</declare-styleable>
//获取属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleIndicatorView);
mLargeSize = (int) ta.getDimension(R.styleable.CircleIndicatorView_largeSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, context.getResources().getDisplayMetrics()));
mSmallSize = (int) ta.getDimension(R.styleable.CircleIndicatorView_smallSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 13, context.getResources().getDisplayMetrics()));
mGrayColor = ta.getColor(R.styleable.CircleIndicatorView_grayColor, Color.GRAY);
mWhiteColor = ta.getColor(R.styleable.CircleIndicatorView_whiteColor, Color.WHITE);
ta.recycle();
onMeasure
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec), measureHeight(heightMeasureSpec));
}
private int measureWidth(int widthMeasureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(widthMeasureSpec);
int specSize = MeasureSpec.getSize(widthMeasureSpec);
switch (specMode) {
case MeasureSpec.EXACTLY:
result = specSize;
break;
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.AT_MOST:
break;
}
return result;
}
这里其实不需要考虑MeasureSpec.AT_MOST，因为这个圆的半径是一般是固定的，所以没有处理MeasureSpec.AT_MOST，如果需求需要处理的话其实也很简单，跟自定义View之IndexView进度条(一)中的一样，把相应的宽高进行累加即可，不是分析的重点，所以一笔带过。
onDraw
- 绘制内侧白色虚线弧度
//不加的话在高版本上虚线不显示
setLayerType(View.LAYER_TYPE_SOFTWARE,dashPaint);
//设置虚线间隔
PathEffect effects = new DashPathEffect(new float[]{20, 6}, 0);
dashPaint.setPathEffect(effects);
RectF dashedRectF = new RectF(mCenter - mRadius + 20 + getPaddingLeft(), mCenter - mRadius + 20 + getPaddingTop(), mCenter + mRadius - 20 - getPaddingRight(), mCenter + mRadius - 20 - getPaddingBottom());
float startAngle = 150;
canvas.drawArc(dashedRectF, startAngle, sweepAngle, false, dashPaint);
- 绘制外侧灰色弧度
canvas.drawArc(rectF, startAngle, sweepAngle, false, outPaint);
- 绘制外侧进度弧度
canvas.drawArc(rectF, startAngle, getInSweepAngle(), false, inPaint);
4.绘制外侧进度弧度的小圆点，实际上是一个Bitmap,注释比较详细，也比较简单，就是画布的平移跟旋转这个需要好好理解一下
//绘制发光的小圆点
Paint paintCircle = new Paint();
paintCircle.setStyle(Paint.Style.FILL);
paintCircle.setAntiAlias(true);//抗锯齿功能
canvas.translate(getWidth() / 2, getHeight() / 2);//画布平移到圆心
canvas.rotate(getInSweepAngle() + 60);//旋转画布使得画布的Y轴经过小圆点
canvas.translate(0, getHeight() / 2 - getPaddingLeft());//再次平移画布至小圆点绘制的位置
//此处省略了Bitmap的处理过程bmp
Bitmap dotBitmap = Bitmap.createBitmap(bmp, 0, 0, width, height, matrix, true);
canvas.drawBitmap(dotBitmap, -15, -15, paintCircle);
canvas.rotate(-(getInSweepAngle() + 60));//恢复canvas
5.绘制文字
这个在绘制数字的时候需要注意一下，因为传过来的是一个浮点数，需要拆分成整数跟小数两部分，但是当你讲float转化为String然后切割的时候，注意下需要将小数点进行转义，不然会分割失败
DecimalFormat decimalFormat = new DecimalFormat(".00");//构造方法的字符格式这里如果小数不足2位,会以0补足.
String value = decimalFormat.format(indexValue);//format 返回的是字符串
Log.d("value---->", value);
String[] split = value.split("\\.");
String text = split[0];//整数部分
刚进来时候的加载动画
这个其实就是两个属性动画同时播放而已，通过计算扇形扫过的角度与数字增长的幅度
，然后在属性动画的update里面进行重新绘制整个View，就可以搞定
float inSweepAngle = sweepAngle * value / 100;
ValueAnimator angleAnim = ValueAnimator.ofFloat(0f, inSweepAngle);//角度的ValueAnimator
float inValue = value * 8888 / 100;
ValueAnimator valueAnim = ValueAnimator.ofFloat(0, inValue);//数字变化的ValueAnimator
//一起播放动画
animatorSet.playTogether(angleAnim, valueAnim);
提供一个方法，供外部调用
public void goToPoint(float value) {
//在方法中进行播放动画
}
使用方法
mCircleIndicatorView.goToPoint(value);
