Android實(shí)現(xiàn)圓形漸變加載進(jìn)度條
最近設(shè)計(jì)要求要一個(gè)圓形進(jìn)度條漸變的需求:
1.畫圓形進(jìn)度條
2.解決漸變
最終實(shí)現(xiàn)效果代碼
package com.view; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.SweepGradient; import android.util.AttributeSet; import android.view.View; import com.fx.R; public class CompletedView extends View { // 畫實(shí)心圓的畫筆 private Paint mCirclePaint; // 畫圓環(huán)的畫筆 private Paint mRingPaint; // 畫圓環(huán)的畫筆背景色 private Paint mRingPaintBg; // 畫字體的畫筆 private Paint mTextPaint; // 圓形顏色 private int mCircleColor; // 圓環(huán)顏色 private int mRingColor; // 圓環(huán)背景顏色 private int mRingBgColor; // 半徑 private float mRadius; // 圓環(huán)半徑 private float mRingRadius; // 圓環(huán)寬度 private float mStrokeWidth; // 圓心x坐標(biāo) private int mXCenter; // 圓心y坐標(biāo) private int mYCenter; // 字的長度 private float mTxtWidth; // 字的高度 private float mTxtHeight; // 總進(jìn)度 private int mTotalProgress = 100; // 當(dāng)前進(jìn)度 private int mProgress; private String string; public CompletedView(Context context, AttributeSet attrs) { super(context, attrs); // 獲取自定義的屬性 initAttrs(context, attrs); initVariable(); } //屬性 private void initAttrs(Context context, AttributeSet attrs) { TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TasksCompletedView, 0, 0); mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80); mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10); mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF); mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF); mRingBgColor = typeArray.getColor(R.styleable.TasksCompletedView_ringBgColor, 0xFFFFFFFF); mRingRadius = mRadius + mStrokeWidth / 2; } RectF oval; //初始化畫筆 private void initVariable() { oval = new RectF(); //內(nèi)圓 mCirclePaint = new Paint(); mCirclePaint.setAntiAlias(true); mCirclePaint.setColor(mCircleColor); mCirclePaint.setStyle(Paint.Style.FILL); mCirclePaint.setStrokeCap(Paint.Cap.ROUND); //外圓弧背景 mRingPaintBg = new Paint(); mRingPaintBg.setAntiAlias(true); mRingPaintBg.setColor(mRingBgColor); mRingPaintBg.setStyle(Paint.Style.STROKE); mRingPaintBg.setStrokeWidth(mStrokeWidth); //外圓弧 mRingPaint = new Paint(); mRingPaint.setAntiAlias(true); // mRingPaint.setColor(mRingColor); mRingPaint.setStyle(Paint.Style.STROKE); mRingPaint.setStrokeWidth(mStrokeWidth); mRingPaint.setStrokeCap(Paint.Cap.ROUND);//設(shè)置線冒樣式,有圓 有方 //中間字 mTextPaint = new Paint(); mTextPaint.setAntiAlias(true); mTextPaint.setStyle(Paint.Style.FILL); mTextPaint.setColor(mRingColor); mTextPaint.setTextSize(mRadius / 2); Paint.FontMetrics fm = mTextPaint.getFontMetrics(); mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent); } SweepGradient sweepGradient; //畫圖 @Override protected void onDraw(Canvas canvas) { mXCenter = getWidth() / 2; mYCenter = getHeight() / 2; //內(nèi)圓 canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint); //外圓弧背景 RectF oval1 = new RectF(); oval1.left = (mXCenter - mRingRadius); oval1.top = (mYCenter - mRingRadius); oval1.right = mRingRadius * 2 + (mXCenter - mRingRadius); oval1.bottom = mRingRadius * 2 + (mYCenter - mRingRadius); canvas.drawArc(oval1, 0, 360, false, mRingPaintBg); //圓弧所在的橢圓對象、圓弧的起始角度、圓弧的角度、是否顯示半徑連線 //外圓弧 if (mProgress > 0 ) { oval.left = (mXCenter - mRingRadius); oval.top = (mYCenter - mRingRadius); oval.right = mRingRadius * 2 + (mXCenter - mRingRadius); oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius); if (sweepGradient==null) { int[] arcColors= new int[]{mRingColor,Color.parseColor("#b05e39"),mRingColor}; float[] arcPostion=new float[]{0.0f,0.5f,0.95f}; // sweepGradient = new SweepGradient(mXCenter, mYCenter, mRingColor,Color.parseColor("#b05e39")); sweepGradient = new SweepGradient(mXCenter, mYCenter, arcColors,arcPostion); Matrix matrix = new Matrix(); matrix.setRotate(-90,mXCenter,mYCenter); sweepGradient.setLocalMatrix(matrix); mRingPaint.setShader(sweepGradient); } canvas.drawArc(oval, -90, ((float)mProgress / mTotalProgress) * 360, false, mRingPaint); // //字體 String txt = mProgress + "%"; mTxtWidth = mTextPaint.measureText(txt, 0, txt.length()); canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 4, mTextPaint); } } public void setText(String string){ } //設(shè)置進(jìn)度 public void setProgress(int progress) { mProgress = progress; postInvalidate();//重繪 } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)圖片加載進(jìn)度提示
- Android 進(jìn)度條 ProgressBar的實(shí)現(xiàn)代碼(隱藏、出現(xiàn)、加載進(jìn)度)
- Android仿微信公眾號文章頁面加載進(jìn)度條
- Android自定義View實(shí)現(xiàn)加載進(jìn)度條效果
- Android自定義View仿華為圓形加載進(jìn)度條
- Android基于Glide v4.x的圖片加載進(jìn)度監(jiān)聽
- Android Material加載進(jìn)度條制作代碼
- Android自定義View基礎(chǔ)開發(fā)之圖片加載進(jìn)度條
- Android Webview添加網(wǎng)頁加載進(jìn)度條實(shí)例詳解
- Android實(shí)現(xiàn)兩圓點(diǎn)之間來回移動加載進(jìn)度
相關(guān)文章
Flutter構(gòu)建自定義Widgets的全過程記錄
在Flutter實(shí)際開發(fā)中,大家可能會遇到flutter框架中提供的widget達(dá)不到我們想要的效果,這時(shí)就需要我們?nèi)プ远xwidget,下面這篇文章主要給大家介紹了關(guān)于Flutter構(gòu)建自定義Widgets的相關(guān)資料,需要的朋友可以參考下2022-01-01Android控件之EditView常用屬性及應(yīng)用方法
本篇文章介紹了,Android控件之EditView常用屬性及應(yīng)用方法。需要的朋友參考下2013-04-04Android代碼實(shí)現(xiàn)圖片和文字上下布局
在Android開發(fā)中經(jīng)常會需要用到帶文字和圖片的button,下面來給大家介紹使用radiobutton實(shí)現(xiàn)圖片和文字上下布局或左右布局。感興趣的朋友一起學(xué)習(xí)吧2015-11-11Webview實(shí)現(xiàn)android簡單的瀏覽器實(shí)例代碼
這篇文章主要介紹了Webview實(shí)現(xiàn)android簡單的瀏覽器實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-02-02詳解Android沉浸式實(shí)現(xiàn)兼容解決辦法
本篇文章主要介紹了詳解Android沉浸式實(shí)現(xiàn)兼容解決辦法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11實(shí)現(xiàn)一個(gè)Android鎖屏App功能的難點(diǎn)總結(jié)
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Android鎖屏App功能的難點(diǎn)總結(jié),可以有效的解決鎖屏開發(fā)的問題,有需要的可以參考一下。2016-11-11android實(shí)現(xiàn)狀態(tài)欄添加圖標(biāo)的函數(shù)實(shí)例
這篇文章主要介紹了android實(shí)現(xiàn)狀態(tài)欄添加圖標(biāo)的函數(shù),較為詳細(xì)的分析了Android狀態(tài)欄添加及刪除圖標(biāo)的具體實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10