Android(安卓)自定义View——自定义View控件

　　Android给我们提供了大量的View控件，但这还是远远满足不了我们的要求，有时候开发所需要的控件形式是在Android提供的控件中是不存在，这就需要我们自己去定义一个。那么如何自定义控件？
　　学习自定义控件，首先要先掌握Canvas类的使用。
　　

Canvas

　　Canvas，我们称之为“画布“，主要适用于绘制View的。
Canvas中提供了大量绘制图形的方法：

绘制扇形：

drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint):
　　第一个参数RectF对象，指定扇形的区域；第二个参数是起始角度；第三个参数是旋转角度，顺时针旋转；第四个参数是是否填充，true为填充，false为不填充，也就是为一条弧线；第五个参数是绘制图形的画笔对象Paint。
RectF：
　　通过RectF(float left, float top, float right, float bottom)构造器创建RectF对象，我们通过下图理解各个参数的含义，RectF对象指代的就是一个矩形区域。我们通过这四个参数构建矩形区域。

Paint：
　　是绘制所有图形所用到的一个画笔，我们在稍后讲解。
drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
　　　这个是将扇形区域左，上，右，下边的坐标直接输入，而不是通过RectF对象。其他参数同上。

绘制圆形：

drawCircle(float cx, float cy, float radius, Paint paint)
　　第一、二个参数是指圆形的x, y坐标；第三个参数是半径；第四个参数是画笔Paint对象。

绘制直线：

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
　　两点确定一条直线，第一、二参数是起始点的坐标；第三、四参数是结束点的坐标；第五个参数画笔Paint对象。
drawLines(float[] pts, Paint paint)
　　多个点确定一条直线，第一个参数是点的数组；第二个参数是画笔Paint对象。
drawLines(float[] pts, int offset, int count, Paint paint)

绘制椭圆：

drawOval(float left, float top, float right, float bottom, Paint paint)
　　前四个参数是椭圆的左，上，右，下边的坐标，第五个是画笔Paint对象。
drawOval(RectF oval, Paint paint)　
　　第一个参数是RectF对象，第二个参数是画笔Paint对象。

绘制矩形：

drawRect(RectF rect, Paint paint)
　　第一个参数是RectF对象，第二个参数是画笔Paint对象。

绘制点：

drawPoint(float x, float y, Paint paint)
　　第一、二个参数点的坐标，第三个参数为Paint对象。

渲染文本：

drawText(String text, float x, floaty, Paint paint)
drawText(CharSequence text, int start, int end, float x, float y, Paint paint)
drawText(char[] text, int index, int count, float x, float y, Paint paint)
drawText(String text, int start, int end, float x, float y, Paint paint)

　　Canvas中还给我们提供了很多绘制其他图形的方法，这里我们不在一一列举。我们来看一下Paint”画笔“。

Paint

　　　Paint是用于绘制的画笔，Canvas就像是我们的画纸，我们需要笔才可以完成一整幅图。Paint中为我们提供了很多设置的方法（我们这里只列举常用的方法）：

setARGB(int a, int r, int g, int b)
　　设置 Paint对象颜色，参数一为alpha透明值
setAlpha(int a)
　　设置alpha不透明度，范围为0~255
setAntiAlias(boolean aa)
　　是否抗锯齿，这个一般是都要设置的。
setColor(int color)
　　设置颜色，这里Android内部定义的有Color类包含了一些常见颜色定义
setTextScaleX(float scaleX)
　　设置文本缩放倍数，1.0f为原始
setTextSize(float textSize)
　　设置字体大小
setUnderlineText(booleanunderlineText)
　　设置下划线
setStrokeCap(Paint.Cap cap)
　　当画笔样式为STROKE或FILL_OR_STROKE时，设置笔刷的图形样式，如圆形样式 Cap.ROUND,或方形样式Cap.SQUARE
setSrokeJoin(Paint.Join join)
　　设置绘制时各图形的结合方式，如平滑效果等

自定义View

