自定义View实现炫酷进度条

本文主要是介绍自定义View实现炫酷进度条，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇博客主要介绍利用自定义View来实现自己想要的进度加载效果，其中涉及到的内容不会说的很多，但是我会稍微解释一下，其实只要有了思路都好处理。而且个人感觉自己写一个自定义View要比看别人写的自定义View要简单一点，因为你很明白里面属性的意义，看别人的自定义View还需要不断的判断每个属性的作用，然后是各种计算什么的，感觉不是很好！！（这个炫酷的进度条不是我的想法，是我在网上看到的，不过很不好意思，我当时只是从他的git仓库中把代码clone下来，没有保存原文链接，如果作者看到了，可以告诉我一下，我会将原文链接重新添加上去）。不过这篇的自定义View的实现，是我自己写的，没有完全拷贝作者的代码！！！详细情况可以看一下我的代码！！

好了，废话不多说了，先看一下效果图：
这里写图片描述

具体的代码的执行效果就是如上图所示，效果不是很好，还有非常大的优化空间，有兴趣的朋友可以自己更改我的代码，或者直接推倒重写，谢谢！！！

主布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="com.example.administrator.customview.MainActivity"><com.example.administrator.customview.CustomView
        android:id="@+id/pb"android:layout_width="wrap_content"android:layout_height="wrap_content"></com.example.administrator.customview.CustomView><Button
        android:layout_marginTop="20dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:onClick="startProgressAnimation"android:layout_below="@id/pb"android:text="@string/start_animation"/>
</RelativeLayout>

在这里主要是将我自定义的View引入到布局中，就不做过多的介绍了！！！

Activity文件：

package com.example.administrator.customview;import android.os.CountDownTimer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;public class MainActivity extends AppCompatActivity {private CustomView cv;private int progressValue = 0;private boolean mProgressIsRunning = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);cv = (CustomView) findViewById(R.id.pb);}public void startProgressAnimation(View view){if (mProgressIsRunning){timer.cancel();timer.onFinish();}else{mProgressIsRunning = true;if (progressValue>=100){progressValue = 0;}timer.start();}}private CountDownTimer timer = new CountDownTimer(Integer.MAX_VALUE,100) {@Overridepublic void onTick(long millisUntilFinished) {cv.setProgressValue(progressValue);progressValue ++;}@Overridepublic void onFinish() {mProgressIsRunning = false;}};
}

使用一个定时器来模拟加载时value变化，根据时间不断的调整Value值，给人进度不断变化的感觉。这里的cv就是我们自定义的View。

CustomView文件(这个很关键，主要就是这个文件)：

