炫酷的進(jìn)度條的效果

自定義view系列之炫酷的進(jìn)度條的效果，讓你的進(jìn)度條從此與眾不同。
按照慣例先上效果圖，俗話說無圖無有真相嘛。

1、帶動畫的進(jìn)度條效果
因?yàn)槲覀兪亲远xview，看到的所有元素都是在onDraw里邊繪制出來的，分析進(jìn)度條效果我們可以分解出幾個(gè)步驟，先繪制底層百分百進(jìn)度條（也就是背景色），再繪制真實(shí)的進(jìn)度。

@Override protected void onDraw(Canvas canvas) {super.onDraw(canvas);// tipHeight + progressMarginTop其實(shí)是把進(jìn)度條繪制到百分比tip框的下邊// 這里只是給出大概的計(jì)算，如有需求可以精確計(jì)算高度//繪制背景canvas.drawLine(getPaddingLeft(),tipHeight + progressMarginTop,getWidth(),tipHeight + progressMarginTop,bgPaint);//繪制真實(shí)進(jìn)度canvas.drawLine(getPaddingLeft(),tipHeight + progressMarginTop,currentProgress,tipHeight + progressMarginTop,progressPaint);}

進(jìn)度條畫完之后就是讓它動起來，我們使用屬性動畫試試改變當(dāng)前進(jìn)度的值重新繪制就可以了，動畫效果我們繼續(xù)使用ValueAnimator

/*** 進(jìn)度移動動畫 通過插值的方式改變移動的距離*/private void initAnimation() {progressAnimator = ValueAnimator.ofFloat(0, mProgress);progressAnimator.setDuration(duration);progressAnimator.setStartDelay(startDelay);progressAnimator.setInterpolator(new LinearInterpolator());progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value = (float) valueAnimator.getAnimatedValue();//這是我們自己的需求進(jìn)度只顯示整數(shù)textString = formatNum(format2Int(value));//百分比的進(jìn)度轉(zhuǎn)換成view寬度一樣的比例currentProgress = value * mWidth / 100;//進(jìn)度回調(diào)方法if (progressListener != null) {progressListener.currentProgressListener(value);} invalidate();}});progressAnimator.start();}

到此帶動畫的進(jìn)度條就實(shí)現(xiàn)了，一起看一下效果吧

• 2、繪制上邊的百分比布局
  

看到這個(gè)百分比的提示框，你會想到如何實(shí)現(xiàn)吶，很多人會選擇使用圖片然后變更圖片的位置來達(dá)到效果，作為一個(gè)有追求的程序猿怎能滿足于此吶，自己繪制出來豈不更好。很強(qiáng)勢.jpg 接下來我們來分析一下如何繪制這個(gè)帶三角的矩形

這里說一下我們實(shí)現(xiàn)思路：其實(shí)第一次我是準(zhǔn)備從起點(diǎn)到終點(diǎn)用過畫閉合的線做的，需要計(jì)算七個(gè)點(diǎn)的坐標(biāo)，最終能實(shí)現(xiàn)，但是這種方法太笨了，

在苦思的時(shí)候突然又看了一眼設(shè)計(jì)圖發(fā)現(xiàn)這個(gè)矩形是帶圓角的，我這樣繪制閉合的線是達(dá)不到圓角效果的，等等，圓角？圓角不是可以通過繪制圓角矩形畫出來么，我擦，貌似這是一個(gè)不錯的思路，趕緊去驗(yàn)證。

果不其然，堪稱完美，先繪制一個(gè)圓角矩形，在其下邊繪制一個(gè)三角形，至于里邊的進(jìn)度數(shù)值直接drawText就行了

/*** 繪制進(jìn)度上邊提示百分比的view** @param canvas*/private void drawTipView(Canvas canvas) {drawRoundRect(canvas);drawTriangle(canvas);}/*** 繪制圓角矩形** @param canvas*/private void drawRoundRect(Canvas canvas) {rectF.set(moveDis, 0, tipWidth + moveDis, tipHeight);canvas.drawRoundRect(rectF, roundRectRadius, roundRectRadius, tipPaint);}/*** 繪制三角形** @param canvas*/private void drawTriangle(Canvas canvas) {path.moveTo(tipWidth / 2 - triangleHeight + moveDis, tipHeight);path.lineTo(tipWidth / 2 + moveDis, tipHeight + triangleHeight);path.lineTo(tipWidth / 2 + triangleHeight + moveDis, tipHeight);canvas.drawPath(path, tipPaint);path.reset();}

3、計(jì)算百分比Tip框的起始位置及移動分析
樣式繪制出來接下來就是各種計(jì)算了，先來張手繪圖湊合著看哈

擔(dān)心圖片不清晰就再對圖片內(nèi)容描述一下，重要信息有四個(gè)，進(jìn)度的起始點(diǎn)A和B、tip框的起始點(diǎn)M和N，動畫執(zhí)行過程是這樣的：剛開始的時(shí)候只有進(jìn)度條移動，此時(shí)tip框是不動的，當(dāng)進(jìn)度條到達(dá)tip框中間三角形頂點(diǎn)x坐標(biāo)的時(shí)候，tip框跟著進(jìn)度開始一起移動，當(dāng)tip框右邊界到達(dá)整個(gè)進(jìn)度的右邊界的時(shí)候，tip框停止移動，進(jìn)度條繼續(xù)移動一直到終點(diǎn)。

/*** 進(jìn)度移動動畫 通過插值的方式改變移動的距離*/private void initAnimation() {progressAnimator = ValueAnimator.ofFloat(0, mProgress);progressAnimator.setDuration(duration);progressAnimator.setStartDelay(startDelay);progressAnimator.setInterpolator(new LinearInterpolator());progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value = (float) valueAnimator.getAnimatedValue();//進(jìn)度數(shù)值只顯示整數(shù)，我們自己的需求，可以忽略textString = formatNum(format2Int(value));//把當(dāng)前百分比進(jìn)度轉(zhuǎn)化成view寬度對應(yīng)的比例currentProgress = value * mWidth / 100;//進(jìn)度回調(diào)方法if (progressListener != null) {progressListener.currentProgressListener(value);}//移動百分比提示框，只有當(dāng)前進(jìn)度到提示框中間位置之后開始移動，//當(dāng)進(jìn)度框移動到最右邊的時(shí)候停止移動，但是進(jìn)度條還可以繼續(xù)移動//moveDis是tip框移動的距離if (currentProgress >= (tipWidth / 2) &&currentProgress <= (mWidth - tipWidth / 2)) {moveDis = currentProgress - tipWidth / 2;}invalidate();}});progressAnimator.start();}

最終實(shí)現(xiàn)的效果

• 完整代碼

package com.allen.androidcustomview.widget;import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Rect; import android.graphics.RectF; import android.os.Build; import android.support.annotation.Nullable; import android.support.annotation.RequiresApi; import android.util.AttributeSet; import android.util.TypedValue; import android.view.View; import android.view.animation.LinearInterpolator;import java.text.DecimalFormat;/*** Created by Allen on 2017/5/14.* <p>* 自定義水平進(jìn)度條*/public class HorizontalProgressBar extends View {private Paint bgPaint;private Paint progressPaint;private Paint tipPaint;private Paint textPaint;private int mWidth;private int mHeight;private int mViewHeight;/*** 進(jìn)度*/private float mProgress;/*** 當(dāng)前進(jìn)度*/private float currentProgress;/*** 進(jìn)度動畫*/private ValueAnimator progressAnimator;/*** 動畫執(zhí)行時(shí)間*/private int duration = 1000;/*** 動畫延時(shí)啟動時(shí)間*/private int startDelay = 500;/*** 進(jìn)度條畫筆的寬度*/private int progressPaintWidth;/*** 百分比提示框畫筆的寬度*/private int tipPaintWidth;/*** 百分比提示框的高度*/private int tipHeight;/*** 百分比提示框的寬度*/private int tipWidth;/*** 畫三角形的path*/private Path path = new Path();/*** 三角形的高*/private int triangleHeight;/*** 進(jìn)度條距離提示框的高度*/private int progressMarginTop;/*** 進(jìn)度移動的距離*/private float moveDis;private Rect textRect = new Rect();private String textString = "0";/*** 百分比文字字體大小*/private int textPaintSize;/*** 進(jìn)度條背景顏色*/private int bgColor = 0xFFe1e5e8;/*** 進(jìn)度條顏色*/private int progressColor = 0xFFf66b12;/*** 繪制提示框的矩形*/private RectF rectF = new RectF();/*** 圓角矩形的圓角半徑*/private int roundRectRadius;/*** 進(jìn)度監(jiān)聽回調(diào)*/private ProgressListener progressListener;public HorizontalProgressBar(Context context) {super(context);}public HorizontalProgressBar(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();initPaint();}/*** 初始化畫筆寬度及view大小*/private void init() {progressPaintWidth = dp2px(4);tipHeight = dp2px(15);tipWidth = dp2px(30);tipPaintWidth = dp2px(1);triangleHeight = dp2px(3);roundRectRadius = dp2px(2);textPaintSize = sp2px(10);progressMarginTop = dp2px(8);//view真實(shí)的高度mViewHeight = tipHeight + tipPaintWidth + triangleHeight + progressPaintWidth + progressMarginTop;}/*** 初始化畫筆*/private void initPaint() {bgPaint = getPaint(progressPaintWidth, bgColor, Paint.Style.STROKE);progressPaint = getPaint(progressPaintWidth, progressColor, Paint.Style.STROKE);tipPaint = getPaint(tipPaintWidth, progressColor, Paint.Style.FILL);initTextPaint();}/*** 初始化文字畫筆*/private void initTextPaint() {textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);textPaint.setTextSize(textPaintSize);textPaint.setColor(Color.WHITE);textPaint.setTextAlign(Paint.Align.CENTER);textPaint.setAntiAlias(true);}/*** 統(tǒng)一處理paint** @param strokeWidth* @param color* @param style* @return*/private Paint getPaint(int strokeWidth, int color, Paint.Style style) {Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);paint.setStrokeWidth(strokeWidth);paint.setColor(color);paint.setAntiAlias(true);paint.setStrokeCap(Paint.Cap.ROUND);paint.setStyle(style);return paint;}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int widthMode = MeasureSpec.getMode(widthMeasureSpec);int width = MeasureSpec.getSize(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int height = MeasureSpec.getSize(heightMeasureSpec);setMeasuredDimension(measureWidth(widthMode, width), measureHeight(heightMode, height));}/*** 測量寬度** @param mode* @param width* @return*/private int measureWidth(int mode, int width) {switch (mode) {case MeasureSpec.UNSPECIFIED:case MeasureSpec.AT_MOST:break;case MeasureSpec.EXACTLY:mWidth = width;break;}return mWidth;}/*** 測量高度** @param mode* @param height* @return*/private int measureHeight(int mode, int height) {switch (mode) {case MeasureSpec.UNSPECIFIED:case MeasureSpec.AT_MOST:mHeight = mViewHeight;break;case MeasureSpec.EXACTLY:mHeight = height;break;}return mHeight;}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawLine(getPaddingLeft(),tipHeight + progressMarginTop,getWidth(),tipHeight + progressMarginTop,bgPaint);canvas.drawLine(getPaddingLeft(),tipHeight + progressMarginTop,currentProgress,tipHeight + progressMarginTop,progressPaint);drawTipView(canvas);drawText(canvas, textString);}/*** 繪制進(jìn)度上邊提示百分比的view** @param canvas*/private void drawTipView(Canvas canvas) {drawRoundRect(canvas);drawTriangle(canvas);}/*** 繪制圓角矩形** @param canvas*/private void drawRoundRect(Canvas canvas) {rectF.set(moveDis, 0, tipWidth + moveDis, tipHeight);canvas.drawRoundRect(rectF, roundRectRadius, roundRectRadius, tipPaint);}/*** 繪制三角形** @param canvas*/private void drawTriangle(Canvas canvas) {path.moveTo(tipWidth / 2 - triangleHeight + moveDis, tipHeight);path.lineTo(tipWidth / 2 + moveDis, tipHeight + triangleHeight);path.lineTo(tipWidth / 2 + triangleHeight + moveDis, tipHeight);canvas.drawPath(path, tipPaint);path.reset();}/*** 繪制文字** @param canvas 畫布*/private void drawText(Canvas canvas, String textString) {textRect.left = (int) moveDis;textRect.top = 0;textRect.right = (int) (tipWidth + moveDis);textRect.bottom = tipHeight;Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();int baseline = (textRect.bottom + textRect.top - fontMetrics.bottom - fontMetrics.top) / 2;//文字繪制到整個(gè)布局的中心位置canvas.drawText(textString + "%", textRect.centerX(), baseline, textPaint);}/*** 進(jìn)度移動動畫 通過插值的方式改變移動的距離*/private void initAnimation() {progressAnimator = ValueAnimator.ofFloat(0, mProgress);progressAnimator.setDuration(duration);progressAnimator.setStartDelay(startDelay);progressAnimator.setInterpolator(new LinearInterpolator());progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator valueAnimator) {float value = (float) valueAnimator.getAnimatedValue();//進(jìn)度數(shù)值只顯示整數(shù)，我們自己的需求，可以忽略textString = formatNum(format2Int(value));//把當(dāng)前百分比進(jìn)度轉(zhuǎn)化成view寬度對應(yīng)的比例currentProgress = value * mWidth / 100;//進(jìn)度回調(diào)方法if (progressListener != null) {progressListener.currentProgressListener(value);}//移動百分比提示框，只有當(dāng)前進(jìn)度到提示框中間位置之后開始移動，//當(dāng)進(jìn)度框移動到最右邊的時(shí)候停止移動，但是進(jìn)度條還可以繼續(xù)移動//moveDis是tip框移動的距離if (currentProgress >= (tipWidth / 2) &&currentProgress <= (mWidth - tipWidth / 2)) {moveDis = currentProgress - tipWidth / 2;}invalidate();setCurrentProgress(value);}});progressAnimator.start();}/*** 設(shè)置進(jìn)度條帶動畫效果** @param progress* @return*/public HorizontalProgressBar setProgressWithAnimation(float progress) {mProgress = progress;initAnimation();return this;}/*** 實(shí)時(shí)顯示進(jìn)度** @param progress* @return*/public HorizontalProgressBar setCurrentProgress(float progress) {mProgress = progress;currentProgress = progress * mWidth / 100;textString = formatNum(format2Int(progress));//移動百分比提示框，只有當(dāng)前進(jìn)度到提示框中間位置之后開始移動，//當(dāng)進(jìn)度框移動到最右邊的時(shí)候停止移動，但是進(jìn)度條還可以繼續(xù)移動//moveDis是tip框移動的距離if (currentProgress >= (tipWidth / 2) &&currentProgress <= (mWidth - tipWidth / 2)) {moveDis = currentProgress - tipWidth / 2;}invalidate();return this;}/*** 開啟動畫*/public void startProgressAnimation() {if (progressAnimator != null &&!progressAnimator.isRunning() &&!progressAnimator.isStarted())progressAnimator.start();}/*** 暫停動畫*/@RequiresApi(api = Build.VERSION_CODES.KITKAT)public void pauseProgressAnimation() {if (progressAnimator != null) {progressAnimator.pause();}}/*** 恢復(fù)動畫*/@RequiresApi(api = Build.VERSION_CODES.KITKAT)public void resumeProgressAnimation() {if (progressAnimator != null)progressAnimator.resume();}/*** 停止動畫*/public void stopProgressAnimation() {if (progressAnimator != null) {progressAnimator.end();}}/*** 回調(diào)接口*/public interface ProgressListener {void currentProgressListener(float currentProgress);}/*** 回調(diào)監(jiān)聽事件** @param listener* @return*/public HorizontalProgressBar setProgressListener(ProgressListener listener) {progressListener = listener;return this;}/*** 格式化數(shù)字(保留兩位小數(shù))** @param money* @return*/public static String formatNumTwo(double money) {DecimalFormat format = new DecimalFormat("0.00");return format.format(money);}/*** 格式化數(shù)字(保留一位小數(shù))** @param money* @return*/public static String formatNum(int money) {DecimalFormat format = new DecimalFormat("0");return format.format(money);}/*** dp 2 px** @param dpVal*/protected int dp2px(int dpVal) {return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,dpVal, getResources().getDisplayMetrics());}/*** sp 2 px** @param spVal* @return*/protected int sp2px(int spVal) {return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,spVal, getResources().getDisplayMetrics());}public static int format2Int(double i) {return (int) i;} }

總結(jié)

以上是生活随笔為你收集整理的炫酷的进度条的效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。