自定義View之CircleIndicatorView實現圓形指示器

項目中的自定義控件比較多，今天應該是最後一個了，看下UI效果

• UI圖

圓形指示器UI圖

UI分析

1. 內側一個白色的虛線弧
2. 外側有兩條弧，一個是灰色的實線弧，一個是白色的虛線弧，實線弧尾部有一個小圓點
3. 中間是文字，大小不一致，顏色是白色
4. 加載的時候須要一個加載動畫，實線橢圓進度條跟可用額度數字須要同時從小到達變化

• 效果圖

圓形指示器效果圖

下面根據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

1. 繪製內側白色虛線弧度

//不加的話在高版本上虛線不顯示
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);複製代碼

1. 繪製外側灰色弧度

canvas.drawArc(rectF, startAngle, sweepAngle, false, outPaint);複製代碼

1. 繪製外側進度弧度

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

Demo下載地址