【android开发】滑动按钮 SlipSwitch开关的实现

项目新加入一个网络模式选择的功能，要求实现一个类似于开关的效果，在网上查了查了一些资料，看到有很多例子，大家完全可以拿来用，当然了，自己掌握了才是自己的东西，现在把我用的分享给大家，希望能帮助一些朋友！下面上图，看一下效果：



其实这个开关实现起来确实很简单，下面把一下代码贴出来：

准备两张图片


    


这两张图，下载可以直接使用。

新建一个MySlipSwitch类：

------------------------------------------------------------------------------------

package com.tp.insurance.util;

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;
import android.view.View.OnTouchListener;
/**
* 类名称：MySlipSwitch
* 类描述：设置中的网络连接功能手动模式自定义开关
* 创建人：LiXinhui
* 创建时间：2013-10-16 上午10:20:00
*/
public class MySlipSwitch extends View implements OnTouchListener{

//开关开启时的背景，关闭时的背景，滑动按钮
private Bitmap switch_on_Bkg, switch_off_Bkg, slip_Btn;
private Rect on_Rect, off_Rect;
//是否正在滑动
private boolean isSlipping = false;
//当前开关状态，true为开启，false为关闭
private boolean isSwitchOn = false;
//手指按下时的水平坐标X，当前的水平坐标X
private float previousX, currentX;
//开关监听器
private OnSwitchListener onSwitchListener;
//是否设置了开关监听器
private boolean isSwitchListenerOn = false;
public MySlipSwitch(Context context) {
super(context);
init();
}
public MySlipSwitch(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
setOnTouchListener(this);
}
public void setImageResource(int switchOnBkg, int switchOffBkg, int slipBtn) {
switch_on_Bkg = BitmapFactory.decodeResource(getResources(), switchOnBkg);
switch_off_Bkg = BitmapFactory.decodeResource(getResources(), switchOffBkg);
slip_Btn = BitmapFactory.decodeResource(getResources(), slipBtn);
//右半边Rect，即滑动按钮在右半边时表示开关开启
on_Rect = new Rect(switch_off_Bkg.getWidth() - slip_Btn.getWidth(), 0, switch_off_Bkg.getWidth(), slip_Btn.getHeight());
//左半边Rect，即滑动按钮在左半边时表示开关关闭
off_Rect = new Rect(0, 0, slip_Btn.getWidth(), slip_Btn.getHeight());
}
public void setSwitchState(boolean switchState) {
isSwitchOn = switchState;
}
protected boolean getSwitchState() {
return isSwitchOn;
}
protected void updateSwitchState(boolean switchState) {
isSwitchOn = switchState;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);

Matrix matrix = new Matrix();
Paint paint = new Paint();
//滑动按钮的左边坐标
float left_SlipBtn;
//手指滑动到左半边的时候表示开关为关闭状态，滑动到右半边的时候表示开关为开启状态
if(currentX < (switch_on_Bkg.getWidth() / 2)) {
canvas.drawBitmap(switch_off_Bkg, matrix, paint);
} else {
canvas.drawBitmap(switch_on_Bkg, matrix, paint);
}

//判断当前是否正在滑动
if(isSlipping) {
if(currentX > switch_on_Bkg.getWidth()) {
left_SlipBtn = switch_on_Bkg.getWidth() - slip_Btn.getWidth();
} else {
left_SlipBtn = currentX - slip_Btn.getWidth() / 2;
}
} else {
//根据当前的开关状态设置滑动按钮的位置
if(isSwitchOn) {
left_SlipBtn = on_Rect.left;
} else {
left_SlipBtn = off_Rect.left;
}
}
//对滑动按钮的位置进行异常判断
if(left_SlipBtn < 0) {
left_SlipBtn = 0;
} else if(left_SlipBtn > switch_on_Bkg.getWidth() - slip_Btn.getWidth()) {
left_SlipBtn = switch_on_Bkg.getWidth() - slip_Btn.getWidth();
}
canvas.drawBitmap(slip_Btn, left_SlipBtn, 0, paint);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
setMeasuredDimension(switch_on_Bkg.getWidth(), switch_on_Bkg.getHeight());
}
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
switch(event.getAction()) {
//滑动
case MotionEvent.ACTION_MOVE:
currentX = event.getX();
break;
//按下
case MotionEvent.ACTION_DOWN:
if(event.getX() > switch_on_Bkg.getWidth() || event.getY() > switch_on_Bkg.getHeight()) {
return false;
}
isSlipping = true;
previousX = event.getX();
currentX = previousX;
break;
//松开
case MotionEvent.ACTION_UP:
isSlipping = false;
//松开前开关的状态
boolean previousSwitchState  = isSwitchOn;
if(event.getX() >= (switch_on_Bkg.getWidth() / 2)) {
isSwitchOn = true;
} else {
isSwitchOn = false;
}
//如果设置了监听器，则调用此方法
if(isSwitchListenerOn && (previousSwitchState != isSwitchOn)) {
onSwitchListener.onSwitched(isSwitchOn);
}
break;
default:
break;
}
//重新绘制控件
invalidate();
return true;
}
public void setOnSwitchListener(OnSwitchListener listener) {
onSwitchListener = listener;
isSwitchListenerOn = true;
}
public interface OnSwitchListener {
abstract void onSwitched(boolean isSwitchOn);
}
}