package com.example.administrator.customview;import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
import java.util.Random;/*** Created by zhuyuqiang on 2017/3/13.*/public class CustomView extends View {private final int WHITE_COLOR = Color.WHITE;private final int ORANGE_COLOR = 0xffffa800;//确定叶子旋转方向private final int ROTATE_RIGHT = 0;private final int ROTATE_LEFT = 1;private final int ROTATE_DEGREE = 5;//确定叶子垂直方向的振幅大小private final int SMALL_AMPLITUDE = 0;private final int MIDDLE_AMPLITUDE = 1;private final int BIG_AMPLITUDE = 2;private final int SMALL_Y = 1;private final int MIDDLE_Y = 2;private final int BIG_Y = 3;//确定叶子水平方向的移动大小private final int SMALL_TRANSITION = 0;private final int MIDDLE_TRANSITION = 1;private final int BIG_TRANSITION = 2;private final int SMALL_X = 5;private final int MIDDLE_X = 10;private final int BIG_X = 15;private Paint mWhitePaint,mOrangePaint,mBitmapPaint;private int mPadding_left,mPadding_top,mPadding_right,mPadding_bottom;private Point mLeftCircleCenter,mRightCircleCenter,mFengshanPoint;private BitmapContainer mLeafContainer,mFengShanContainer,mBg_Container;private Matrix mFengShanRotate,mLeafMatrix,mTextMatrix;private int startDegree = 0;private int mProgressValue = 0;private int radius;private final float MAX_PROGRESS_VALUE = 100;private RectF mLeftArcRect;private Rect mTextRect;private final int max = 10;private int y_step = 2;private final String mFinish= "100%";private float mTextScale = 0.1f;private int mTextSize = 42;private List<Leaf> mLeaves = new ArrayList<>();private onProgressChangedListener listener;public interface onProgressChangedListener{void onProgressValueChanged(int progressValue);}public CustomView(Context context) {this(context,null);}public CustomView(Context context, @Nullable AttributeSet attrs) {this(context, attrs,0);}public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {this(context, attrs, defStyleAttr,0);}public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);initAttrs();initBitmaps();initPaints();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(getCustomMeasureWidth(widthMeasureSpec),getCustomMeasureHeight(heightMeasureSpec));}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);initKeyPoints();initMatrix();generateLeaves();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);drawLeafs(canvas);drawProgress(canvas);canvas.drawBitmap(mBg_Container.src,mPadding_left,mPadding_top,mBitmapPaint);drawFengShan(canvas);postInvalidateDelayed(50);}private void drawLeafs(Canvas canvas) {int mProgressWidth = (int) ((mProgressValue/MAX_PROGRESS_VALUE)*(getWidth()-mPadding_left-mPadding_right-radius));for (Leaf mLeaf:mLeaves){canvas.save();mLeafMatrix.reset();mLeafMatrix.preRotate(mLeaf.degree,mLeafContainer.width/2,mLeafContainer.height/2);switch (mLeaf.rotateDirection){case ROTATE_LEFT:mLeaf.degree = mLeaf.degree-ROTATE_DEGREE;break;case ROTATE_RIGHT:mLeaf.degree = mLeaf.degree+ROTATE_DEGREE;break;}mLeafMatrix.postTranslate(mLeaf.position.x-50,mLeaf.position.y-mLeafContainer.height/2);switch (mLeaf.transition){case SMALL_TRANSITION:mLeaf.position.x = mLeaf.position.x - SMALL_X;break;case MIDDLE_TRANSITION:mLeaf.position.x = mLeaf.position.x - MIDDLE_X;break;case BIG_TRANSITION:mLeaf.position.x = mLeaf.position.x - BIG_X;break;}switch (mLeaf.transition){case SMALL_AMPLITUDE:if(mLeaf.position.y<(mRightCircleCenter.y-max)){y_step = -SMALL_Y;}else if (mLeaf.position.y>(mRightCircleCenter.y+max)){y_step = SMALL_Y;}break;case MIDDLE_AMPLITUDE:if(mLeaf.position.y<(mRightCircleCenter.y-max)){y_step = -MIDDLE_Y;}else if (mLeaf.position.y>(mRightCircleCenter.y+max)){y_step = MIDDLE_Y;}break;case BIG_AMPLITUDE:if(mLeaf.position.y<(mRightCircleCenter.y-max)){y_step = -BIG_Y;}else if (mLeaf.position.y>(mRightCircleCenter.y+max)){y_step = BIG_Y;}break;}mLeaf.position.y = mLeaf.position.y - y_step;if(mLeaf.position.x > mProgressWidth+mPadding_left+10){canvas.drawBitmap(mLeafContainer.src,mLeafMatrix,mBitmapPaint);}else{mLeaf.position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y-mLeafContainer.height/2);mLeaf.transition = new Random().nextInt(3);mLeaf.degree = new Random().nextInt(360);mLeaf.rotateDirection = new Random().nextInt(2);mLeaf.amplitude = new Random().nextInt(3);}canvas.restore();}}public void setProgressValue(int value){this.mProgressValue = value;invalidate();}public int getProgressValue(){return mProgressValue;}public void setProgressChangeListener(onProgressChangedListener listener){this.listener = listener;}private void drawProgress(Canvas canvas) {int shouldDrawWidth = (int) ((mProgressValue/MAX_PROGRESS_VALUE)*(getWidth()-mPadding_left-mPadding_right-radius));Log.d("zyq_progress","shouldDrawWidth = "+shouldDrawWidth);if(shouldDrawWidth<(mLeftCircleCenter.x-mPadding_left)){float degree = (float) Math.toDegrees(Math.acos((radius - shouldDrawWidth)/ (float) radius));canvas.save();canvas.drawArc(mLeftArcRect,180-degree,2*degree,false,mOrangePaint);}else{if (shouldDrawWidth>mRightCircleCenter.x){shouldDrawWidth = mRightCircleCenter.x;}canvas.save();canvas.drawArc(mLeftArcRect,90,180,true,mOrangePaint);canvas.drawRect(radius+mPadding_left,mPadding_top,shouldDrawWidth,2*radius+mPadding_top,mOrangePaint);canvas.restore();}if(listener != null){listener.onProgressValueChanged(mProgressValue);}}private void drawFengShan(Canvas canvas){if(mProgressValue<100){startDegree = startDegree+15;canvas.save();mFengShanRotate.reset();mFengShanRotate.preRotate(startDegree,mFengShanContainer.width/2,mFengShanContainer.height/2);mFengShanRotate.postTranslate(mFengshanPoint.x,mFengshanPoint.y);Log.i("zyq","mFengshanPoint.x ="+mFengshanPoint.x+" mFengshanPoint.y="+mFengshanPoint.y);canvas.drawBitmap(mFengShanContainer.src,mFengShanRotate,mBitmapPaint);canvas.restore();}else{canvas.save();mTextMatrix.reset();if(mTextScale<1){mWhitePaint.setTextSize(mTextSize*mTextScale);mWhitePaint.getTextBounds(mFinish,0,mFinish.length(),mTextRect);}else{mWhitePaint.setTextSize(mTextSize);mWhitePaint.getTextBounds(mFinish,0,mFinish.length(),mTextRect);}canvas.drawText(mFinish,0,mFinish.length(),mRightCircleCenter.x-((mTextRect.width())/2),mRightCircleCenter.y+(mTextRect.height()/2),mWhitePaint);mTextScale = mTextScale+0.1f;canvas.restore();}}private void initKeyPoints(){mLeftCircleCenter = new Point();radius = getHeight()/2-mPadding_bottom/2-mPadding_top/2;mLeftCircleCenter.y = radius+mPadding_top;mLeftCircleCenter.x = radius+mPadding_right;Log.d("zyq_point","View,height="+getHeight()+" mLeftCircleCenter.x = "+mLeftCircleCenter.x+"mLeftCircleCenter.y="+mLeftCircleCenter.y);mRightCircleCenter = new Point();mRightCircleCenter.y = radius+mPadding_top;mRightCircleCenter.x = getWidth()-radius-mPadding_right;Log.d("zyq_point","mRightCircleCenter.x = "+mRightCircleCenter.x+"mRightCircleCenter.y="+mRightCircleCenter.y);mFengshanPoint = new Point();mFengshanPoint.x = mRightCircleCenter.x-mFengShanContainer.width/2;mFengshanPoint.y = mRightCircleCenter.y-mFengShanContainer.height/2;Log.d("zyq_point","mFengshanPoint.x = "+mFengshanPoint.x+"mFengshanPoint.y="+mFengshanPoint.y);}private void initPaints(){mWhitePaint = new Paint();mWhitePaint.setAntiAlias(true);mWhitePaint.setDither(true);mWhitePaint.setTextSize(32);mWhitePaint.setTextAlign(Paint.Align.LEFT);mWhitePaint.setStrokeWidth(6f);mWhitePaint.setColor(WHITE_COLOR);mOrangePaint = new Paint();mOrangePaint.setAntiAlias(true);mOrangePaint.setDither(true);mOrangePaint.setColor(ORANGE_COLOR);mOrangePaint.setStyle(Paint.Style.FILL);mBitmapPaint = new Paint();mBitmapPaint.setAntiAlias(true);mBitmapPaint.setDither(true);mBitmapPaint.setFilterBitmap(true);}private void initBitmaps(){Bitmap mLeaf = ((BitmapDrawable)getResources().getDrawable(R.drawable.leaf_drawable,null)).getBitmap();Bitmap mFengShan = ((BitmapDrawable)getResources().getDrawable(R.drawable.fengshan_drawable,null)).getBitmap();Bitmap mbg_kuang = ((BitmapDrawable)getResources().getDrawable(R.drawable.leaf_kuang_drawable,null)).getBitmap();mLeafContainer = new BitmapContainer();mLeafContainer.src = mLeaf;mLeafContainer.width = mLeaf.getWidth();mLeafContainer.height = mLeaf.getHeight();mFengShanContainer = new BitmapContainer();mFengShanContainer.src = mFengShan;mFengShanContainer.width = mFengShan.getWidth();mFengShanContainer.height = mFengShan.getHeight();Log.i("zyq","fen:width="+mFengShanContainer.width+" height="+mFengShanContainer.height);mBg_Container = new BitmapContainer();mBg_Container.src = mbg_kuang;mBg_Container.width = mbg_kuang.getWidth();mBg_Container.height = mbg_kuang.getHeight();Log.i("zyq_Bg_Container","mBg_Container:width="+mBg_Container.width+" height="+mBg_Container.height);}private void initMatrix(){mFengShanRotate = new Matrix();mLeafMatrix = new Matrix();mTextMatrix = new Matrix();calculatePosition();}private void calculatePosition(){mLeftArcRect = new RectF();mLeftArcRect.left = mPadding_left;mLeftArcRect.top = mPadding_top;mLeftArcRect.right = 2*radius+mPadding_left;mLeftArcRect.bottom = 2*radius+mPadding_top;mTextRect = new Rect();mWhitePaint.getTextBounds(mFinish,0,mFinish.length(), mTextRect);}private class BitmapContainer{Bitmap src;int width;int height;}private class Leaf{Point position;int degree;long startTime;int rotateDirection;int amplitude;int transition;public Leaf(){position = new Point();position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y);degree = new Random().nextInt(360);startTime = System.currentTimeMillis();rotateDirection = new Random().nextInt(2);amplitude = new Random().nextInt(3);transition = new Random().nextInt(3);}public Leaf(int transition){position = new Point();position.set(mRightCircleCenter.x-radius,mRightCircleCenter.y);degree = new Random().nextInt(360);startTime = System.currentTimeMillis();rotateDirection = new Random().nextInt(2);amplitude = new Random().nextInt(3);this.transition = transition;}}private void generateLeaves() {if(mLeaves.isEmpty()){for(int i = 0;i<3;i++){Leaf l = new Leaf(i);mLeaves.add(l);}}}private int getCustomMeasureWidth(int widthMeasureSpec){int mode = MeasureSpec.getMode(widthMeasureSpec);int size = MeasureSpec.getSize(widthMeasureSpec);if (mode == MeasureSpec.EXACTLY){Log.i("zyq_view","view.size = "+size);return size;}else{Log.i("zyq_view","view.width = "+(mBg_Container.width+getPaddingLeft()+getPaddingRight()));return mBg_Container.width+getPaddingLeft()+getPaddingRight();}}private int getCustomMeasureHeight(int heightMeasureSpec){int mode = MeasureSpec.getMode(heightMeasureSpec);int size = MeasureSpec.getSize(heightMeasureSpec);if (mode == MeasureSpec.EXACTLY){return size;}else{return mBg_Container.height+getPaddingTop()+getPaddingBottom();}}private void initAttrs() {mPadding_left = getPaddingLeft();mPadding_top = getPaddingTop();mPadding_right = getPaddingRight();mPadding_bottom = getPaddingBottom();Log.i("zyq_pad","left="+mPadding_left+" top="+mPadding_top+" right="+mPadding_right+" bottom="+mPadding_bottom);}
}

