先看看下面這個Gif。看起來還不錯 。

突然想到，前兩天實現的那個波紋，雖然有點Low,確有點異曲同工之感,這個的 一圈圈的波紋 和 變大變小的內圓 其實就是個擺設,既然不能顯示進度，最后的OK感覺有點莫名其妙。

然后進行組合了一下， 大圓代表整個進度，而內心圓代表當前進度。一波波的波紋代表加載效果。完成后顯示OK。

當然Gif圖的 OK 還有一個放大后執行了縮小，又放大了一點點。這一塊，沒有整，累了，睡覺了。。無非設置textSize了。

實現如下：
加載波紋看起來顏色不是挺順眼，奈何老夫不懂配色。

初始化

有三個狀態，默認為None，根據每個狀態提供一個animator。

public class LoadRippleCircleView extends BaseView {private int mInsideCircleRadius = DisplayUtils.dp2px(this.getContext(), 60);private int mOuterCircleRadius = mInsideCircleRadius + DisplayUtils.dp2px(this.getContext(), 5);private Status status = Status.NONE;private enum Status {NONE, Starting, Loading, ENDING}// 對應三個執行狀態的 value值private ValueAnimator mStartingValueAnimator, mLoadingValueAnimator, mEndingValueAnimator;private float mStartingValue = 0.0f, mLoadingValue = 0.0f, mEndingValue = 0.0f;// 波紋private int mLoadingRadius = DisplayUtils.dp2px(this.getContext(), 5);private int mFirstRip = DisplayUtils.dp2px(this.getContext(), 60) / 2;private int mSecondRip = DisplayUtils.dp2px(this.getContext(), 60) / 4 * 3;private int mThirdRip = DisplayUtils.dp2px(this.getContext(), 60);// 將進度內圓進行分份private int min = 0, max = 100;private int currValue;public LoadRippleCircleView(Context context) {this(context, null);}public LoadRippleCircleView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public LoadRippleCircleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mStartingValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(1000);mLoadingValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(700);mEndingValueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(1000);initAnimatorListener();}private void initAnimatorListener() {mStartingValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mStartingValue = (float) animation.getAnimatedValue();postInvalidate();}});mStartingValueAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {status = Status.Starting;}@Overridepublic void onAnimationEnd(Animator animation) {status = Status.Loading;mLoadingValueAnimator.start();}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});mLoadingValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mLoadingValue = (float) animation.getAnimatedValue();mLoadingRadius = (int) (mInsideCircleRadius * 1.0f / max * currValue);if (currValue >= max) {animation.cancel();status = Status.ENDING;mEndingValueAnimator.start();}postInvalidate();}});mLoadingValueAnimator.setRepeatCount(-1);mEndingValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mEndingValue = (float) animation.getAnimatedValue();postInvalidate();}});mStartingValueAnimator.start();}復制代碼

測量大小

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthMode = MeasureSpec.getMode(widthMeasureSpec);int heightMode = MeasureSpec.getMode(heightMeasureSpec);int width = MeasureSpec.getSize(widthMeasureSpec);int height = MeasureSpec.getSize(heightMeasureSpec);int measuredWidth = width, measuredHeight = height;if (widthMode != MeasureSpec.EXACTLY) {measuredWidth = mOuterCircleRadius * 2 + mMargin * 2 + mPadding * 2;}if (heightMode != MeasureSpec.EXACTLY) {measuredHeight = mOuterCircleRadius * 2 + mMargin * 2 + mPadding * 2;}setMeasuredDimension(measuredWidth, measuredHeight);} 復制代碼

繪制

starting：開始繪制背景圓。

loading：繪制進度圓，還有波浪。

ending：縮小進度圓后放大字體，放大背景圓(從0開始)，同時繪制Path。

(縮小進度圓的速度)比(放大背景圓的速度)快(1/4),剩下的1/4時間放大Ok。

(縮小進度圓 + 放大OK) 與 (背景圓) 與 (Path繪制) 同比。

@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);canvas.drawColor(Color.parseColor("#FF31C994"));canvas.translate(mViewWidth / 2, mViewHeight / 2);canvas.save();if (status == Status.Starting) {mPaint.setStyle(Paint.Style.FILL_AND_STROKE);mPaint.setColor(Color.parseColor("#A1E3CB"));canvas.drawCircle(0, 0, mInsideCircleRadius * mStartingValue, mPaint);}if (status == Status.Loading) {// 底 圓mPaint.setStyle(Paint.Style.FILL_AND_STROKE);mPaint.setColor(Color.parseColor("#A1E3CB"));canvas.drawCircle(0, 0, mInsideCircleRadius, mPaint);// 波紋mPaint.setStyle(Paint.Style.STROKE);mPaint.setColor(Color.parseColor("#ff92C5AA"));mPaint.setStyle(Paint.Style.STROKE);if (mFirstRip > mLoadingRadius + 15) // 感覺+15 更為協調些canvas.drawCircle(0, 0, (mLoadingRadius + (mFirstRip - mLoadingRadius)) * mLoadingValue, mPaint);if (mSecondRip > mLoadingRadius + 15)canvas.drawCircle(0, 0, (mLoadingRadius + (mSecondRip - mLoadingRadius)) * mLoadingValue, mPaint);if (mThirdRip > mLoadingRadius + 15)canvas.drawCircle(0, 0, (mLoadingRadius + (mThirdRip - mLoadingRadius)) * mLoadingValue, mPaint);// 進度圓mPaint.setStyle(Paint.Style.FILL_AND_STROKE);mPaint.setColor(Color.parseColor("#D2F1E6"));canvas.drawCircle(0, 0, mLoadingRadius, mPaint);}if (status == Status.ENDING) {// 底圓 由小變大mPaint.setStyle(Paint.Style.FILL_AND_STROKE);mPaint.setColor(Color.parseColor("#A1E3CB"));canvas.drawCircle(0, 0, mInsideCircleRadius * mEndingValue, mPaint);if (mEndingValue < 0.75f) {// 進度圓 由大變小mPaint.setStyle(Paint.Style.FILL_AND_STROKE);mPaint.setColor(Color.parseColor("#D2F1E6"));canvas.drawCircle(0, 0, mLoadingRadius * (0.75f - mEndingValue), mPaint);} else {mPaint.setColor(Color.WHITE);mPaint.setStyle(Paint.Style.FILL_AND_STROKE);float f = DisplayUtils.sp2px(this.getContext(), 65) / (1f - 0.75f);mPaint.setTextSize((mEndingValue - 0.75f) * f);String txt = "OK";Rect rect = new Rect();mPaint.getTextBounds(txt, 0, txt.length(), rect);int w = rect.width();int h = rect.height();canvas.drawText(txt, -(w / 2), (h / 2), mPaint);}mPaint.setStyle(Paint.Style.STROKE);mPaint.setStrokeWidth(DisplayUtils.dp2px(this.getContext(), 1.5f));Path pathCircle = new Path();RectF oval = new RectF(-mOuterCircleRadius, -mOuterCircleRadius, mOuterCircleRadius, mOuterCircleRadius);pathCircle.addArc(oval, 270, 360f * mEndingValue);canvas.drawPath(pathCircle, mPaint);}canvas.restore();} 復制代碼

對外接口

public void setCurrValue(int currValue) {this.currValue = currValue;}public void setMin().....public void setMax().... } 復制代碼

src

轉載于:https://juejin.im/post/5ae740c051882567161a59b3

總結

以上是生活随笔為你收集整理的Gif（2）-加载视图-波纹的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。