自定义view_开关按钮

注：源自传智播客视频教程

现整理此案例，以供日后自己或大家学习、参考：

android自定义view实现的简单demo

实现效果：





1.点击按钮可以改变开关的状态

2.拖动按钮可以改变开关的状态

此为完整代码下载链接：

http://download.csdn.net/detail/wang725/8734937

1.新建一个实现View的MyToggleButton类

<pre name="code" class="java">package com.example.togglebtn;

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

public class MyToggleButton extends View implements OnClickListener {

/**
* 作为背景的图片
*/
private Bitmap backgroudBitmap;

/**
* 可以滑动的图片
*/
private Bitmap slideBtm;

private Paint paint;

/**
* 滑动按钮的左边值
*/
private float slideBtn_left;

/**
* @param context
* @param attrs
* @param defStyleAttr
*/
public MyToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// TODO Auto-generated constructor stub
}

/**
* 在布局文件中声明的view，创建时系统自动调用
* @param context
* @param attrs
*/
public MyToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}

/**
* 在代码里面创建对象的时候使用此构造方法
* @param context
*/
public MyToggleButton(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

/**
* view对象显示在屏幕上 有几个重要步骤
* 1、构造方法创建对象
* 2、测量view的大小 onMeasure
* 3、确定view的位置，view自身有一些建议权，决定权在父view手中 onLayout();
* 4、绘制view的内容 onDraw(Canvas);
*/

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
initView();
/**
* 设置当前view的大小
* width : 当前view的宽度（单位：像素）
* height : 当前view的高度（单位：像素）
*/
setMeasuredDimension(backgroudBitmap.getWidth(), backgroudBitmap.getHeight());
}

/**
* 自定义view的时候 作用不大
* 确定位置的时候调用此方法
*/
//	@Override
//	protected void onLayout(boolean changed, int left, int top, int right,
//			int bottom) {
//		super.onLayout(changed, left, top, right, bottom);
//	}

/**
* 当前开关状态
*/
private boolean currentState = false;

/**
* 绘制当前view的内容
*/
@Override
protected void onDraw(Canvas canvas) {
//		super.onDraw(canvas);
// 绘制背景
/**
* backgroundBitmap 要绘制的图片
* left 图片的左边界
* top 图片的上边届
* paint 绘制图片使用的画笔
*/
canvas.drawBitmap(backgroudBitmap, 0, 0, paint);
// 绘制可滑动的按钮
canvas.drawBitmap(slideBtm, slideBtn_left, 0, paint);
}

/**
* 初始化
*/
private void initView() {
backgroudBitmap  = BitmapFactory.decodeResource(getResources(), R.drawable.switch_background);
slideBtm = BitmapFactory.decodeResource(getResources(), R.drawable.slide_button);

// 画笔
paint = new Paint();
paint.setAntiAlias(true);// 打开抗锯齿

// 添加点击事件监听
setOnClickListener(this);
}

/**
* 判断是否发生拖动
* 若拖动了，就不再响应onlick事件
*/
private boolean isDrag = false;

/**
* 点击事件
* onclick事件在view.onTouchEvent事件中被解析
* 系统对onclick事件的解析 过于简陋 只要有down时间 和 up事件 系统即认为发生了click事件
*/
@Override
public void onClick(View v) {
// 若果没有拖动才执行改变状态的动作
if(!isDrag) {
currentState = !currentState;
flushState();
}
}

/**
* 刷新当前状态
*/
private void flushState() {
if(currentState) {
slideBtn_left = backgroudBitmap.getWidth() -  slideBtm.getWidth();
} else {
slideBtn_left = 0;
}
/**
* 刷新当前view 会导致onDraw方法的执行
* Invalidate the whole view. If the view is visible,
*	onDraw(android.graphics.Canvas) will be called at some point in the future. This must be called from a UI thread.
*	To call from a non-UI thread, call postInvalidate().
*/
invalidate();
}

/**
* down 事件时的x值
*/
private int firstX;

/**
* touch 事件的上一个x的值
*/
private int lastX;

@Override
public boolean onTouchEvent(MotionEvent event) {
super.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
firstX = lastX = (int) event.getX();
isDrag =false;
break;

case MotionEvent.ACTION_MOVE:
// 判断是否发生拖动
if(Math.abs(event.getX() - firstX) > 5) {
isDrag = true;
}

// 计算手指在屏幕上移动的距离
int dis = (int) (event.getX() - lastX);
// 将本次的位置 设置给lastX
lastX = (int) event.getX();
//			if(lastX >= backgroudBitmap.getWidth() - )

// 根据手指移动的距离，改变图片slideBtn_left的位置
slideBtn_left = slideBtn_left + dis;
break;
case MotionEvent.ACTION_UP:
// 在发生拖动的情况下，根据最后的位置，判断当前开关的状态
if(isDrag) {
if(slideBtn_left > (backgroudBitmap.getWidth() - slideBtm.getWidth())/2) {
slideBtn_left = backgroudBitmap.getWidth() - slideBtm.getWidth();
currentState = true;
} else {
slideBtn_left = 0;
currentState = false;
}
}
break;
default:
break;
}
flushView();
return true;
}

/**
* 刷新当前view
*/
private void flushView() {
/**
* 对slideBtn_left 的值进行判断，确保其在河里的位置  0 <= slideBtn_left <= maxLeft
*/
int maxLeft = backgroudBitmap.getWidth() - slideBtm.getWidth();
// 1 确保slideBtn_left 大于0
slideBtn_left = (slideBtn_left>0)?slideBtn_left:0;
// 2 确保slideBtn_left 小于 maxLeft
slideBtn_left = (slideBtn_left<maxLeft)?slideBtn_left:maxLeft;
// 刷新当前视图 导致 onDraw方法执行
invalidate();
}
}

2.activity_main.xml，在不居中引用自定义的view

<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.example.togglebtn.MainActivity" >

<com.example.togglebtn.MyToggleButton
android:id="@+id/mytogglebtn"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</RelativeLayout>