Android自定義View圓形進(jìn)度條控件（三）
更新時間：2020年05月16日 10:52:25 作者：猴菇先生
這篇文章主要為大家詳細(xì)介紹了Android自定義View圓形進(jìn)度條控件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
繼續(xù)練習(xí)自定義View，這次帶來的圓形進(jìn)度條控件與之前的圓形百分比控件大同小異，這次涉及到了漸變渲染以及畫布旋轉(zhuǎn)等知識點，效果如下：
雖然步驟類似，但是我還是要寫，畢竟基礎(chǔ)的東西就是要多練
1、在res/values文件夾下新建attrs.xml文件，編寫自定義屬性：
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CircleProgressView"> <!-- 弧線寬度 --> <attr name="arcWidth" format="dimension" /> <!-- 刻度個數(shù) --> <attr name="scaleCount" format="integer" /> <!-- 漸變起始顏色 --> <attr name="startColor" format="color" /> <!-- 漸變終止顏色 --> <attr name="endColor" format="color" /> <!-- 標(biāo)簽說明文本 --> <attr name="labelText" format="string" /> <!-- 文本顏色 --> <attr name="textColor" format="color" /> <!-- 百分比文本字體大小 --> <attr name="progressTextSize" format="dimension" /> <!-- 標(biāo)簽說明字體大小 --> <attr name="labelTextSize" format="dimension" /> </declare-styleable> </resources>
2、新建CircleProgressView繼承View，重寫構(gòu)造方法：
public CircleProgressView(Context context) {
this(context, null);
}
public CircleProgressView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
3、在第三個構(gòu)造方法中獲取自定義屬性的值：
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView, defStyleAttr, 0);
mArcWidth = ta.getDimension(R.styleable.CircleProgressView_arcWidth, DensityUtils.dp2px(context, 8));
mScaleCount = ta.getInteger(R.styleable.CircleProgressView_scaleCount, 24);
mStartColor = ta.getColor(R.styleable.CircleProgressView_startColor, Color.parseColor("#3FC199"));
mEndColor = ta.getColor(R.styleable.CircleProgressView_endColor, Color.parseColor("#3294C1"));
mColorArray = new int[]{mStartColor, mEndColor};
mLabelText = ta.getString(R.styleable.CircleProgressView_labelText);
mTextColor = ta.getColor(R.styleable.CircleProgressView_textColor, Color.parseColor("#4F5F6F"));
mProgressTextSize = ta.getDimension(R.styleable.CircleProgressView_progressTextSize, 160);
mLabelTextSize = ta.getDimension(R.styleable.CircleProgressView_labelTextSize, 64);
ta.recycle();
4、創(chuàng)建畫圖所使用的對象，如Paint、Rect、RectF：
mArcBackPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mArcBackPaint.setStyle(Paint.Style.STROKE); mArcBackPaint.setStrokeWidth(mArcWidth); mArcBackPaint.setColor(Color.LTGRAY); mArcForePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mArcForePaint.setStyle(Paint.Style.STROKE); mArcForePaint.setStrokeWidth(mArcWidth); mArcRectF = new RectF(); mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG); mLinePaint.setStyle(Paint.Style.STROKE); mLinePaint.setColor(Color.WHITE); mLinePaint.setStrokeWidth(DensityUtils.dp2px(context, 2)); mProgressTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mProgressTextPaint.setStyle(Paint.Style.FILL); mProgressTextPaint.setColor(mTextColor); mProgressTextPaint.setTextSize(mProgressTextSize); mLabelTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mLabelTextPaint.setStyle(Paint.Style.FILL); mLabelTextPaint.setColor(mTextColor); mLabelTextPaint.setTextSize(mLabelTextSize); mTextRect = new Rect();
5、重寫onMeasure()方法，計算自定義View的寬高：
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measuredDimension(widthMeasureSpec), measuredDimension(heightMeasureSpec));
}
private int measuredDimension(int measureSpec) {
int result;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
if (mode == MeasureSpec.EXACTLY) {
result = size;
} else {
result = 800;
if (mode == MeasureSpec.AT_MOST) {
result = Math.min(result, size);
}
}
return result;
}
6、重寫onDraw()方法，繪制圓弧、刻度線和百分比文本、標(biāo)簽說明文本，注意坐標(biāo)的計算：
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mArcRectF.set(mArcWidth / 2, mArcWidth / 2, getWidth() - mArcWidth / 2, getHeight() - mArcWidth / 2);
//畫背景弧線
canvas.drawArc(mArcRectF, -90, 360, false, mArcBackPaint);
//設(shè)置漸變渲染
LinearGradient linearGradient = new LinearGradient(getWidth() / 2, 0, getWidth() / 2, getHeight(), mColorArray, null, Shader.TileMode.CLAMP);
mArcForePaint.setShader(linearGradient);
//畫百分比值弧線
canvas.drawArc(mArcRectF, -90, mSweepAngle, false, mArcForePaint);
//畫刻度線
for (int i = 0; i < mScaleCount; i++) {
canvas.drawLine(getWidth() / 2, 0, getWidth() / 2, mArcWidth, mLinePaint);
//旋轉(zhuǎn)畫布
canvas.rotate(360 / mScaleCount, getWidth() / 2, getHeight() / 2);
}
//畫百分比文本
String progressText = mProgress + "%";
mProgressTextPaint.getTextBounds(progressText, 0, progressText.length(), mTextRect);
float progressTextWidth = mTextRect.width();
float progressTextHeight = mTextRect.height();
canvas.drawText(progressText, getWidth() / 2 - progressTextWidth / 2,
getHeight() / 2 + progressTextHeight / 2, mProgressTextPaint);
//畫標(biāo)簽說明文本
mLabelTextPaint.getTextBounds(mLabelText, 0, mLabelText.length(), mTextRect);
canvas.drawText(mLabelText, getWidth() / 2 - mTextRect.width() / 2,
getHeight() / 2 - progressTextHeight / 2 - mTextRect.height(), mLabelTextPaint);
}
7、暴露一個動態(tài)設(shè)置百分比的方法：
public void setProgress(float progress) {
Log.e("--> ", progress + "");
ValueAnimator anim = ValueAnimator.ofFloat(mProgress, progress);
anim.setDuration((long) (Math.abs(mProgress - progress) * 20));
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mProgress = (float) animation.getAnimatedValue();
mSweepAngle = mProgress * 360 / 100;
mProgress = (float) (Math.round(mProgress * 10)) / 10;//四舍五入保留到小數(shù)點后兩位
invalidate();
}
});
anim.start();
}
8、在activity_main.xml布局文件中使用該View：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cpv="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.monkey.circleprogressview.CircleProgressView android:id="@+id/circle_progress_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" cpv:arcWidth="8dp" cpv:endColor="#126b94" cpv:labelText="學(xué)習(xí)進(jìn)度" cpv:labelTextSize="20sp" cpv:progressTextSize="55sp" cpv:scaleCount="24" cpv:startColor="#12d699" cpv:textColor="#4F5F6F" /> </RelativeLayout>
9、在MainActivity中設(shè)置監(jiān)聽，傳入百分比：
final CircleProgressView view = (CircleProgressView) findViewById(R.id.circle_progress_view);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
float progress = (float) (Math.random() * 100);
view.setProgress(progress);
}
});
代碼下載地址
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android自定義View繪制的方法及過程（二）
- Android自定義View實現(xiàn)飄動的葉子效果（三）
- Android自定義View實現(xiàn)葉子飄動旋轉(zhuǎn)效果（四）
- Android自定義View實現(xiàn)多片葉子旋轉(zhuǎn)滑動（五）
- Android自定義View葉子旋轉(zhuǎn)完整版（六）
- Android自定義View簡易折線圖控件（二）
- Android 自定義View的使用介紹
- Android自定義View設(shè)定到FrameLayout布局中實現(xiàn)多組件顯示的方法 分享
- Android自定義View實現(xiàn)廣告信息上下滾動效果
- Android自定義View中Paint、Rect、Canvas介紹（一）
相關(guān)文章
很多用戶經(jīng)常會出現(xiàn)過快且多次點擊同一按鈕的情況，本篇文章主要介紹了Android 防止過快點擊的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Android Retrofit的簡單介紹和使用2017-03-03
這篇文章主要介紹了Android開發(fā)騰訊驗證碼遇到的坑,需要的朋友可以參考下2017-12-12
這篇文章主要將從源碼的角度帶大家一起分析Android?rinflate的使用，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價值，感興趣的可以了解一下2023-04-04
Android編程實現(xiàn)滑動開關(guān)組件功能【附源碼下載】
這篇文章主要介紹了Android編程實現(xiàn)滑動開關(guān)組件功能,結(jié)合實例形式詳細(xì)分析了Android滑動開關(guān)組件的簡單布局與功能實現(xiàn)技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
Android分頁中顯示出下面翻頁的導(dǎo)航欄的布局實例代碼
這篇文章主要介紹了Android分頁中顯示出下面翻頁的導(dǎo)航欄的布局實例代碼,需要的朋友可以參考下2017-04-04
最近在修改Android7.0原生平臺的一些bug，其中有關(guān)Android Beam傳輸文件的一些問題還是挺多的。下面小編給大家?guī)砹薬ndroid beam 文件傳輸失敗的解決方法，一起看看吧2017-09-09
Android數(shù)據(jù)持久化之讀寫SD卡中內(nèi)容的方法詳解
這篇文章主要介紹了Android數(shù)據(jù)持久化之讀寫SD卡中內(nèi)容的方法,結(jié)合具體實例形式分析了Android持久化操作中針對SD卡進(jìn)行讀寫操作的相關(guān)實現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-05-05
Android SDK Manager更新、下載速度慢問題解決辦法
這篇文章主要介紹了Android SDK Manager更新、下載速度慢問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了Android模擬器中安裝apk的方法,結(jié)合圖文描述講解了Android的模擬器中實現(xiàn)安裝apk的具體步驟,簡單實用,需要的朋友可以參考下2015-12-12