自定义控件的步骤:
测量:onMeasure 设置自己显示在屏幕上的宽高
布局:onLayout 设置自己显示在屏幕上的位置(只有在自定义ViewGroup中才用到)
绘制:onDraw 控制显示在屏幕上的样子(自定义viewgroup时不需要这个)
以下是自定义的滑动开关:
使用时只要设置滑动块的背景图片setSlideBackgroundResource()和滑动开关的背景图片setSwitchBackgroundResource(R.drawable.switch_background)即可。
其中setToggleState()方法是设置滑动开关的状态:ToggleState.Open 开启状态ToggleState.Close关闭状态。
setOnToggleStateChangeListener()可以监听滑动块状态的改变。
代码如下:
MainActivity:
public class MainActivity extends Activity {
private ToggleButton toggleButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toggleButton = (ToggleButton) findViewById(R.id.toggleButton);
toggleButton.setSlideBackgroundResource(R.drawable.slide_button_background);
toggleButton.setSwitchBackgroundResource(R.drawable.switch_background);
toggleButton.setToggleState(ToggleState.Open);
toggleButton.setOnToggleStateChangeListener(new OnToggleStateChangeListener() {
@Override
public void onToggleStateChange(ToggleState state) {
Toast.makeText(MainActivity.this, state == ToggleState.Open ? "开启" : "关闭", 0).show();
}
});
}
}
自定义ToggleButton的代码:
public class ToggleButton extends View {
private ToggleState toggleState = ToggleState.Open;// 开关的状态
private Bitmap slideBg;
private Bitmap switchBg;
private boolean isSliding = false;
private OnToggleStateChangeListener listener;
private int currentX;// 当前触摸点的X坐标
/**
* 如果view只是在布局文件中使用,只需要重写这个构造方法
*
* @param context
* @param attrs
*/
public ToggleButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 如果view需要在java代码中动态new出来,使用的是这个构造方法
*
* @param context
*/
public ToggleButton(Context context) {
super(context);
}
/**
* 设置滑动块的背景图片
*
* @param slideButtonBackground
* 图片的资源id
*/
public void setSlideBackgroundResource(int slideButtonBackground) {
slideBg = BitmapFactory.decodeResource(getResources(), slideButtonBackground);
}
/**
* 设置滑动开关的背景图片
*
* @param switchBackground
* 图片的资源id
*/
public void setSwitchBackgroundResource(int switchBackground) {
switchBg = BitmapFactory.decodeResource(getResources(), switchBackground);
}
/**
* 使用枚举定义两个滑动开关的状态
*
* @author Administrator
*
*/
public enum ToggleState {
Open, Close
}
/**
* 设置开关的状态
*
* @param open
*/
public void setToggleState(ToggleState state) {
toggleState = state;
}
/**
* 设置当前控件显示在屏幕上的宽高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(switchBg.getWidth(), switchBg.getHeight());
}
/**
* 绘制控件显示在屏幕上的样子
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 1.绘制背景图片
// left:图片的左边的X坐标
// top:图片顶部的Y坐标
canvas.drawBitmap(switchBg, 0, 0, null);
// 2.绘制滑动块的图片
if (isSliding) {
int left = currentX - slideBg.getWidth() / 2;
if (left < 0) {
left = 0;
}
if (left > (switchBg.getWidth() - slideBg.getWidth())) {
left = switchBg.getWidth() - slideBg.getWidth();
}
canvas.drawBitmap(slideBg, left, 0, null);
} else {
// 此时抬起,根据state去绘制滑动块的位置
if (toggleState == ToggleState.Open) {
canvas.drawBitmap(slideBg, switchBg.getWidth() - slideBg.getWidth(), 0, null);
} else {
canvas.drawBitmap(slideBg, 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;
int centerX = switchBg.getWidth() / 2;// 开关的中点
if (currentX > centerX) {
// open
if (toggleState != ToggleState.Open) {
toggleState = ToggleState.Open;
if (listener != null) {
listener.onToggleStateChange(toggleState);
}
}
} else {
// close
if (toggleState != ToggleState.Close) {
toggleState = ToggleState.Close;
if (listener != null) {
listener.onToggleStateChange(toggleState);
}
}
}
break;
}
invalidate();// 重绘
return true;
}
public void setOnToggleStateChangeListener(OnToggleStateChangeListener listener) {
this.listener = listener;
}
public interface OnToggleStateChangeListener {
void onToggleStateChange(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" >
<com.example.view.ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
Demo地址: 点击打开链接