Android自定義圓弧進度條

挺久沒寫文章了奖地，近段時間被拉過去寫JS項目了橄唬，在做一個項目的時候，遇到一個新的需求就是空氣質(zhì)量参歹，實現(xiàn)空氣污染指數(shù)的時候仰楚，需要到一個圓弧的進度，在網(wǎng)上沒找到合適犬庇，干脆就自己寫了一個僧界，順便復(fù)習一下自定義View，下面是具體的實現(xiàn)臭挽。

先看一下效果

這里的話我只做一個進度條捂襟，使用也很簡單。圓弧外的文本是一個textview欢峰，不是這個控件里面的葬荷，說明一下。

下面先看一下整體的代碼：

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

public class ArcProgressBar extends View {

private static final String TAG = "ArcProgressBar";
/**
 * 圓弧的寬度
 */
private int mStrokeWidth = dp2px(8);
/**
 * 圓弧開始的角度
 */
private float mStartAngle = 135;
/**
 * 起點角度和終點角度對應(yīng)的夾角大小
 */
private float mAngleSize = 270;
/**
 * 圓弧背景顏色
 */
private int mArcBgColor = Color.YELLOW;
/**
 * 最大的進度纽帖，用于計算進度與夾角的比例
 */
private float mMaxProgress = 500;
/**
 * 當前進度對應(yīng)的起點角度到當前進度角度夾角的大小
 */
private float mCurrentAngleSize = 0;
/**
 * 當前進度
 */
private float mCurrentProgress = 0;
/**
 * 動畫的執(zhí)行時長
 */
private long mDuration = 3000;
/**
 * 進度圓弧的顏色
 */
private int mProgressColor = Color.RED;
/**
 * 第一行文本
 */
private String mFirstText = "42";
/**
 * 第一行文本的顏色
 */
private int mFirstTextColor = Color.RED;
/**
 * 第一行文本的字體大小
 */
private float mFirstTextSize = 56f;
/**
 * 第二行文本
 */
private String mSecondText = "優(yōu)";
/**
 * 第二行文本的顏色
 */
private int mSecondTextColor = Color.RED;
/**
 * 第二行文本的字體大小
 */
private float mSecondTextSize = 56f;


public ArcProgressBar(Context context) {
    super(context, null);
}

public ArcProgressBar(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs, 0);

}

public ArcProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initAttr(context, attrs);
}

/**
 * 設(shè)置初始化的參數(shù)
 *
 * @param context
 * @param attrs
 */
private void initAttr(Context context, AttributeSet attrs) {
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ArcProgressBar);
    mMaxProgress = array.getFloat(R.styleable.ArcProgressBar_arc_max_progress, 500f);
    mArcBgColor = array.getColor(R.styleable.ArcProgressBar_arc_bg_color, Color.YELLOW);
    mStrokeWidth = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_stroke_width, 12f));
    mCurrentProgress = array.getFloat(R.styleable.ArcProgressBar_arc_progress, 300f);
    mProgressColor = array.getColor(R.styleable.ArcProgressBar_arc_progress_color, Color.RED);
    mFirstText = array.getString(R.styleable.ArcProgressBar_arc_first_text);
    mFirstTextSize = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_first_text_size, 20f));
    mFirstTextColor = array.getColor(R.styleable.ArcProgressBar_arc_first_text_color, Color.RED);
    mSecondText = array.getString(R.styleable.ArcProgressBar_arc_second_text);
    mSecondTextSize = dp2px(array.getDimension(R.styleable.ArcProgressBar_arc_second_text_size, 20f));
    mSecondTextColor = array.getColor(R.styleable.ArcProgressBar_arc_second_text_color, Color.RED);
    mAngleSize = array.getFloat(R.styleable.ArcProgressBar_arc_angle_size, 270f);
    mStartAngle = array.getFloat(R.styleable.ArcProgressBar_arc_start_angle, 135f);
    array.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int centerX = getWidth() / 2;
    RectF rectF = new RectF();
    rectF.left = mStrokeWidth;
    rectF.top = mStrokeWidth;
    rectF.right = centerX * 2 - mStrokeWidth;
    rectF.bottom = centerX * 2 - mStrokeWidth;
    //畫最外層的圓弧
    drawArcBg(canvas, rectF);
    //畫進度
    drawArcProgress(canvas, rectF);
    //繪制第一級文本
    drawFirstText(canvas, centerX);
    //繪制第二級文本
    drawSecondText(canvas, centerX);

}


