Android實現(xiàn)漸變圓環(huán)、圓形進度條效果
更新時間：2018年10月10日 08:39:44 作者：再見孫悟空_
這篇文章主要為大家詳細介紹了Android實現(xiàn)漸變圓環(huán)、圓形進度條效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近做了一個功能，里面涉及到了漸變圓形的需求。就是一個顏色可以漸變的圓環(huán)，最后實現(xiàn)的效果如下圖：
左圖是帶漸變效果，右圖是不帶漸變效果。原理還是繪圖，Canvas可以繪制的對象有：弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文本(text)、頂點(Vertices)、路徑(path)。通過組合這些對象我們可以畫出一些簡單有趣的界面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數(shù)字圍繞顯示在一個圓圈中)呢？ 幸好Android還提供了一些對Canvas位置轉換的方法：rorate、scale、translate、skew(扭曲)等，而且它允許你通過獲得它的轉換矩陣對象(getMatrix方法，不知道什么是轉換矩陣？) 直接操作它。這些操作就像是雖然你的筆還是原來的地方畫，但是畫紙旋轉或者移動了，所以你畫的東西的方位就產生變化。為了方便一些轉換操作，Canvas 還提供了保存和回滾屬性的方法(save和restore)，比如你可以先保存目前畫紙的位置(save)，然后旋轉90度，向下移動100像素后畫一些圖形，畫完后調用restore方法返回到剛才保存的位置。
話不多說，上代碼
核心類：
自定義控件 CircleProgressBar
package com.jky.mobile_xmxt.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.SweepGradient;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
import com.jky.mobile_xmxt.R;
import java.text.DecimalFormat;
/**
* 圓盤計步圖表
*/
public class CircleProgressBar extends View {
private RectF mWheelRect = new RectF();
private Paint mDefaultWheelPaint;
private Paint mFinishWheelPaint;
private Paint mCenterWheelPaint;
private Paint mTitlePaint, mStepPaint, mTargetPaint;
private float mCircleStrokeWidth;
private float mSweepAnglePer;
private float mPercent;
private int mStepNum, mCurrStepNum;
private float pressExtraStrokeWidth;
private BarAnimation mAnim;
private int mMaxStepNum;// 默認最大步數(shù)
private float mTitleY, mStepY, mTargetY;
private DecimalFormat mDecimalFormat = new DecimalFormat("#.0");// 格式為保留小數(shù)點后一位
public static String GOAL_STEP;
public static String PERCENT;
public CircleProgressBar(Context context) {
super(context);
init(null, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init(attrs, 0);
}
public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(attrs, defStyle);
}
private void init(AttributeSet attrs, int defStyle) {
mFinishWheelPaint = new Paint();
mFinishWheelPaint.setColor(Color.rgb(100, 113, 205));
mFinishWheelPaint.setStyle(Paint.Style.STROKE);// 空心
mFinishWheelPaint.setStrokeCap(Paint.Cap.ROUND);// 圓角畫筆
mFinishWheelPaint.setAntiAlias(true);// 去鋸齒
mCenterWheelPaint = new Paint();
mCenterWheelPaint.setColor(Color.rgb(243, 243, 243));
mCenterWheelPaint.setStyle(Paint.Style.STROKE);
mCenterWheelPaint.setStrokeCap(Paint.Cap.ROUND);
mCenterWheelPaint.setAntiAlias(true);
mDefaultWheelPaint = new Paint();
mDefaultWheelPaint.setColor(Color.rgb(127, 127, 127));
mDefaultWheelPaint.setStyle(Paint.Style.STROKE);
mDefaultWheelPaint.setStrokeCap(Paint.Cap.ROUND);
mDefaultWheelPaint.setAntiAlias(true);
mTitlePaint = new Paint();
mTitlePaint.setAntiAlias(true);
mTitlePaint.setColor(Color.WHITE);
mStepPaint = new Paint();
mStepPaint.setAntiAlias(true);
mStepPaint.setColor(Color.WHITE);
mTargetPaint = new Paint();
mTargetPaint.setAntiAlias(true);
mTargetPaint.setColor(Color.WHITE);
mAnim = new BarAnimation();
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawArc(mWheelRect, 0, 359, false, mDefaultWheelPaint);
canvas.drawArc(mWheelRect, 0, 359, false, mCenterWheelPaint);
canvas.drawArc(mWheelRect, 90, mSweepAnglePer, false, mFinishWheelPaint);
// canvas.drawText("步數(shù)", mWheelRect.centerX() - (mTitlePaint.measureText("步數(shù)") / 2), mTitleY,
// mTitlePaint);
canvas.drawText(mCurrStepNum + "",
mWheelRect.centerX() - (mStepPaint.measureText(String.valueOf(mCurrStepNum)) / 2), mStepY,
mStepPaint);
String description = "";
float percent = getPercent();
if(percent > 0.5){
description ="嚴重污染";
}else if(percent<0.5){
description ="中等污染";
}else{
description ="普通污染";
}
canvas.drawText(description , mWheelRect.centerX() -
(mTargetPaint.measureText(description) / 2), mTargetY, mTargetPaint);
SweepGradient sweepGradient = new SweepGradient(mWheelRect.centerX(), mWheelRect.centerY(),
new int[]{getResources().getColor(R.color.color_environment_severe), getResources().getColor(R.color.color_environment_serious),
getResources().getColor(R.color.color_environment_excellent),
getResources().getColor(R.color.color_environment_good), getResources().getColor(R.color.color_environment_mild),
getResources().getColor(R.color.color_environment_moderate)}, null);
mFinishWheelPaint.setShader(sweepGradient);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int min = Math.min(width, height);// 獲取View最短邊的長度
setMeasuredDimension(min, min);// 強制改View為以最短邊為長度的正方形
mCircleStrokeWidth = getTextScale(15, min);// 圓弧的寬度
pressExtraStrokeWidth = getTextScale(10, min);// 圓弧離矩形的距離
mWheelRect.set(mCircleStrokeWidth + pressExtraStrokeWidth, mCircleStrokeWidth + pressExtraStrokeWidth,
min - mCircleStrokeWidth - pressExtraStrokeWidth, min - mCircleStrokeWidth - pressExtraStrokeWidth);// 設置矩形
mTitlePaint.setTextSize(getTextScale(60, min));
mStepPaint.setTextSize(getTextScale(120, min));
mTargetPaint.setTextSize(getTextScale(40, min));
mTitleY = getTextScale(170, min);
mStepY = getTextScale(300, min);
mTargetY = getTextScale(380, min);
mFinishWheelPaint.setStrokeWidth(mCircleStrokeWidth);
mCenterWheelPaint.setStrokeWidth(mCircleStrokeWidth);
mDefaultWheelPaint.setStrokeWidth(mCircleStrokeWidth - getTextScale(2, min));
mDefaultWheelPaint.setShadowLayer(getTextScale(10, min), 0, 0, Color.rgb(127, 127, 127));// 設置陰影
}
/**
* 進度條動畫
*
* @author Administrator
*/
public class BarAnimation extends Animation {
/**
* 每次系統(tǒng)調用這個方法時， 改變mSweepAnglePer，mPercent，stepnumbernow的值，
* 然后調用postInvalidate()不停的繪制view。
*/
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
// if (interpolatedTime < 1.0f) {
// mPercent = Float.parseFloat(mDecimalFormat.format(interpolatedTime * mStepNum * 100f / mMaxStepNum));// 將浮點值四舍五入保留一位小數(shù)
// mSweepAnglePer = interpolatedTime * mStepNum * 360 / mMaxStepNum;
// mCurrStepNum = (int) (interpolatedTime * mStepNum);
// } else {
mPercent = Float.parseFloat(mDecimalFormat.format(mStepNum * 100f / mMaxStepNum));// 將浮點值四舍五入保留一位小數(shù)
if (mPercent > 100.0f) {
mPercent = 100.0f;
}
PERCENT = String.valueOf(mPercent);
mSweepAnglePer = mStepNum * 360 / mMaxStepNum;
mCurrStepNum = mStepNum;
// }
requestLayout();
}
}
public float getPercent() {
return mPercent;
}
/**
* 根據控件的大小改變絕對位置的比例
*
* @param n
* @param m
* @return
*/
public float getTextScale(float n, float m) {
return n / 500 * m;
}
/**
* 更新步數(shù)和設置一圈動畫時間
*
* @param stepCount
* @param time
*/
public void update(int stepCount, int time) {
this.mStepNum = stepCount;
mAnim.setDuration(time);
// setAnimationTime(time);
this.startAnimation(mAnim);
}
/**
* @param stepNum
*/
public void setMaxStepNum(int stepNum) {
mMaxStepNum = stepNum;
GOAL_STEP = String.valueOf(mMaxStepNum);
}
public void setColor(int color) {
mFinishWheelPaint.setColor(color);
mStepPaint.setColor(color);
}
/**
* 設置動畫時間
*
* @param time
*/
public void setAnimationTime(int time) {
mAnim.setDuration(time * mStepNum / mMaxStepNum);// 按照比例設置動畫執(zhí)行時間
}
}
xml引用
<com.jky.mobile_xmxt.view.CircleProgressBar android:id="@+id/color_progress_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="6" />
Activity調用方法
color_progress_view = (CircleProgressBar)view.findViewById(R.id.color_progress_view); color_progress_view.setMaxStepNum(500); color_progress_view.update(470,1000);
由于和調用其他控件方法類似，姑且省去了很多其他業(yè)務邏輯代碼，代碼不是特別復雜，修改起來也很方便（修改顏色，總量及比例等），所以只粘貼核心相關的代碼，希望可以幫助到大家。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Android 服務端將位置信息發(fā)送給客戶端的實現(xiàn)
這篇文章主要介紹了Android 服務端將位置信息發(fā)送給客戶端的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了詳解Android中獲取軟鍵盤狀態(tài)和軟鍵盤高度的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-10-10
這篇文章主要為大家介紹了Android?Progress?Bar進度條加載的實現(xiàn)及屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Android開發(fā)之自定義view實現(xiàn)通訊錄列表A~Z字母提示效果【附demo源碼下載】
這篇文章主要介紹了Android開發(fā)之自定義view實現(xiàn)通訊錄列表A~Z字母提示效果,結合完整實例形式分析了Android獲取通訊錄列表及采用自定義view排列顯示的相關操作技巧,需要的朋友可以參考下2017-07-07
Android 使用selector改變按鈕狀態(tài)實例詳解
這篇文章主要介紹了Android 使用selector改變按鈕狀態(tài)實例詳解的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了Android Gradle開發(fā)指南的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了Android實現(xiàn)保存圖片到本地并在相冊中顯示的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本篇文章主要給大家介紹了Android HandlerThread使用介紹以及源碼解析，有需要的朋友參考學習下吧。2017-12-12
這篇文章主要介紹了Android通過SOCKET下載文件的方法,實例分析了Android使用Socket進行文件傳輸?shù)募记?需要的朋友可以參考下2015-12-12
eclipse中運行monkeyrunner腳本之環(huán)境搭建（4）
這篇文章主要為大家詳細介紹了eclipse中運行monkeyrunner腳本之環(huán)境搭建的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12