自定义View详解

一、前言

自定义View可能大家平常都会使用到，但是一般都是复制一个别人的代码，还没有过完全自己写的自定义view吧。自定义view一般使用在自定义进度条时会用到。自定义可以简单理解为封装的TextView、Button等都是继承自View。

二、概述

自定义View需要学习三个变量属性；Canvas（画布）、Paint（画笔）、Rect（尺寸）

1、Canvas（画布）类

可以用来实现各种图形的绘制工作，如绘制直线、矩形、圆等等

1、绘制直线：canvas.drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) //画线，参数一起始点的x轴位置，参数二起始点的y轴位置，参数三终点的x轴水平位置，参数四y轴垂直位置，最后一个参数为Paint 画刷对象。

2、绘制矩形：canvas.drawRect(RectF rect, Paint paint) //绘制区域和画笔样式

3、绘制圆形：canvas.drawCircle();参数一是中心点的x轴，参数二是中心点的y轴，参数三是半径，参数四是paint对象；

4、绘制字符：canvas.drawText(String text, float x, floaty, Paint paint) //渲染文本，Canvas类除了上面的还可以描绘文字，参数一是String类型的文本，参数二x轴，参数三y轴，参数四是Paint对象。

5、绘制图形：canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint) //参数一就是我们常规的Bitmap对象，参数二是源区域(这里是bitmap)，参数三是目标区域(应该在canvas的位置和大小)，参数四是Paint画刷对象

6、绘制圆弧：canvas.drawArc();参数一是RectF对象，一个矩形区域椭圆形的界限用于定义在形状、大小、电弧，参数二是起始角(度)在电弧的开始，参数三扫描角(度)开始顺时针测量的，参数四是如果这是真的话,包括椭圆中心的电弧,并关闭它,如果它是假这将是一个弧线,参数五是Paint对象；

7、绘制一个路径：canvas.drawPath(Path path, Paint paint) //参数一为Path路径对象

8、画点：canvas.drawPoint(float x, float y, Paint paint) //参数一水平x轴，参数二垂直y轴，第三个参数为Paint对象。

9、画椭圆：canvas.drawOval(RectF oval, Paint paint)//参数一是扫描区域，参数二为paint对象；

2、Paint(画笔）类

要绘制图形，首先得调整画笔，按照自己的开发需要设置画笔的相关属性

1、setAntiAlias(boolean aa) // 是否抗锯齿

2、setColor(int color) // 设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义

3、setARGB(int a, int r, int g, int b) // 设置 Paint对象颜色，参数一为alpha透明值

4、setAlpha(int a) // 设置alpha不透明度，范围为0~255

5、setTextSize(float textSize) // 设置字体大小

6、setStyle()：设置画笔的风格（空心或实心）

7、setStrokeWidth()：设置空心边框的宽度

8、getColor()：获取画笔的颜色

9、setTextScaleX(float scaleX) // 设置文本缩放倍数，1.0f为原始

10、setUnderlineText(booleanunderlineText) // 设置下划线

3、Rect（尺寸）类

设置画布大小new Rect(int left, int top, int right, int bottom)

4、代码讲解

（1）新定义一个类，继承View，需要重新OnDraw方法，在这里就是对页面进行重新画图。效果图如下，可能不太好看。

（2）实现代码：其中在代码中都有详细解释

public class CustomViewActivity extends View{
    @SuppressWarnings("unused")
    private RectF rectBounds = new RectF();
    private Paint barPaint = new Paint();
    private RectF circleBounds = new RectF();
    int progress = 0;
    int spinSpeed=1;
    public CustomViewActivity(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
    /*
    * 当View的大小发生改变时，会调用此方法
    * */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        rectBounds = new RectF(5, 5, 100, 100);
        invalidate();
        spinHandler.sendEmptyMessage(0);
    }

    /*
    * 这个方法就是自定义View的核心。绘制各种图形
    * */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 获取传入的padding值
/*        final int paddingLeft = getPaddingLeft();
        final int paddingRight = getPaddingRight();
        final int paddingTop = getPaddingTop();
        final int paddingBottom = getPaddingBottom();

        // 获取绘制内容的高度和宽度（考虑了四个方向的padding值）
        int width = getWidth() - paddingLeft - paddingRight ;
        int height = getHeight() - paddingTop - paddingBottom ;*/

        // 创建画笔
        Paint p = new Paint();
        p.setColor(Color.RED);// 设置红色
        canvas.drawText("画文本123：", 0, 50, p);// 画文本
        p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除，大家一看效果就明白了
        /*
        * 第一个参数为线性起点的x坐标
        * 第二个参数为线性起点的y坐标
        * 第三个参数为线性终点的x坐标
        * 第四个参数为线性终点的y坐标
        * 第五个参数为实现渐变效果的颜色的组合
        * 第六个参数为前面的颜色组合中的各颜色在渐变中占据的位置（比重），如果为空，则表示上述颜色的集合在渐变中均匀出现
        * 第七个参数为渲染器平铺的模式，一共有三种
        * 1、CLAMP：边缘拉伸
        * 2、REPEAT：在水平和垂直两个方向上重复，相邻图像没有间隙
        * 3、MIRROR：以镜像的方式在水平和垂直两个方向上重复，相邻图像有间隙
        * */
        Shader mShader = new LinearGradient(0, 0, 10, 10,
                new int[] { Color.RED, Color.BLUE, Color.YELLOW,
                        Color.GREEN }, null, Shader.TileMode.REPEAT); //
        p.setShader(mShader);
        //画圆，横坐标、纵坐标
        canvas.drawCircle(120, 100, 100, p);// 大圆

        //圆形进度条
        barPaint.setColor(Color.RED);
        //设置抗锯齿，如果不设置，加载位图的时候可能会出现锯齿状的边界，如果设置，边界就会变的稍微有点模糊，锯齿就看不到了。
        barPaint.setAntiAlias(true);
        /*
        * // Style有3种类型：
        // 类型1：Paint.Style.FILLANDSTROKE（描边+填充）
        // 类型2：Paint.Style.FILL（只填充不描边）
        // 类型3：Paint.Style.STROKE（只描边不填充）
        * */
        barPaint.setStyle(Paint.Style.STROKE);
        //设置画笔的粗细
        barPaint.setStrokeWidth(20);
        //定义位置
        circleBounds = new RectF(200, 200, 264, 264);
        //
        /*
        * 画弧形的大小和开始位置
        * 参数一：位置
        * 参数二：开始角度
        * 参数三：弧形长度
        * 参数4：true：则为包括圆形中心的电弧。
        * 参数五：圆弧的颜色和圆弧宽度等信息
        * */
        canvas.drawArc(circleBounds, progress - 90, 50, false,
                barPaint);
    }

    /*
    * 开启定时器功能，实现实时刷新页面旋转
    * */
    private Handler spinHandler = new Handler() {
        /**
         * This is the code that will increment the progress variable
         * and so spin the wheel
         */
        @Override
        public void handleMessage(Message msg) {
            //页面重新加载
            invalidate();
                progress += spinSpeed;
                if(progress<240){
                    spinSpeed=3;
                }else{
                    spinSpeed=1;
                }
                if (progress > 360) {
                    progress = 0;
                }
                spinHandler.sendEmptyMessageDelayed(0, 0);
            //super.handleMessage(msg);
        }
    };
}