/**
 * 畫最開始的圓弧
 *
 * @param canvas
 * @param rectF
 */
private void drawArcBg(Canvas canvas, RectF rectF) {
    Paint mPaint = new Paint();
    //畫筆的填充樣式宠漩，Paint.Style.FILL 填充內(nèi)部;Paint.Style.FILL_AND_STROKE 填充內(nèi)部和描邊;Paint.Style.STROKE 描邊
    mPaint.setStyle(Paint.Style.STROKE);
    //圓弧的寬度
    mPaint.setStrokeWidth(mStrokeWidth);
    //抗鋸齒
    mPaint.setAntiAlias(true);
    //畫筆的顏色
    mPaint.setColor(mArcBgColor);
    //畫筆的樣式 Paint.Cap.Round 圓形,Cap.SQUARE 方形
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    //開始畫圓弧
    canvas.drawArc(rectF, mStartAngle, mAngleSize, false, mPaint);
}

/**
 * 畫進度的圓弧
 *
 * @param canvas
 * @param rectF
 */
private void drawArcProgress(Canvas canvas, RectF rectF) {
    Paint paint = new Paint();
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(mStrokeWidth);
    paint.setColor(mProgressColor);
    paint.setAntiAlias(true);
    paint.setStrokeCap(Paint.Cap.ROUND);
    canvas.drawArc(rectF, mStartAngle, mCurrentAngleSize, false, paint);
}


/**
 * 繪制第一級文字
 *
 * @param canvas  畫筆
 * @param centerX 位置
 */
private void drawFirstText(Canvas canvas, float centerX) {
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(mFirstTextColor);
    paint.setTextAlign(Paint.Align.CENTER);
    paint.setTextSize(mFirstTextSize);
    Rect firstTextBounds = new Rect();
    paint.getTextBounds(mFirstText, 0, mFirstText.length(), firstTextBounds);
    canvas.drawText(mFirstText, centerX, firstTextBounds.height() / 2 + getHeight() * 2 / 5, paint);
}

/**
 * 繪制第二級文本
 *
 * @param canvas  畫筆
 * @param centerX 文本
 */
private void drawSecondText(Canvas canvas, float centerX) {
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(mSecondTextColor);
    paint.setTextAlign(Paint.Align.CENTER);
    paint.setTextSize(mSecondTextSize);
    Rect bounds = new Rect();
    paint.getTextBounds(mSecondText, 0, mSecondText.length(), bounds);
    canvas.drawText(mSecondText, centerX, getHeight() / 2 + bounds.height() / 2 +
            getFontHeight(mSecondText, mSecondTextSize), paint);
}

/**
 * 設(shè)置最大的進度
 *
 * @param progress
 */
public void setMaxProgress(int progress) {
    if (progress < 0) {
        throw new IllegalArgumentException("Progress value can not be less than 0 ");
    }
    mMaxProgress = progress;
}

/**
 * 設(shè)置當前進度
 *
 * @param progress
 */
public void setProgress(float progress) {
    if (progress < 0) {
        throw new IllegalArgumentException("Progress value can not be less than 0");
    }
    if (progress > mMaxProgress) {
        progress = mMaxProgress;
    }
    mCurrentProgress = progress;
    float size = mCurrentProgress / mMaxProgress;
    mCurrentAngleSize = (int) (mAngleSize * size);
    setAnimator(0, mCurrentAngleSize);
}

/**
 * 設(shè)置進度圓弧的顏色
 *
 * @param color
 */
public void setProgressColor(int color) {
    if (color == 0) {
        throw new IllegalArgumentException("Color can no be 0");
    }
    mProgressColor = color;
}

/**
 * 設(shè)置圓弧的顏色
 *
 * @param color
 */
public void setArcBgColor(int color) {
    if (color == 0) {
        throw new IllegalArgumentException("Color can no be 0");
    }
    mArcBgColor = color;
}

