通过圆形载入View了解自定义View

这是自定义View的第一篇文章，通过制作简单的自定义View来了解自定义View的流程。
自定义View是Android学习和开发中必不可少的一部分。通过自定义View我们可以制作丰富绚丽的控件，自定义View主要有三种方式，具体如下：

  1. 继承已有的View,来扩展我们的View
  2. 组合多个View来实现一个复合的View
  3. 完全重写View，来实现制作全新的控件

这里，我们讲第三种方法来了解自定义View的流程。

自定义View主要依赖的方法

自定义VIew中，我们主要重写onMeasure，onDraw这两种方法来展现一个View。

onMeasure：主要工作是对我们要绘制的View进行测量，因为不进行测量的话，系统不知道要绘制的View有多大，无法绘制出我们需要的样子。
onDraw: 主要工作就是绘制我们需要的图形，这个是自定义View中定制性最强也是最主要的工作。

下面我们先了解一下这两个方法具体能做什么，然后我们通过一个实例来学习一下具体的用法。

onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

我们从上面的方法可以看出onMeasure 方法中有两个参数widthMeasureSpec，heightMeasureSpec这两个参数每一个参数中都包含了测量值的大小和测量的模式。
测量模式有一下三种：

  1. EXACTLY
    当我们把控layout_width或者layout_height属性设为match_parent或者是个100dp那样的精确值时就会用这种测量模式。
  2. AT_MOST
    即最大值模式，当控件的layout_width属性或者layout_height指定为wrap_content时，空间大小一般随着控件的子控件或者内容的变化而变化，这是控件的尺寸只要不超过父控件允许的最大尺寸就行了。
  3. UNSPECIFIED
    这个是我们按照自身的想法，想绘制多大就绘制多大,没有任何限制。

具体的做法一般是，我们先根据参数，得到具体的测量模式与测量值，在根据测试的模式不同，计算不同的宽度和高度。最后通过setMeasuredDimension(int measuredWidth,int measuredHeight)将我们计算过的宽和高设置进去，完成测量工作。

onDraw

onDraw(Canvas canvas)是我们展现自定义View的主要方法，他的参数是一个canvas也就是说一个画布，为了绘制图案，我们有了画布以外，我们还需要一个画笔Paint。这个画笔来决定你画图案的颜色，线条的粗细，是否抗锯齿，图案的风格等等。而画什么图案就交由canvas对象，调用canvas.drawXXX()来实现想要的图案，具体的文档，参见Canvas官方文档

自制圆形载入View

上面说了这么多，都是在YY，我们具体通过一个例子来走一遍自定义View的流程。效果如下：
|center

首先我们新建一个CircleLoadingView.java文件。该类继承View，生成构造器，显式调用父类的构造器，并初始化我们的Paint对象，覆写onMeasure，onDraw方法，实现自定义View.

第一步——初始化

在构造方法中，我们调用自己写的initView方法来初始化Paint对象

private void initView(){
        paint = new Paint();
        //设置画笔的颜色
        paint.setColor(circleColor);
        //设置抗锯齿，让图像更清晰
        paint.setAntiAlias(true);
        //设置画笔的风格，有三种属性FILL,STROLE,FILL_AND_STROKE,我们不需要填充，所以设置为STROKE
        paint.setStyle(Paint.Style.STROKE);
        //设置画笔的粗细
        paint.setStrokeWidth(circleStrokewidth);
    }

第二步——onMeasure

接下来，我们需要测量我们的View的大小，重写onMeasure()方法

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	    //设置一个默认的宽和高，AT_MOST模式需要
        int result = 0;
        //通过MeasureSpec.getMode与getSize方法获取宽和高的测量方式与测量大小
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
		//保存最后的测量值，优化代码的话可以不用这个变量的。
        int width = 0,height = 0;
		//对测量模式进行判断，如果是EXACTLY的话则最后的测量值就是系统帮我们测量的结果。
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        }else{
	        //如果是UNSPECIFIED 则使用我们的默认值作为最后的测量值
            result = 300;
            //如果是AT_MOST 则就要用系统测量结果与我们默认结果取最小值来决定最后的测量结果
            if (widthMode == MeasureSpec.AT_MOST) {
                width = Math.min(result,widthSize);
            }
        }
		//高度和宽度的过程是一致的。
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        }else {
            result = 300;
            if (heightMode == MeasureSpec.AT_MOST) {
                height = Math.min(result, heightSize);
            }
        }
        //把我们最后的宽和高设置进去
        setMeasuredDimension(width,height);

    }

这就是onMeasure方法的代码，可以看出来，这个都是可以放到其他地方复用的模板代码。

第三步——onDraw

我们基本已经完成了80%的工作了，接下来只需要重写onDraw()绘制我们需要的一个弧形就可以了。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //决定我们的弧形外接的矩形的宽和高
        float wdistance = (float)(wlength * 0.6);
        float hdistance = (float)(hlength * 0.6);
		//定义外接矩形
        RectF rectF = new RectF(
                wlength / 2 - wdistance / 2,
                hlength / 2 - hdistance / 2,
                wlength / 2 + wdistance / 2,
                hlength / 2 + hdistance / 2);
         //画弧形
        canvas.drawArc(
                rectF,//外接矩形
                270,//起始角度
                (float)(240),//划过的度数
                false,//是否是扇形
                paint//画笔
        );

    }