（3）在xml中的调用方式

    <com.fei.main.module.viewSlide.CustomViewActivity
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        />

5、自定义xml属性

有些时候需要一些系统所没有的属性，称为自定义属性
使用步骤有如下：
1、在values目录下创建自定义属性的xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <declare-styleable name="ProgressWheel">
                <attr name="text" format="string" />
                <attr name="textColor" format="color" />
                <attr name="textSize" format="dimension" />
                <attr name="barColor" format="color" />
                <attr name="rimColor" format="color" />
                <attr name="rimWidth" format="dimension" />
                <attr name="spinSpeed" format="dimension" />
                <attr name="delayMillis" format="integer" />
                <attr name="circleColor" format="color" />
                <attr name="radius" format="dimension" />
                <attr name="barWidth" format="dimension" />
                <attr name="barLengt" format="dimension" />
                <attr name="contourColor" format="color"/>
                <attr name="contourSize" format="dimension"/>
        </declare-styleable>
</resources>

2、在自定义View的构造方法中解析自定义属性的值

    public ProgressWheel(Context context, AttributeSet attrs) {
        super(context, attrs);

        parseAttributes(context.obtainStyledAttributes(attrs,
                R.styleable.ProgressWheel));
    }

    private void parseAttributes(TypedArray a) {
        barWidth = (int) a.getDimension(R.styleable.ProgressWheel_barWidth,
                barWidth);

        rimWidth = (int) a.getDimension(R.styleable.ProgressWheel_rimWidth,
                rimWidth);

        spinSpeed = (int) a.getDimension(R.styleable.ProgressWheel_spinSpeed,
                spinSpeed);

        delayMillis = a.getInteger(R.styleable.ProgressWheel_delayMillis,
                delayMillis);
        if (delayMillis < 0) {
            delayMillis = 0;
        }

        barColor = a.getColor(R.styleable.ProgressWheel_barColor, barColor);

        barLengt = (int) a.getDimension(R.styleable.ProgressWheel_barLengt,
                barLengt);

        textSize = (int) a.getDimension(R.styleable.ProgressWheel_textSize,
                textSize);

        textColor = a.getColor(R.styleable.ProgressWheel_textColor,
                textColor);

        //if the text is empty , so ignore it
        if (a.hasValue(R.styleable.ProgressWheel_text)) {
            setText(a.getString(R.styleable.ProgressWheel_text));
        }

        rimColor = a.getColor(R.styleable.ProgressWheel_rimColor,
                rimColor);

        circleColor = a.getColor(R.styleable.ProgressWheel_circleColor,
                circleColor);

        contourColor = a.getColor(R.styleable.ProgressWheel_contourColor, contourColor);
        contourSize = a.getDimension(R.styleable.ProgressWheel_contourSize, contourSize);


        // Recycle
        a.recycle();
    }

3、在布局文件中使用自定义属性

<com.fei.main.module.dialog.ProgressWheel
			android:id="@+id/progressBar_dialog"
			android:layout_width="50dp"
			android:layout_height="50dp"
			ProgressWheel:text="JD"
			ProgressWheel:textColor="#fff"
			ProgressWheel:textSize="14dp"
			ProgressWheel:rimColor="#fff"
			ProgressWheel:barLengt="30dp"
			ProgressWheel:barColor="#339BB9"
			ProgressWheel:contourColor="@color/grey"
			ProgressWheel:barWidth="4dp"
			ProgressWheel:rimWidth="5dp"
			ProgressWheel:spinSpeed="3dp" />