/**
 * 設(shè)置圓弧的寬度
 *
 * @param strokeWidth
 */
public void setStrokeWidth(int strokeWidth) {
    if (strokeWidth < 0) {
        throw new IllegalArgumentException("strokeWidth value can not be less than 0");
    }
    mStrokeWidth = dp2px(strokeWidth);
}

/**
 * 設(shè)置動畫的執(zhí)行時長
 *
 * @param duration
 */
public void setAnimatorDuration(long duration) {
    if (duration < 0) {
        throw new IllegalArgumentException("Duration value can not be less than 0");
    }
    mDuration = duration;
}

/**
 * 設(shè)置第一行文本
 *
 * @param text
 */
public void setFirstText(String text) {
    mFirstText = text;
}

/**
 * 設(shè)置第一行文本的顏色
 *
 * @param color
 */
public void setFirstTextColor(int color) {
    if (color <= 0) {
        throw new IllegalArgumentException("Color value can not be less than 0");
    }
    mFirstTextColor = color;
}

/**
 * 設(shè)置第一行文本的大小
 *
 * @param textSize
 */
public void setFirstTextSize(float textSize) {
    if (textSize <= 0) {
        throw new IllegalArgumentException("textSize can not be less than 0");
    }
    mFirstTextSize = textSize;
}

/**
 * 設(shè)置第二行文本
 *
 * @param text
 */
public void setSecondText(String text) {
    mSecondText = text;
}

/**
 * 設(shè)置第二行文本的顏色
 *
 * @param color
 */
public void setSecondTextColor(int color) {
    if (color == 0) {
        throw new IllegalArgumentException("Color value can not be less than 0");
    }
    mSecondTextColor = color;
}

/**
 * 設(shè)置第二行文本的大小
 *
 * @param textSize
 */
public void setSecondTextSize(float textSize) {
    if (textSize <= 0) {
        throw new IllegalArgumentException("textSize can not be less than 0");
    }
    mSecondTextSize = textSize;
}

/**
 * 設(shè)置圓弧開始的角度
 *
 * @param startAngle
 */
public void setStartAngle(int startAngle) {
    mStartAngle = startAngle;
}

/**
 * 設(shè)置圓弧的起始角度到終點角度的大小
 *
 * @param angleSize
 */
public void setAngleSize(int angleSize) {
    mAngleSize = angleSize;
}

/**
 * dp轉(zhuǎn)成px
 *
 * @param dp
 * @return
 */
private int dp2px(float dp) {
    float density = getResources().getDisplayMetrics().density;
    return (int) (dp * density + 0.5f * (dp >= 0 ? 1 : -1));
}

/**
 * 設(shè)置動畫
 *
 * @param start  開始位置
 * @param target 結(jié)束位置
 */
private void setAnimator(float start, float target) {
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(start, target);
    valueAnimator.setDuration(mDuration);
    valueAnimator.setTarget(mCurrentAngleSize);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mCurrentAngleSize = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    valueAnimator.start();
}

/**
 * 測量字體的高度
 *
 * @param textStr
 * @param fontSize
 * @return
 */
private float getFontHeight(String textStr, float fontSize) {
    Paint paint = new Paint();
    paint.setTextSize(fontSize);
    Rect bounds = new Rect();
    paint.getTextBounds(textStr, 0, textStr.length(), bounds);
    return bounds.height();
}

}

然后是具體使用控件里面的代碼：

<com.amos.customview.ArcProgressBar
    android:id="@+id/arc"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_gravity="center"/>

這里使用非常簡單，跟其它控件的使用沒什么區(qū)別懊直。

里面還定義了很多直接在xml文件里面就可以直接設(shè)置的屬性

<declare-styleable name="ArcProgressBar">
    <attr name="arc_max_progress" format="float"/>
    <attr name="arc_bg_color" format="color"/>
    <attr name="arc_stroke_width" format="dimension"/>
    <attr name="arc_progress" format="float"/>
    <attr name="arc_progress_color" format="color"/>
    <attr name="arc_first_text" format="string"/>
    <attr name="arc_first_text_color" format="color"/>
    <attr name="arc_first_text_size" format="dimension"/>
    <attr name="arc_second_text" format="string"/>
    <attr name="arc_second_text_color" format="color"/>
    <attr name="arc_second_text_size" format="dimension"/>
    <attr name="arc_angle_size" format="float"/>
    <attr name="arc_start_angle" format="float"/>
