Android 自定义ToggleButton

Android自定义ToggleButton

1.需求

在项目需求中，可能需要自定义开关按钮，于是本人就根据网上的教程写了个符合自己需求的按钮

首先看一下要实现的效果：有4中图片的切换效果，点击切换开关状态，还要求支持滑动切换。

2.解决思路

写个MyToggleButton类，继承自View，重写onDraw，onClick，onMeasure，onTouchEvent等事件，来实现想要的效果。最后图片的添加放到xml中，这需要在attrs中添加自定义属性。

3.代码

MyToggleBtn .java

package com.sanmiao.mytest.myview;

import android.content.Context;
import android.content.res.TypedArray;
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 com.sanmiao.mytest.R;

/**
* @作者 : 丁建强
* @创建时间：2016/8/9 0009 17:36
* @类说明 ：自定义切换按钮
*/

public class MyToggleBtn extends View implements View.OnClickListener {
private Bitmap currBtnBitmap, currBackBitmap;
private Bitmap toggle_bg_on;
private Bitmap toggle_bg_off;
private Bitmap toggle_btn_on;
private Bitmap toggle_btn_off;
private Paint paint;
private float slide_left = 0;
private boolean currState = false;//当前开关状态，true 为开

public MyToggleBtn(Context context) {
this(context, null);
}

public MyToggleBtn(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public MyToggleBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//初始化自定义属性
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MyToggleBtn);
currState = ta.getBoolean(R.styleable.MyToggleBtn_isChecked, false);
int backOnId = ta.getResourceId(R.styleable.MyToggleBtn_backImageOn, 0);
int backOffId = ta.getResourceId(R.styleable.MyToggleBtn_backImageOff, 0);
int slideOnId = ta.getResourceId(R.styleable.MyToggleBtn_slideImageOn, 0);
int slideOffId = ta.getResourceId(R.styleable.MyToggleBtn_slideImageOff, 0);

toggle_bg_on = BitmapFactory.decodeResource(getResources(), backOnId);
toggle_btn_on = BitmapFactory.decodeResource(getResources(), slideOnId);
if (backOffId == 0) {
toggle_bg_off = toggle_bg_on;
} else {
toggle_bg_off = BitmapFactory.decodeResource(getResources(), backOffId);
}
if (slideOffId == 0) {
toggle_btn_off = toggle_btn_on;
} else {
toggle_btn_off = BitmapFactory.decodeResource(getResources(), slideOffId);
}
ta.recycle();
initView();
}

private void initView() {
currBtnBitmap = toggle_btn_off;
currBackBitmap = toggle_btn_off;
paint = new Paint();
paint.setAntiAlias(true);//设置抗锯齿
setOnClickListener(this);
flushState();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//设置当前view 大小
setMeasuredDimension(toggle_bg_on.getWidth(), toggle_btn_on.getHeight());
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//背景图片
canvas.drawBitmap(currBackBitmap, 0, getHeight() / 2 - toggle_bg_on.getHeight() / 2, paint);
//滑动按钮图片
canvas.drawBitmap(currBtnBitmap, slide_left, 0, paint);

}

@Override
public void onClick(View v) {
currState = !currState;
if (!isDrag) {
flushState();
}

}

/**
* 刷新当前状态
*/
private void flushState() {
if (currState) {//开
slide_left = toggle_bg_on.getWidth() - toggle_btn_off.getWidth();
currBackBitmap = toggle_bg_on;
currBtnBitmap = toggle_btn_on;
} else {//关
slide_left = 0;
currBackBitmap = toggle_bg_off;
currBtnBitmap = toggle_btn_off;
}
invalidate();
}

private int firstX, lastX;
boolean isDrag = false;//是否拖动

@Override
public boolean onTouchEvent(MotionEvent event) {
int maxLeft = getWidth() - currBtnBitmap.getWidth();//左边界做大值
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() - firstX);
//将本次的位置设置给 lastX
lastX = (int) event.getX();
//根据手指移动的距离，改变slide_left的值
slide_left = slide_left + dis;
if (slide_left > maxLeft / 2) {
currBackBitmap = toggle_bg_on;
currBtnBitmap = toggle_btn_on;
} else {
currBackBitmap = toggle_bg_off;
currBtnBitmap = toggle_btn_off;
}
break;
case MotionEvent.ACTION_UP:
if (isDrag) {
if (slide_left > maxLeft / 2) {
currState = true;
} else {
currState = false;
}
flushState();
}
break;
}
flushView();
return true;
}

/**
* 刷新视图
*/
private void flushView() {
//对slide_left进行判断 0<= slide_left <= maxLeft
int maxLeft = getWidth() - currBtnBitmap.getWidth();//左边界做大值
slide_left = slide_left > 0 ? slide_left : 0;
slide_left = slide_left < maxLeft ? slide_left : maxLeft;
invalidate();
}

/**
* 是否打开
*
* @return
*/
public boolean isChecked() {
return currState;
}
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyToggleBtn">
<attr name="isChecked" format="boolean" />
<attr name="backImageOff" format="reference" />
<attr name="backImageOn" format="reference" />
<attr name="slideImageOn" format="reference" />
<attr name="slideImageOff" format="reference" />
</declare-styleable>
</resources>

activity_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">

<com.sanmiao.mytest.myview.MyToggleBtn
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:backImageOff="@mipmap/img_toggle_bg_off"
app:slideImageOn="@mipmap/img_toggle_btn_on"
app:slideImageOff="@mipmap/img_toggle_btn_off"
app:backImageOn="@mipmap/img_toggle_bg_on"
app:isChecked="true" />

<com.sanmiao.mytest.myview.MyToggleBtn
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:slideImageOn="@mipmap/slide_button"
app:backImageOn="@mipmap/switch_background"
app:isChecked="true" />

</LinearLayout>

4.运行效果

5.说明

若按钮只有2张图片（背景和滑动图片）只需要在xml中添加 slideImageOn 和backImageOn

这两个属性就可以了；若有4张需要添加backImageOff、slideImageOn、slideImageOff、backImageOn这4个属性