之前看到了一个很炫的动态图,是一个加载的进度条

图片

确实挺好看的,有一篇博客做了一个view,几乎一模一样的呈现了和动态图一样的效果

链接看原文

原博客背景用的是一张黄色的图片作为背景.想要修改的话是不能修改的.在我的自定义LeafLoadView中,添加了背景的修改功能

背景和边框都是由Android的view绘制出来的,添加了很多属性,可以自定义修改

我的github链接
LeafLoadView
很多的自定义View

效果图如下

1493335149523.mp4_1493336134.gif

LeafLoadView考入到工程就能使用

一些常见的属性

主要是利用Android的canvas。画出各个部分，仔细分析这个View，其中左边是一个半弧，上下各有两个矩形，右边是一个圆环，中间的飞车那车是一个旋转的动画，一步一步的实现这个动画

主要的代码：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //外层
    mPaint.setAntiAlias(true);
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mBackgroundColor);
    mRect = new RectF(0,0,mHeight,mHeight);
    mRectCen=new Rect(mHeight/2,0,mWidth-mHeight/2,mHeight);
    canvas.drawArc(mRect,90,180,true,mPaint);
    canvas.drawRect(mRectCen,mPaint);

    /***********seek****************/
    mPaint.reset();
    mPaint.setAntiAlias(true);
    mPaint.setColor(mSeekColor);
    mCurrentProgressPosition = (mWidth/*-mHeight/2*/) * progress / mTotalProgress;
    mRectSeek=new RectF(mBorderWidth,mBorderWidth,mHeight-mBorderWidth,mHeight-mBorderWidth);
    //判断在圆弧内部
    if(mCurrentProgressPosition<=mHeight-mBorderWidth){
        //单边角度
        mAngle = (int) Math.toDegrees(Math.acos((mHeight-mBorderWidth - mCurrentProgressPosition)/ (float) (mHeight-mBorderWidth)));
        //扫过的角度
        mStartAngle = 180 - mAngle;
        //进度的seekbar
        canvas.drawArc(mRectSeek,mStartAngle,mAngle*2,mCircleStyle,mPaint);
    }else { //判断在圆弧外了,需要填满圆弧,并且还要填矩形
        canvas.drawArc(mRectSeek,90,180,mCircleStyle,mPaint);
        seekRect=new Rect(mHeight/2,mBorderWidth,mCurrentProgressPosition-mHeight/2,mHeight-mBorderWidth);
        canvas.drawRect(seekRect,mPaint);
    }
    /***********seek over****************/
    //内层弧度
    mRect=new RectF(mBorderWidth/2,mBorderWidth/2,mHeight-mBorderWidth/2,mHeight-mBorderWidth/2);
    mPaint.reset();
    mPaint.setAntiAlias(true);
    mPaint.setColor(mBorderColor);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(mBorderWidth);
    canvas.drawArc(mRect,90,180,false,mPaint);
    //上下两条线
    mPath.moveTo(mHeight/2,mBorderWidth/2);
    mPath.lineTo(mWidth-mHeight/2,mBorderWidth/2);
    canvas.drawPath(mPath,mPaint);
    mPath.close();
    mPath.moveTo(mHeight/2,mHeight-mBorderWidth/2);
    mPath.lineTo(mWidth-mHeight/2,mHeight-mBorderWidth/2);
    canvas.drawPath(mPath,mPaint);
    mPath.close();
    //画圆
    mPaint.reset();
    mPaint.setAntiAlias(true);
    mPaint.setColor(mCircleColor);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(mCircleWidth);
    canvas.drawCircle(mWidth-mHeight/2,mHeight/2,mHeight/2-                     mCircleWidth/2,mPaint);
    //画右边的图片
//  mPaint.reset();
//  canvas.drawBitmap(mRightBitmap,mWidth-      mHeight+mBorderWidth,mBorderWidth,mPaint);
  }

通过这里，画出了主要的view。其中有风扇的动画

   public void rotationView(View view){
    ObjectAnimator animator = ObjectAnimator.ofFloat(view,"rotation",0,360);
    animator.setDuration(mRotationSpeed);
    animator.setRepeatCount(Animation.INFINITE);
    animator.setInterpolator(new LinearInterpolator());
    animator.setRepeatMode(Animation.RESTART);
    animator.start();
}

计算位置是比较麻烦的事儿，有需要的话可以研究研究，在activity中的使用也比较简单

如下：

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener {
private int totalPro=100;
private int progress=0;
private LeafLoadView mLeafLoadView;

Handler mHandler = new Handler() {
    public void handleMessage(Message msg) {
        switch (msg.what) {
            case 1:
                progress = progress + 1;
                mLeafLoadView.setPrograss(progress);
                mHandler.sendEmptyMessageDelayed(1,800); //800ms发送一次
                break;
            default:
                break;
        }
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initView();
}

private void initView() {
    mLeafLoadView = (LeafLoadView) findViewById(R.id.leafview);
    ImageView imageView= (ImageView) findViewById(R.id.fan_p);
    //设置精进度条的最大值
    mLeafLoadView.setTotalProgress(totalPro);
    //设置进度条每次的更新的值
    mLeafLoadView.rotationView(imageView);
    //handler发送延迟，更新界面
    mHandler.sendEmptyMessageDelayed(1,0);
}

布局如下

<RelativeLayout
    android:layout_width="302dp"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp">
<com.yk.leafloadview.LeafLoadView
    android:id="@+id/leafview"
    android:layout_width="300dp"
    android:layout_height="60dp"
    yk:backgroundColor="#fdf0c8"
    yk:borderColor="#fddd84"
    yk:seekColor="#fcc11d"
    yk:circleColor="#ffffff"
    yk:borderWidth="18"
    yk:circleWidth="8"
    yk:rotationSpeed="200"
    yk:circleLeftStyle="false"/>
<ImageView
    android:id="@+id/fan_p"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="7dp"
    android:src="@drawable/fengshan" />

其中每个属性的意思在上面都有提到，可以直接按照提示一个一个设置就能看出来效果了。