　　现在我们来使用Canvas类自定义一个View控件。自定义控件步骤如下：
1. 自定义View，首先定义一个MyView类继承View类。
2. 重写View的两个构造器。
　　View是包含四个构造器的，我们必须重写MyWidgetView(Context context, AttributeSet attrs)构造器，因为该构造器的第二个参数是与xml布局文件相联系的，如果没有重写该构造器，将不能在布局中使用该控件。这里我们重写他的两个构造器：

    public MyView(Context context) {        super(context);    }    public MyView(Context context, AttributeSet attrs) {        super(context, attrs);    }

3. 重写onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法，定义控件的尺寸：宽度和高度。在布局中使用该控件时会会传入控件的尺寸，只有当传入尺寸之后且调用onMesure之后，控件才会有宽度和高度。

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);//设置宽和高    }

重写onDraw(Canvas canvas)方法，我们在该方法中定义绘制View，当我们在Activity或其他地方使该控件时， UI主线程会调用onDraw方法绘制。

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);    }

　　onDraw(Canvas canvas)方法中传入了一个Canvas对象，我们在定义控件时，使用Canvas绘制。

绘制时钟

　　这里我们通过绘制一个时钟来巩固一下自定义控件以及Canvas类的使用。
1. 定义一个MyView继承View。
2. 重写MyView(Context context, AttributeSet attrs)构造器。
3. 在重写onMeasureh和onDraw方法。
4. 在onDraw方法中绘制。
　　大体步骤就是这样，我们先贴代码，逐步讲解：

public class MyView extends View {    private int width;//设置高    private int height;//设置高    private Paint mPaintLine;//定义一个绘制直线的画笔    private Paint mPaintSecondLine;//定义一个绘制直线的画笔    private Paint mPaintInterCircle;//定义一个绘制圆的画笔    private Paint mPaintOutSideCircle;//定义一个绘制圆的画笔    private Paint mPaintText;//定义一个绘制文字的画笔    private Calendar mCalendar;//创建一个时间类    private static final int NEED_INVALIDATE=0X6666;    //操作UI主线程    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what){                case NEED_INVALIDATE:                    //跟新时间                    mCalendar=Calendar.getInstance();                    invalidate();                    sendEmptyMessageDelayed(NEED_INVALIDATE,1000);                    break;            }        }    };    public MyView(Context context) {        super(context);    }    public MyView(Context context, AttributeSet attrs) {        super(context, attrs);        //初始化画直线的画笔        mPaintLine = new Paint();        mPaintLine.setAntiAlias(true);//消除锯齿        mPaintLine.setColor(Color.GRAY);//设置画笔颜色        mPaintLine.setStyle(Paint.Style.STROKE);//设置为空心        mPaintLine.setStrokeWidth(10);//设置宽度        // 初始化秒针的画笔        mPaintSecondLine = new Paint();        mPaintSecondLine.setAntiAlias(true);//消除锯齿        mPaintSecondLine.setColor(Color.GRAY);//设置画笔颜色        mPaintSecondLine.setStyle(Paint.Style.STROKE);//设置为空心        mPaintSecondLine.setStrokeWidth(7);//设置宽度        //初始化内圆的画笔        mPaintInterCircle = new Paint();        mPaintInterCircle.setAntiAlias(true);//消除锯齿        mPaintInterCircle.setColor(Color.BLACK);        mPaintInterCircle.setStyle(Paint.Style.STROKE);//设置为空心        mPaintInterCircle.setStrokeWidth(5);        //初始化外圆的画笔        mPaintOutSideCircle = new Paint();        mPaintOutSideCircle.setAntiAlias(true);//消除锯齿        mPaintOutSideCircle.setColor(Color.BLACK);        mPaintOutSideCircle.setStyle(Paint.Style.STROKE);//设置为空心        mPaintOutSideCircle.setStrokeWidth(10);        //绘制文字的画笔        mPaintText = new Paint();        mPaintText.setAntiAlias(true);//消除锯齿        mPaintText.setColor(Color.GRAY);        mPaintText.setStyle(Paint.Style.STROKE);//设置为空心        mPaintText.setTextAlign(Paint.Align.CENTER);        mPaintText.setTextSize(40);        mPaintText.setStrokeWidth(6);        //初始化日历        mCalendar = Calendar.getInstance();        //发送一个消息给UI主线程        handler.sendEmptyMessageDelayed(NEED_INVALIDATE,2000);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);//设置宽和高    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        // 主线程自动调用        canvas.drawCircle(width / 2, height / 2, 300, mPaintInterCircle);        canvas.drawCircle(width / 2, height / 2, 320, mPaintOutSideCircle);        for(int i=1; i<=12;i++){            canvas.save();//保存当前状态            canvas.rotate(360 / 12 * i, width / 2, height / 2);            canvas.drawLine(width / 2, height / 2 - 300, width / 2, height / 2 - 270, mPaintLine);            canvas.drawText("" + i, width / 2, height / 2 - 240, mPaintText);            canvas.restore();//回到save()方法保存的状态        }        //绘制分针        int minute=  mCalendar.get(Calendar.MINUTE);        float minuteDegree =  minute/60f*360;        canvas.save();        canvas.rotate(minuteDegree, width / 2, height / 2);        canvas.drawLine(width / 2, height / 2 - 200, width / 2, height / 2 + 40, mPaintLine);        canvas.restore();        //绘制时针        int hour=  mCalendar.get(Calendar.HOUR);        float hourDegree = (hour*60+minute)//(12f*60)*360;        canvas.save();        canvas.rotate(hourDegree, width / 2, height / 2);        canvas.drawLine(width / 2, height / 2 - 170, width / 2, height / 2 + 30, mPaintLine);        canvas.restore();        //绘制秒针        int second =  mCalendar.get(Calendar.SECOND);        float secondDegree = second*6;//一秒是6度。        canvas.save();        canvas.rotate(secondDegree, width / 2, height / 2);        canvas.drawLine(width / 2, height / 2 - 220, width / 2, height / 2 + 50, mPaintSecondLine);        canvas.restore();    }}

　　绘制两个圆形嵌套这个很简单，不用多说。然后绘制刻度，是使用了Canvas画布的旋转，这个很好理解，我们在画画的时候，有时候要画一些比较难的角度，我们都是将画板旋转而不是我们自己换角度。在绘制时钟时，我们要绘制时钟每个时间的刻度，我们可以将要绘制刻度的位置旋转到竖直方向，然后绘制。

