900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > android 自定义view控件 Android 自定义View——自定义View控件

android 自定义view控件 Android 自定义View——自定义View控件

时间:2021-06-30 02:41:59

相关推荐

android 自定义view控件 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;

}

}

};

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。