看了上面的代码，可能有些糊涂，因为里面多了很多没有提到的变量。首先的变量就是wlength，与hlength这个指的是我们onMeasure测量以后的宽和高，我们保存下来。在onMeasure方法中，我们加入下面代码。

 wlength = width;
 hlength = height;

同时我们定义了外接矩形的宽和高就是我们View的0.6倍，上，下， 左，右各留了0.2倍的内边距。然后通过new Rectf()方法来生成矩形对象，4个参数分别为矩形的左边距Y轴的距离（也就是说X轴的坐标），上边距X轴的距离（也就是说Y轴的坐标），右边距Y轴的距离（也就是说X轴的坐标），下边距Y轴的距离（也就是说Y轴的坐标）。具体见下图
|center

canvas 实际上就是这个坐标轴。
定义好外接矩形之后，我们开始调用drawArc方法开始绘制弧形，这个方法接受5个参数，第二个参数是弧起始的角度，这个接受一个整数代表角度，他是这样确定起始的角度的。以我们的手表的3点开始，顺时针转过我们定义的角度，这时的位置就是我们开始的位置，比如我们现在定义的是270，那就是手表3点的位置转过270度为我们弧形开始的位置。就是12点的位置。然后第三个参数，代表弧形划过的角度。也是顺时针。第四个参数则代表是否用扇形，我们这里不用，也就是说只是一个两个端点不连接圆心的弧，第五个是我们初始化过的paint。这样我们的自定义的弧形就出来了。
我们就可以把我们的控件放到xml中，当成普通的view去引用了。直接看代码：

<com.example.byhieg.circleloadingview.CircleLoadingView
        android:id="@+id/loading"
        android:layout_width="100dp"
        android:layout_height="100dp"
      android:layout_centerInParent="true"
        />
这里的引用View一定要用全名。我们就可以直接运行程序。

第四步——动起来

这个弧形其实并没有卵用，不能动。我们接下来让他动起来，这里我们就用绘图自带的方法postInvalidate()来实现重绘。要让一个图像动起来最简单的办法就是让他在每一个坐标点就绘制一下，然后让他在每个坐标点都出现一次就实现了动画的效果。就像小时候有那种很多页的漫画书，我们快速翻阅漫画书就感觉漫画书中的漫画动起来了，道理是一样的。
那这次我们只需要在onDraw方法中，不断修改弧形的第二个参数，让他每次不同就可以了。具体的我们看代码：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float wdistance = (float)(wlength * 0.6);
        float hdistance = (float)(hlength * 0.6);

        RectF rectF = new RectF(
                wlength / 2 - wdistance / 2,
                hlength / 2 - hdistance / 2,
                wlength / 2 + wdistance / 2,
                hlength / 2 + hdistance / 2);
        canvas.drawArc(
                rectF,
                //每次重绘，起始的角度就会多5度。
                270 + 5 * i,
                (float)(240),
                false,
                paint
        );
        i++;
        //调用重绘，来实现图像不断绘制
        postInvalidate();
    }

这样，我们再次运行程序的时候，我们的弧形就动起来。当我们在接触动画概念的时候，又会发现有很多方法实现弧形旋转。

第五步——完善

前面4步，我们已经实现了简单的自定义View,并且有一个可观的效果。但是我们还要完善一下，比如我们可以在XML中指定弧形的颜色，弧形的粗细。这个时候，我们就需要在values文件下新建一个attrs.xml。在里面制定我们的自定义属性，然后在我们的View文件中读取这些属性。
我们先看一下attrs.xml中，我们的代码：

<resources>
    <declare-styleable name="CircleLoadingView">
        <attr name="circleColor" format="color" />
        <attr name="circleStrokewidth" format="float" />
    </declare-styleable>
</resources>

这里，我们就定义了2个属性，一个是弧形的颜色，一个是弧形的粗细，格式分别是color和float。然后我们在view中的initView代码中，获取那些属性。代码如下：

TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleLoadingView);
        circleStrokewidth = ta.getFloat(R.styleable.CircleLoadingView_circleStrokewidth, 0);
        circleColor = ta.getColor(R.styleable.CircleLoadingView_circleColor, 0);

然后我们就可以在我们的xml中引用这些属性了。

<com.example.byhieg.circleloadingview.CircleLoadingView
        android:id="@+id/loading"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        circleview:circleColor="@android:color/holo_blue_dark"
        circleview:circleStrokewidth="15"/>

这里的circleview是要在根布局的设置中声明的 xmlns:circleview="http://schemas.android.com/apk/res-auto"
因为，这个主要出现在加载过程中，所以他需要一个方法来让他显示和隐藏。我们在View的文件中，设置一个方法叫做setViewVisable
当为true的时候，就可以显示，当为false就可以隐藏。这样，这个自定义View就比较完善了。
隐藏方法代码如下：

public void setViewVisable(boolean choose) {
        if (choose) {
            this.setVisibility(View.VISIBLE);
        }else{
            this.setVisibility(View.GONE);
        }
    }

PS

这个小控件的源码我放到网上了，大家可以对照参考下
CircleLoadingView的源码

posted @ 2016-07-21 14:23  byhieg  阅读(966)  评论(0)  编辑  收藏  举报