        for(int i=1; i<=12;i++){            canvas.save();//保存当前状态            canvas.rotate(360 / 12 * i, width / 2, height / 2);            canvas.drawLine(width / 2, height / 2 - 300, width / 2, height / 2 - 270, mPaintLine);            canvas.drawText("" + i, width / 2, height / 2 - 240, mPaintText);            canvas.restore();//回到save()方法保存的状态        }

　　然后绘制时针，分针和秒针，他们都是绘制一条线。然后通过获取当前的时间将这条线指向对得时间点，也就是偏转对得角度。这里的偏转我们依然使用画布的偏转。
　　以上完成后，我们的时钟就差不多完成了，但是，我们发现我们的表并没有走。实现我们绘制的时钟转动的方式就是然我们的时钟每一秒onDraw一次，这样我们的时钟正常了。onDraw是UI主线程不断调用重绘界面的，因此我们需要使用到Handler，通过发送一个消息给Handler对象，让Handler对象在每一秒重绘一次MyView控件。这里重绘不能调用onDraw()方法额，而要调用的是invalidate()方法，invalidate()方法中调用了onDraw()方法。

      //操作UI主线程    private Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            super.handleMessage(msg);            switch (msg.what){                case NEED_INVALIDATE:                    //跟新时间                    mCalendar=Calendar.getInstance();                    invalidate();                    sendEmptyMessageDelayed(NEED_INVALIDATE,1000);                    break;            }        }    };

　　这样我们的时钟也转动了……

Canvas

Paint

自定义View

绘制时钟

更多相关文章

随机推荐