自定义View学习篇之绘制一个圆环动画

前言

我们都知道，现实生活中画一幅画需要笔和纸，另外还需要各式各样的绘画技巧，那么同样的自定义view也需要这些。正好Android也给我们提供了这两样东西：Paint和Canvas，一个是画笔而另一个呢当然是画布啦

Paint中有各种setter方法可以设置不同的属性，比如setColor()设置画笔颜色，setStrokeWidth()设置描边线条，setStyle()设置画笔的样式：

Paint集成了所有“画”的属性，而Canvas则定义了所有要画的东西，我们可以通过Canvas下的各类drawXXX方法绘制各种不同的东西，比如绘制一个圆drawCircle()，绘制一个圆弧drawArc()，绘制一张位图drawBitmap()等等等：

初步了解完这些，就可以尝试绘制一个view了

具体步骤如下

首先新建一个AndroidStudio项目CustomView，然后在项目中新建一个views的包用于写自定义view相关的类，这里我们在views的包里新建一个CustomView类让它继承View类实现Runnable接口，具体代码如下所示：

package com.lijizhi.customviewdemo.views;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

/*  项目名 CustomViewDemo
  *  包名  com.lijizhi.customviewdemo.views
  *  文件名: CustomView
  *  创建者 : LJZ
  *  创建时间:2017/10/13 0013 上午 7:41
  *  描述    自定义View
*/
public class CustomView extends View implements Runnable{
   private Paint mPaint;  //画笔
    private Context mContext;//上下文的引用
    private int radiu;//圆环半径

   public CustomView(Context context){
   this(context,null);
   }

   public CustomView(Context context, AttributeSet attrs){
       super(context,attrs);
       mContext=context;
       initPaint();//初始化画笔
   }

    private void initPaint() {
        //实例化画笔，并打开抗锯齿
     mPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    /*
         * 设置画笔样式为描边，圆环嘛……当然不能填充不然就么意思了
         *
         * 画笔样式分三种：
         * 1.Paint.Style.STROKE：描边
         * 2.Paint.Style.FILL_AND_STROKE：描边并填充
         * 3.Paint.Style.FILL：填充
         */
    mPaint.setStyle(Paint.Style.STROKE);
    //设置画笔颜色为浅灰色
        mPaint.setColor(Color.LTGRAY);
    /*
    * 设置描边的粗细，单位：像素px
    * 注意：当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素
    */
    mPaint.setStrokeWidth(10);
    }
    @Override
    protected void onDraw(Canvas canvas){
        super.onDraw(canvas);
        //绘制圆环
        canvas.drawCircle(MeasureUtil.getScreenSize((Activity) mContext)[0] / 2, MeasureUtil.getScreenSize((Activity) mContext)[1] / 2, radiu, mPaint);
    }
    @Override
    public void run(){
        //确保线程不断执行不断刷新页面
    while(true){
    try{
    //如果半径小于200则自加，否则大于200后重置半径值以实现往复
    if(radiu<200){
        radiu+=10;
        // 刷新View
        postInvalidate();
    }else{
        radiu=0;
    }
    //每执行一次暂停40毫秒
        Thread.sleep(40);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    }
    }
}

简单分析一下以上的代码，首先在CustomView类中声明了三个属性，分别为mPaint(画笔)，mContext(上下文)，radiu(圆环半径)，紧接着就是编写CustomView的构造方法及重载方法，这里不得不提的是重载方法的第二个参数AttributeSet，为什么需要这个参数呢？因为我们定义一个view会用到layout_width，layout_height等等这些属性，所以就必须传入这个参数，否则会报错。然后就是实例化画笔对象，在onDraw方法里编写相应的逻辑操作，这里要想让圆环有动画效果，则必须开启一个子线程不断更改圆环的半径并刷新页面。

在绘制圆环的宽高这一块，我们用到了 MeasureUtil.getScreenSize，这里的工具类及其方法是需要我们自己定义的，具体代码如下所示：

package com.lijizhi.customviewdemo.views;

import android.app.Activity;
import android.util.DisplayMetrics;

/*  项目名 CustomViewDemo
  *  包名  com.lijizhi.customviewdemo.views
  *  文件名: MeasureUtil
  *  创建者 : LJZ
  *  创建时间:2017/10/13 0013 上午 7:41
  *  描述   绘制工具类
*/
public final class MeasureUtil {
    /**
     * 获取屏幕尺寸
     *
     * @param activity
     *
     * @return 屏幕尺寸像素值，下标为0的值为宽，下标为1的值为高
     */
    public static int[] getScreenSize(Activity activity){
        DisplayMetrics metrics=new DisplayMetrics();
        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
        return new int[]{metrics.widthPixels,metrics.heightPixels};
    }
}

做完了前两步，我们就要在布局文件中引入我们刚刚自定义的view
如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <com.lijizhi.customviewdemo.views.CustomView
        android:id="@+id/main_cv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

最后一步我们只需要在MainActivity中获取控件并开启子线程就行了。

package com.lijizhi.customviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.lijizhi.customviewdemo.views.CustomView;

public class MainActivity extends AppCompatActivity {
    private CustomView mCustomView; //我们自定义View

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

    }

    private void initView() {
        // 获取控件
        mCustomView=(CustomView)findViewById(R.id.main_cv);
        /*
         * 开线程
         */
        new Thread(mCustomView).start();
    }
}

最终效果如下图

这里我就简单的截了个图，实际的动态效果，大家可以自己跟着做一遍就好了。