項目中的自定義控件比較多，今天應該是最后一個了，看下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);