</declare-styleable>

這個自定義View非常簡單扒吁，代碼里面注釋也寫的很清楚了，就不做過多的介紹了室囊，有興趣的可以去做更多的擴展瘦陈，比如，直接做成圓形或者扇形波俄，還有這里必須要兩行文本晨逝，如果項目需要，也可以直接去刪除掉文本懦铺，不過需要計算一下文本的繪制位置捉貌。

有興趣的可以去GitHub上面給個Start，地址是：傳送門

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末冬念，一起剝皮案震驚了整個濱河市趁窃，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌急前，老刑警劉巖醒陆，帶你破解...
    沈念sama閱讀 206,839評論 6贊 482
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異裆针，居然都是意外死亡刨摩，警方通過查閱死者的電腦和手機寺晌，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來澡刹，“玉大人呻征，你說我怎么就攤上這事“战剑” “怎么了陆赋？”我有些...
    開封第一講書人閱讀 153,116評論 0贊 344
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長嚷闭。 經(jīng)常有香客問我攒岛，道長，這世上最難降的妖魔是什么胞锰？ 我笑而不...
    開封第一講書人閱讀 55,371評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任阵子，我火速辦了婚禮，結(jié)果婚禮上胜蛉，老公的妹妹穿的比我還像新娘挠进。我一直安慰自己，他們只是感情好誊册，可當我...
    茶點故事閱讀 64,384評論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布领突。 她就那樣靜靜地躺著，像睡著了一般案怯。 火紅的嫁衣襯著肌膚如雪君旦。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,111評論 1贊 285
  • 城市分裂傳說
    那天嘲碱，我揣著相機與錄音金砍，去河邊找鬼。 笑死麦锯，一個胖子當著我的面吹牛恕稠，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播扶欣，決...
    沈念sama閱讀 38,416評論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼鹅巍，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了料祠？” 一聲冷哼從身側(cè)響起骆捧，我...
    開封第一講書人閱讀 37,053評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎髓绽，沒想到半個月后敛苇，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,558評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡顺呕，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年枫攀，在試婚紗的時候發(fā)現(xiàn)自己被綠了括饶。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1贊 334
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡脓豪，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出忌卤，到底是詐尸還是另有隱情扫夜，我是刑警寧澤，帶...
    沈念sama閱讀 33,756評論 4贊 324
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布驰徊，位于F島的核電站笤闯，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏棍厂。R本人自食惡果不足惜颗味，卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牺弹。 院中可真熱鬧浦马，春花似錦、人聲如沸张漂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0贊 19
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽航攒。三九已至磺陡，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間漠畜，已是汗流浹背币他。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留憔狞，地道東北人蝴悉。 一個月前我還...
    沈念sama閱讀 45,578評論 2贊 355
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像瘾敢，于是被迫代替她去往敵國和親辫封。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 42,877評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,517評論 25贊 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫廉丽、插件倦微、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,029評論 4贊 62
  • 聽說北方都下雪了，南方下點小雨吧正压，終于漸漸有了涼意欣福。 走在濕噠噠的小路上，一陣涼風徐來焦履，不經(jīng)打了個寒顫拓劝。心里卻升起...
    紫JZZ閱讀 235評論 1贊 3
  • 像山里的燈火 在孤獨和閃爍 夜是沉默的 把長長的河浸了透 同石頭一樣黢黑 一樣堅硬得冷酷 風兒沒有憂傷 在大地上東...
    青木西閱讀 249評論 0贊 0
  • 最先想來學(xué)彩鉛是源于卡卡西在朋友圈里發(fā)的學(xué)員畫的圖雏逾，第一眼就喜歡冰淇淋和棉花糖，畫得香甜軟糯 雖然畫的還不完美 所...
    葉子醬醬閱讀 301評論 0贊 1