Android實現(xiàn)圓形漸變加載進度條
更新時間:2020年05月16日 10:57:27 作者:hf1203
這篇文章主要為大家詳細介紹了Android實現(xiàn)圓形漸變加載進度條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
最近設計要求要一個圓形進度條漸變的需求:
1.畫圓形進度條
2.解決漸變


最終實現(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 {
// 畫實心圓的畫筆
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坐標
private int mXCenter;
// 圓心y坐標
private int mYCenter;
// 字的長度
private float mTxtWidth;
// 字的高度
private float mTxtHeight;
// 總進度
private int mTotalProgress = 100;
// 當前進度
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);//設置線冒樣式,有圓 有方
//中間字
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){
}
//設置進度
public void setProgress(int progress) {
mProgress = progress;
postInvalidate();//重繪
}
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android實現(xiàn)圖片加載進度提示
- Android 進度條 ProgressBar的實現(xiàn)代碼(隱藏、出現(xiàn)、加載進度)
- Android仿微信公眾號文章頁面加載進度條
- Android自定義View實現(xiàn)加載進度條效果
- Android自定義View仿華為圓形加載進度條
- Android基于Glide v4.x的圖片加載進度監(jiān)聽
- Android Material加載進度條制作代碼
- Android自定義View基礎開發(fā)之圖片加載進度條
- Android Webview添加網(wǎng)頁加載進度條實例詳解
- Android實現(xiàn)兩圓點之間來回移動加載進度
相關文章
Android繼承現(xiàn)有控件拓展實現(xiàn)自定義控件textView
這篇文章主要介紹了Android繼承現(xiàn)有控件拓展實現(xiàn)自定義控件textView的相關資料,需要的朋友可以參考下2016-04-04
Android開發(fā)可添加頭尾的RecycleView的實現(xiàn)
這篇文章主要為大家介紹了Android開發(fā)可添加頭尾的RecycleView的實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12
Android仿微信和QQ多圖合并框架(類似群頭像)的實現(xiàn)方法
這篇文章主要給大家介紹了關于Android仿微信和QQ多圖合并框架的相關資料,其實就是我們平時所見的群聊頭像,文中通過示例代碼介紹的非常詳細,對各位Android開發(fā)者們具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2017-12-12
Android view更改背景資源與padding消失的問題解決辦法
這篇文章主要介紹了Android view更改背景資源與padding消失的問題解決辦法的相關資料,需要的朋友可以參考下2017-04-04
Android dataBinding與ListView及事件詳解
這篇文章主要介紹了Android dataBinding與ListView及事件詳解的相關資料,需要的朋友可以參考下2016-10-10
Android基于ViewFilpper實現(xiàn)文字LED顯示效果示例
這篇文章主要介紹了Android基于ViewFilpper實現(xiàn)文字LED顯示效果,結合完整實例形式分析了Android使用ViewFilpper實現(xiàn)文字LED顯示動畫效果的相關步驟與實現(xiàn)技巧,需要的朋友可以參考下2017-08-08
Android實現(xiàn)QQ新用戶注冊界面遇到問題及解決方法
這篇文章主要介紹了Android實現(xiàn)QQ新用戶注冊界面遇到問題及解決方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09

