SuperCircleSampleAndroid 可配置圓環(huán)

Android自定義view實現(xiàn)可配置圓環(huán)和圓環(huán)動畫。

實現(xiàn)思路步驟

1. 畫一個實心的白色圓

2. 畫一個默認的灰色的圓環(huán)

3. 畫一個帶顏色的白色圓環(huán)

這些是要用到的一些變量:

 private int mViewWidth; //view的寬
    private int mViewHeight;    //view的高
    private int mViewCenterX;   //view寬的中心點
    private int mViewCenterY;   //view高的中心點
    private int mMinRadio; //最里面白色圓的半徑
    private float mRingWidth; //圓環(huán)的寬度
    private int mSelect;    //分成多少段
    private int mSelectAngle;   //每個圓環(huán)之間的間隔
    private int mMinCircleColor;    //最里面圓的顏色
    private int mMaxCircleColor;    //最外面圓的顏色
    private int mRingNormalColor;    //默認圓環(huán)的顏色
    private Paint mPaint;    private int color[] = new int[3];   //漸變顏色

    private float mRingAngleWidth;  //每一段的角度

    private RectF mRectF; //圓環(huán)的矩形區(qū)域
    private int mSelectRing = 0;        //要顯示幾段彩色

    private boolean isShowSelect = false;   //是否顯示斷

在onLayout中取得中心點，和圓環(huán)區(qū)域(RectF)

 @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        super.onLayout(changed, left, top, right, bottom);
        mViewWidth = getMeasuredWidth();
        mViewHeight = getMeasuredHeight();
        mViewCenterX = mViewWidth / 2;
        mViewCenterY = mViewHeight / 2;
        mRectF = new RectF(mViewCenterX - mMinRadio - mRingWidth / 2, mViewCenterY - mMinRadio - mRingWidth / 2, mViewCenterX + mMinRadio + mRingWidth / 2, mViewCenterY + mMinRadio + mRingWidth / 2);
        mRingAngleWidth = (360 - mSelect * mSelectAngle) / mSelect;
    }

這里mRectF區(qū)域的left是中心點減去最里面實心圓的半價然后在減去圓環(huán)的寬度，right則相加;right和top一樣的道理；每個端的角度就是（360°-斷的數(shù)量*段與段之間的間隔）/端的數(shù)量 ####現(xiàn)在開始畫了 畫最里面的實心圓和最外面的灰色圓

  @Override
    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        /**         * 顯示彩色斷大于總共的段數(shù)是錯誤的         */
        if (isShowSelect && mSelectRing > mSelect) {            return;
        }
        mPaint.setColor(mMaxCircleColor);
        canvas.drawCircle(mViewCenterX, mViewCenterY, mMinRadio + mRingWidth + 20, mPaint);
        mPaint.setColor(mMinCircleColor);
        canvas.drawCircle(mViewCenterX, mViewCenterY, mMinRadio, mPaint);        //畫默認圓環(huán)
        drawNormalRing(canvas);        //畫彩色圓環(huán)
        drawColorRing(canvas);
    }

畫默認的圓環(huán) 首先設(shè)置畫筆只填充邊距，畫筆的寬度和顏色

Paint ringNormalPaint = new Paint(mPaint);
        ringNormalPaint.setStyle(Paint.Style.STROKE);
        ringNormalPaint.setStrokeWidth(mRingWidth);
        ringNormalPaint.setColor(mRingNormalColor);

然后畫一個360的圓環(huán)

 canvas.drawArc(mRectF, 270, 360, false, ringNormalPaint);

最后判斷是否要顯示段，如果顯示就在剛才圓環(huán)的基礎(chǔ)上畫7個小的間隔

 if (!isShowSelect) {            return;
        }
        ringNormalPaint.setColor(mMaxCircleColor);        for (int i = 0; i < mSelect; i++) {
            canvas.drawArc(mRectF, 270 + (i * mRingAngleWidth + (i) * mSelectAngle), mSelectAngle, false, ringNormalPaint);
        }

這邊之所以是從270°開始是因為默認的0°在我們常見的90°的地方

畫彩色的圓環(huán)和默認的圓環(huán)的原理是一樣的