自定义开关按钮

1.定义一个类ToggleButton，继承View

2.在布局文件中使用该自定义view

3.创建与父类相同的构造器。

4.重写onMesuer和onDraw方法

5.在自定义ToggleButton中定义设置开关按钮图片方法，设置开关按钮背景方法

6.在MainActivity类中使用该view，给该自定义view设置背景图片和按钮图片

具体实现代码如下：

自定义ToggleButton

package cn.ning.test.toggledemo.view;

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

/**
* ==================================================================
* <p/>
* 项  目  名  称：  ToggleDemo
* <p/>
* 包    名：  cn.ning.test.toggledemo.view
* <p/>
* 文   件   名：   ToggleButton
* <p/>
* 版    权：
* <p/>
* 作    者 ：宁显宏
* <p/>
* 版    本 ：1.0
* <p/>
* 创 建 日 期 ： 2015/9/19    14:13.
* <p/>
* 描    述 ：完成一个自定义的开关按钮
* <p/>
* <p/>
* 修 订 历 史：
* <p/>
* ==================================================================
*/
public class ToggleButton extends View {
private Bitmap mSlideBackgroundResource;
private ToggleState toggleState = ToggleState.Open;//开关状态
private Bitmap mSwitchBackground;

private int currentX;//当前触摸点坐标
private boolean isSliding = false;
private int centerx;

/**
* 动态创建view时使用
*
* @param context
*/
public ToggleButton(Context context) {
super(context);
}

/**
* 如果view只是在布局文件中使用，只需要重写该构造方法
*
* @param context
* @param attrs
*/
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
}

public ToggleButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

/**
* 设置滑动块的背景图片
*
* @param slideBackgroundResource
*/
public void setSlideBackgroundResource(int slideBackgroundResource) {
mSlideBackgroundResource = BitmapFactory.decodeResource(getResources(), slideBackgroundResource);
}

/**
* 设置滑动开关的背景图片
*
* @param switch_background
*/
public void setSwitchBackgroundResource(int switch_background) {
mSwitchBackground = BitmapFactory.decodeResource(getResources(), switch_background);
}

public void setToggleState(ToggleState state) {
toggleState = state;
}

/**
* 开关的状态
*/
public enum ToggleState {
Open, Close
}

/**
* 设置控件在屏幕上显示的宽高
*
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mSwitchBackground.getWidth(), mSwitchBackground.getHeight());
}

/**
* 绘制自定义view在屏幕上显示的样子
*
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制背景图片
/**
* @param  mSwitchBackground  绘制的背景图片
* @param  left 图片的左边的x坐标
* @param  top  图顶部的y坐标
* @param paint 画笔  绘制图片不需要画笔
*/
canvas.drawBitmap(mSwitchBackground, 0, 0, null);
//绘制滑动块图片
if (isSliding) {
int left = currentX - mSlideBackgroundResource.getWidth() / 2;    //控制滑动块与滑块重合
if (left < 0) {
left = 0;
}
if (left > mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth()) {
left = mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth();
}
canvas.drawBitmap(mSlideBackgroundResource, currentX, 0, null);
} else {
if (toggleState == ToggleState.Open) {
canvas.drawBitmap(mSlideBackgroundResource,
mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(),
0, null);
} else {
canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null);
}
}
/* if (toggleState == ToggleState.Open) {
canvas.drawBitmap(mSlideBackgroundResource,
mSwitchBackground.getWidth() - mSlideBackgroundResource.getWidth(),
0, null);
} else {
canvas.drawBitmap(mSlideBackgroundResource, 0, 0, null);
}*/

}

@Override
public boolean onTouchEvent(MotionEvent event) {
currentX = (int) event.getX();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isSliding = true;
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
isSliding = false;
centerx = mSwitchBackground.getWidth() / 2;
if (currentX > centerx) {
toggleState = ToggleState.Open;
} else {
toggleState = ToggleState.Close;
}

if (listener != null){
listener.onToggleStateChangeState(toggleState);
}

break;
}
invalidate();//重绘view
return true;
}

private  OnToggleStateChangeListener  listener;
public  void setOnToggleStateChangeListener(OnToggleStateChangeListener  listener){
this.listener = listener;
}
public interface OnToggleStateChangeListener{
void onToggleStateChangeState(ToggleState state);
}
}

布局文件如下

<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"
tools:context=".MainActivity">

<cn.ning.test.toggledemo.view.ToggleButton
android:id="@+id/toggleButton"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</RelativeLayout>

MainActivity代码如下

package cn.ning.test.toggledemo;

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

import cn.ning.test.toggledemo.view.ToggleButton;

public class MainActivity extends Activity {
private ToggleButton toggleButton;

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

private void initView() {
toggleButton = (ToggleButton) this.findViewById(R.id.toggleButton);
toggleButton.setSlideBackgroundResource(R.mipmap.slide_button_background);
toggleButton.setSwitchBackgroundResource(R.mipmap.switch_background);
toggleButton.setToggleState(ToggleButton.ToggleState.Open);
}
}

使用到的图片资源