Android的自定义View---自绘控件

自定义View的实现方式大概可以分为三种，自绘控件、组合控件、以及继承控件.那么今天我们就来先来介绍一下自定义View中的自绘控件.
自绘控件,顾名思义,它就是说你所展示出来的View完全是你一手绘制出来滴.那么具体实现该怎么做呢?
1、继承View，建立构造方法。
2、重写其中的onMeasure()和onDraw()方法,记得这两个方法是必须要重写的,必要时还需要重写onKeyUp()、onKeydown()和onFinishInflate()等方法.
3、提供供外界调用的接口。
OK，现在我们试着写一个自绘控件----开关按钮（ToggleButton）

按照我们刚才的步骤，我们需要首先继承View，在代码中的表现就是

‘public class CustomToggleButton extends View{

public CustomToggleButton(Context context) {

super(context);

}

public CustomToggleButton(Context context, AttributeSet attrs) {

super(context, attrs);

}

public CustomToggleButton(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

}`

OK，到此结束我们的第一步已经完成，接下来就是重头戏儿啦，进入重点。

我们首先再做一点大战前的准备工作，将我们的定义这个View所需要的材料先准备一下。就像熬鸡汤，没有材料那也是”巧妇难为无米之炊“呀。

在这里我们需要如下的两张图片，把第二张图片往第一张图片上那么一盖是不是就是我们所要的开关按钮啦，当然还要做一些其他的处理。





我们呢需要将两张图片转化为Bitmap，为了接下来的方便使用。我们还要准备两种状态的图形：开和关。看代码：

// 设置要绘制的图片资源
public void setImageBitmap(int backgroundResId, int slideResId) {
// 背景图
backgroundBitmap = BitmapFactory.decodeResource(getResources(),
backgroundResId);
// 小滑块
slideBitmap = BitmapFactory.decodeResource(getResources(), slideResId);

// 关闭状态的矩形
rectOff = new Rect(0, 0, slideBitmap.getWidth(),
backgroundBitmap.getHeight());
// 开启状态的矩形
rectOn = new Rect(backgroundBitmap.getWidth() - slideBitmap.getWidth(),
0, backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
}

我们的准备工作我做完了，接下来就认真绘制。

/**
* 测量的方法:用来测量我们要绘制的控件的宽度和高度.--->真正进行
* 测量的方法是messure(int,int);
*只要复写onMeasure这个方法,就必须setMeasuredDimension()方
*法:是为了存储测量出来的宽和高.
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

setMeasuredDimension(backgroundBitmap.getWidth(),
backgroundBitmap.getHeight());
}

onDraw()方法的重写.

/**
* 重绘的方法
*
* 进行图形绘制的方法.
*
* canvas:画布.
*
* onDraw()方法的执行时机:1.onDraw()方法复写完成后,
* 系统会自动调用;
*
* 2.当我们调用完invalidate()方法后,系统会调用onDraw()
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 先绘制背景图
// 在画布(canvas)上,按照一定的样式(mMatrix),用画笔(mPaint)绘制backgroundBitmap.
canvas.drawBitmap(backgroundBitmap, mMatrix, mPaint);

if (isSlide) {
// backBitmap宽:100;slideBitmap宽:60;
// left范围:(0,40)
// 滑动状态
int left = (int) (currentX - slideBitmap.getWidth() / 2);
// 限定left的范围
if (left < rectOff.left) {
left = rectOff.left;
} else if (left > rectOn.left) {
left = rectOn.left;
}
canvas.drawBitmap(slideBitmap, left, rectOn.top, mPaint);
} else {
if (isToggle) {
// 绘制开启状态的效果
canvas.drawBitmap(slideBitmap, rectOn.left, rectOn.top, mPaint);
} else {
// 绘制关闭状态的效果
canvas.drawBitmap(slideBitmap, rectOff.left, rectOff.top,
mPaint);
}
}

}

在我们做好这一些之后我们会发现,当我们滑动ToggleButton时会有些卡顿,怎么办呢?这时我们就要重写另外的一个方法了.

// 专门处理屏幕上的触摸事件:DOWN;MOVE;UP;
@Override
public boolean onTouchEvent(MotionEvent event) {

// event.getAction():得到正在执行的事件类型.
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当前点的x的坐标值
currentX = event.getRawX();
isSlide = true;
break;
case MotionEvent.ACTION_MOVE:
currentX = event.getRawX();
break;
case MotionEvent.ACTION_UP:
currentX = event.getRawX();
isSlide = false;
break;
}

boolean state = currentX > backgroundBitmap.getWidth() / 2;

// 只有当当前状态和前一个状态不一致的时候,才有必要回调状态.
if (isToggle != state && mListener != null) {
mListener.onToggleStateChanged(state);
}

isToggle = state;

// 使当前视图失效--->重新调用onDraw()方法.
invalidate();

return true;
}

// 改变开关状态的方法
public void setToggleState(boolean state) {
this.isToggle = state;
}

这些个事情做完以后千万别忘了—接口.

// 供别的类来改变mListener值的方法.
public void setOnToggleStateChangedListener(
OnToggleStateChangedListener listener) {
this.mListener = listener;
}

基本上就是这些了,那么接下来我们这个小demo的全部代码都贴出来.

先贴出来CustomToggleButton.java

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomToggleButton extends View {

private Bitmap backgroundBitmap;
private Bitmap slideBitmap;
private Matrix mMatrix;
private Paint mPaint;
private Rect rectOff;
private Rect rectOn;
// 开关状态
private boolean isToggle = false;
// 是否滑动
private boolean isSlide = false;
private float currentX;

// 开关状态改变的接口
public interface OnToggleStateChangedListener {
public void onToggleStateChanged(boolean state);
}

private OnToggleStateChangedListener mListener;

// 供别的类来改变mListener值的方法.
public void setOnToggleStateChangedListener(
OnToggleStateChangedListener listener) {
this.mListener = listener;
}

public CustomToggleButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public CustomToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
// 矩阵
mMatrix = new Matrix();
// 画笔
mPaint = new Paint();
}

public CustomToggleButton(Context context) {
super(context);
}

// 设置要绘制的图片资源
public void setImageBitmap(int backgroundResId, int slideResId) {
// 背景图
backgroundBitmap = BitmapFactory.decodeResource(getResources(),
backgroundResId);
// 小滑块
slideBitmap = BitmapFactory.decodeResource(getResources(), slideResId);

// 关闭状态的矩形
rectOff = new Rect(0, 0, slideBitmap.getWidth(),
backgroundBitmap.getHeight());
// 开启状态的矩形
rectOn = new Rect(backgroundBitmap.getWidth() - slideBitmap.getWidth(),
0, backgroundBitmap.getWidth(), backgroundBitmap.getHeight());
}

// 测量的方法:用来测量我们要绘制的控件的宽度和高度.--->真正进行测量的方法是messure(int,int);
// 只要复写onMeasure这个方法,就必须setMeasuredDimension()方法:是为了存储测量出来的宽和高.
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

setMeasuredDimension(backgroundBitmap.getWidth(),
backgroundBitmap.getHeight());
}

/**
* 重绘的方法
*
* 进行图形绘制的方法.
*
* canvas:画布.
*
* onDraw()方法的执行时机:1.onDraw()方法复写完成后,系统会自动调用;
*
* 2.当我们调用完invalidate()方法后,系统会调用onDraw()
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 先绘制背景图
// 在画布(canvas)上,按照一定的样式(mMatrix),用画笔(mPaint)绘制backgroundBitmap.
canvas.drawBitmap(backgroundBitmap, mMatrix, mPaint);

if (isSlide) {
// backBitmap宽:100;slideBitmap宽:60;
// left范围:(0,40)
// 滑动状态
int left = (int) (currentX - slideBitmap.getWidth() / 2);
// 限定left的范围
if (left < rectOff.left) {
left = rectOff.left;
} else if (left > rectOn.left) {
left = rectOn.left;
}
canvas.drawBitmap(slideBitmap, left, rectOn.top, mPaint);
} else {
if (isToggle) {
// 绘制开启状态的效果
canvas.drawBitmap(slideBitmap, rectOn.left, rectOn.top, mPaint);
} else {
// 绘制关闭状态的效果
canvas.drawBitmap(slideBitmap, rectOff.left, rectOff.top,
mPaint);
}
}

}

// 专门处理屏幕上的触摸事件:DOWN;MOVE;UP;
@Override
public boolean onTouchEvent(MotionEvent event) {

// event.getAction():得到正在执行的事件类型.
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当前点的x的坐标值
currentX = event.getRawX();
isSlide = true;
break;
case MotionEvent.ACTION_MOVE:
currentX = event.getRawX();
break;
case MotionEvent.ACTION_UP:
currentX = event.getRawX();
isSlide = false;
break;
}

boolean state = currentX > backgroundBitmap.getWidth() / 2;

// 只有当当前状态和前一个状态不一致的时候,才有必要回调状态.
if (isToggle != state && mListener != null) {
mListener.onToggleStateChanged(state);
}

isToggle = state;

// 使当前视图失效--->重新调用onDraw()方法.
invalidate();

return true;
}

// 改变开关状态的方法
public void setToggleState(boolean state) {
this.isToggle = state;
}
}

再贴出来测试的MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.qianfeng.day27_togglebutton.CustomToggleButton.OnToggleStateChangedListener;

public class MainActivity extends Activity {

private CustomToggleButton mTb;

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

mTb = (CustomToggleButton) findViewById(R.id.tb);

mTb.setImageBitmap(R.drawable.switch_background,
R.drawable.slide_button_background);

// 接口回调.
mTb.setOnToggleStateChangedListener(new OnToggleStateChangedListener() {

@Override
public void onToggleStateChanged(boolean state) {
if (state) {
Toast.makeText(MainActivity.this, "开", Toast.LENGTH_SHORT)
.show();
} else {
Toast.makeText(MainActivity.this, "关", Toast.LENGTH_SHORT)
.show();
}
}
});
}

}

接下来我把XML文件也贴出来

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.qianfeng.day27_togglebutton.MainActivity" >

<com.lzy.CustomToggleButton
android:id="@+id/tb"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

OK,到此结束.