仿qq自定义滑动开关

利用两张图片实现滑动开关

//switchView代码
package com.xiawei.swicthview.view;

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.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import com.xiawei.swicthview.R;

public class SwitchView extends View {

private Bitmap openBitmap;
private Bitmap closeBitmap;
private Paint paint;
private float currentX;
boolean isTouchMode = false;
private Matrix matrix;
private boolean mState = false;
private com.xiawei.mobilesafe.view.SwitchView.OnSwitchStateChangeListener onSwitchStateChangeListener;

public SwitchView(Context context) {
this(context,null);

}

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

}

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(closeBitmap.getWidth(), closeBitmap.getHeight());
}

@Override
protected void onDraw(Canvas canvas) {
// canvas.drawCircle(cx, closeBitmap.getHeight()/2,
// closeBitmap.getHeight()/2, paint);
if (isTouchMode) {
// 限制滑动的范围
if (currentX < 0) {
currentX = 0;
}
if (currentX > closeBitmap.getWidth()) {
currentX = closeBitmap.getWidth();
}
if (currentX < closeBitmap.getWidth() / 2 && currentX >= 0) {
canvas.drawBitmap(closeBitmap, matrix, paint);
} else if (currentX >= closeBitmap.getWidth() / 2
&& currentX <= closeBitmap.getWidth()) {
canvas.drawBitmap(openBitmap, matrix, paint);
}
} else if (mState) {// 开
canvas.drawBitmap(openBitmap, matrix, paint);

} else {
// 关
canvas.drawBitmap(closeBitmap, matrix, paint);
}
}
//初始化两张背景图片
private void inint() {
matrix = new Matrix();
paint = new Paint();

closeBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.close);
openBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.open);

}
//设置触摸事件
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
isTouchMode = true;
currentX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
currentX = event.getX();
break;
case MotionEvent.ACTION_UP:
isTouchMode = false;
currentX = event.getX();
boolean state = currentX > closeBitmap.getWidth() / 2.0f;
if (state != mState && onSwitchStateChangeListener != null) {
onSwitchStateChangeListener.OnSwitchStateChange(state);
}
mState = state;//拿到当前的开关状态
break;
default:
break;
}
invalidate();// 重绘界面
return true;
}
//设置默认显示的背景图，就是开关的状态
public void setState(boolean mState) {
this.mState = mState;

}
// 回调接口
public interface OnSwitchStateChangeListener {
// 把当前的状态传出去
void OnSwitchStateChange(boolean state);

}

// 设置监听
public void setOnSwitchStateChangeListener(
OnSwitchStateChangeListener       OnSwitchStateChangeListener) {
onSwitchStateChangeListener = OnSwitchStateChangeListener;

}
}

}
//这里的难点是，限制用户手指滑动的范围，当用户滑动的时候我们要显示的背景，一开始我把MOVE，中获取坐标的事件给去除了，发现体验不是很好。后来看了下qq发现是相同的样子。最终决定代码就写成这样

//mainactivity
package com.xiawei.swicthview;

import com.xiawei.swicthview.view.SwitchView;

import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.os.Build;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SwitchView switchView = (SwitchView) findViewById(R.id.switchView);
switchView.setState(false);
}

}

```java
//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"
tools:context="com.xiawei.swicthview.MainActivity$PlaceholderFragment" >

<com.xiawei.swicthview.view.SwitchView
android:id="@+id/switchView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>

</RelativeLayout>