在文件刚开始的时候，定义了各种宽高，比如叶子每次水平移动的距离、垂直移动的距离，旋转的角度、旋转的方向等。基本上来说就是你想控制什么样的动作，就需要你定义什么样的属性，通过属性控制对象的动作。这里的三个图片都是提前准备好的。然后在view中获取这个单个图片对应的bitmap，并获取每个bitmap的宽高，这里的宽高用于以后确定这些bitmap的绘制位置。

在实际的绘制过程中，还需要考虑图层的关系，因为需要有叶子融入的感觉，所以在这里把绘制叶子的步骤放在最前面，这样实现的了叶子融入的感觉。

其次，自定义View中的动画都是通过控制矩阵来实现，比如旋转、移动等。但是字体放大的动画，我试过矩阵，但是不起作用，最后不得已通过改变字体尺寸来实现，希望有知道的朋友可以告诉我一下，不胜感激！！！

其实，其他的动画还好，就是叶子的动画不太好弄，因为需要一种，叶子随机出现的效果，我这里做的不好，希望大神们可以帮忙更改一下！！原作者的叶子动画是与时间关联的，我没有采用，只是限定了叶子出现的位置。具体的情况，还请麻烦各位看代码吧！！！

好了，关于自定义View，暂时就说到这里，以后还将继续介绍有关于自定义View方面的内容，希望大家可以关一下！！！

这是我的微信公众号，如果可以的话，希望您可以帮忙关注一下，这将是对我最大的鼓励了，谢谢！！

公众号