-------------------------------------------------------------------------------------

然后在一个布局文件中添加一个控件select_network.xml：

-------------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/viewbackground"
android:orientation="vertical" >
<include
android:id="@+id/settings_modify_pwd"
layout="@layout/title_normal1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/username_background"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:background="@drawable/hand_movement" />
<TextView
android:layout_width="0px"
android:layout_weight="4"
android:layout_height="wrap_content"
android:text="手动模式"
android:layout_marginLeft="10dp"
android:textColor="#000000"
android:textSize="21dp" />
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:background="#ff00ff66" />

<com.tp.insurance.util.MySlipSwitch
android:id="@+id/mss_select_network"
android:layout_width="0px"
android:layout_weight="4"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="5dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_apn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@drawable/password_background"
android:gravity="center_vertical"
android:orientation="horizontal" >
<RadioGroup
android:id="@+id/rg_select_network"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="15dp">
<RadioButton
android:id="@+id/rb_outnet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="外网连接"
android:textSize="20dp"
/>
<RadioButton
android:id="@+id/rb_apn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="APN连接"
android:textSize="20dp"
/>
</RadioGroup>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

------------------------------------------------------------------------------------

最后在activity中绑定、监听就行，和使用其他的控件的操作基本就一样了SelectNetworkActivity.java:

注意，我的这个activity是通过其他activity调用的。

--------------------------------------------------------------------------------------

package com.tp.insurance.ui;

import com.tp.insurance.R;
import com.tp.insurance.util.MySlipSwitch;
import com.tp.insurance.util.MySlipSwitch.OnSwitchListener;
import com.tp.insurance.util.Util;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.Toast;
/**
* 类名称：SelectNetworkActivity
* 类描述：设置中的网络连接功能
* 创建人：LiXinhui
* 创建时间：2013-10-16 上午10:30:00
*/
public class SelectNetworkActivity extends Activity implements OnCheckedChangeListener{

private ImageView title_back;//返回上一级
private MySlipSwitch slipswitch_MSL;//自定义开关
private RadioGroup isOpenWLAN;
private RadioButton rbOpenOutNet;
private RadioButton rbOpenAPN;
private SharedPreferences sharedPreferences;
private int isManual;//存放模式，0为自动模式，1为手动模式
private int selectNetWork;//存放网络方式，0为外网连接，1为APN连接
private Editor editor;
@SuppressLint("ShowToast")
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.select_network);
initView();
slipswitch_MSL.setOnSwitchListener(new OnSwitchListener() {
@Override
public void onSwitched(boolean isSwitchOn) {
// TODO Auto-generated method stub
if(isSwitchOn) {
editor.putInt("isManual", 1);
editor.commit(); // 提交数据, 保存到文件
if(selectNetWork == 0){
rbOpenOutNet.setChecked(true);
}else{
rbOpenAPN.setChecked(true);
}
rbOpenOutNet.setEnabled(true);
rbOpenAPN.setEnabled(true);
Toast.makeText(SelectNetworkActivity.this, "手动模式", 300).show();
} else {
editor.putInt("isManual", 0);
editor.commit(); // 提交数据, 保存到文件
rbOpenOutNet.setEnabled(false);
rbOpenAPN.setEnabled(false);
Toast.makeText(SelectNetworkActivity.this, "自动模式", 300).show();
}
}
});
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
int getRadioButtonID = group.getCheckedRadioButtonId();
if(getRadioButtonID == R.id.rb_outnet){
editor.putInt("selectNetWork", 0);//0是OutNet，1是APN
editor.commit();
}else{
editor.putInt("selectNetWork", 1);//0是OutNet，1是APN
editor.commit();
}
}
//初始化UI
private void initView(){
//绑定相关控件的ID
title_back = (ImageView) findViewById(R.id.title_backBtn);
isOpenWLAN = (RadioGroup) findViewById(R.id.rg_select_network);
rbOpenOutNet = (RadioButton) findViewById(R.id.rb_outnet);
rbOpenAPN = (RadioButton) findViewById(R.id.rb_apn);
isOpenWLAN.setOnCheckedChangeListener(this);
slipswitch_MSL = (MySlipSwitch)findViewById(R.id.mss_select_network);
//数据保存到sharedPreferences文件中
sharedPreferences = getSharedPreferences("isManual",MODE_PRIVATE);
editor = sharedPreferences.edit();
isManual = sharedPreferences.getInt("isManual", 0);
selectNetWork = sharedPreferences.getInt("selectNetWork", 0);
slipswitch_MSL.setImageResource(R.drawable.bkg_switch, R.drawable.bkg_switch, R.drawable.btn_slip);
if(isManual == 0){
slipswitch_MSL.setSwitchState(false);//开关为关闭状态
rbOpenOutNet.setEnabled(false);
rbOpenAPN.setEnabled(false);
}else{
slipswitch_MSL.setSwitchState(true);//开关为开启状态
if(selectNetWork == 0){
rbOpenOutNet.setChecked(true);
}else{
rbOpenAPN.setChecked(true);
}
}
title_back.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
}

-------------------------------------------------------------------------------------

主要实现过程就是上面的了，大家可以根据自己的需要，进行修改，已达到符合自己项目的要求呀！