最近做了一個功能，里面涉及到了漸變圓形的需求。就是一個顏色可以漸變的圓環(huán)，最后實現(xiàn)的效果如下圖：
左圖是帶漸變效果，右圖是不帶漸變效果。原理還是繪圖，Canvas可以繪制的對象有：弧線(arcs)、填充顏色(argb和color)、 Bitmap、圓(circle和oval)、點(point)、線(line)、矩形(Rect)、圖片(Picture)、圓角矩形 (RoundRect)、文本(text)、頂點(Vertices)、路徑(path)。通過組合這些對象我們可以畫出一些簡單有趣的界面出來，但是光有這些功能還是不夠的，如果我要畫一個儀表盤(數字圍繞顯示在一個圓圈中)呢？ 幸好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;// 默認最大步數 private float mTitleY, mStepY, mTargetY; private DecimalFormat mDecimalFormat = new DecimalFormat("#.0");// 格式為保留小數點后一位 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("步數", mWheelRect.centerX() - (mTitlePaint.measureText("步數") / 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));// 將浮點值四舍五入保留一位小數// mSweepAnglePer = interpolatedTime * mStepNum * 360 / mMaxStepNum;// mCurrStepNum = (int) (interpolatedTime * mStepNum);// } else { mPercent = Float.parseFloat(mDecimalFormat.format(mStepNum * 100f / mMaxStepNum));// 將浮點值四舍五入保留一位小數 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; } /** * 更新步數和設置一圈動畫時間 * * @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è)務邏輯代碼，代碼不是特別復雜，修改起來也很方便（修改顏色，總量及比例等），所以只粘貼核心相關的代碼，希望可以幫助到大家。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
