可以拖动的开关，开关滑块随着手指拖动而变化。
使用 int 值来区分状态，相比使用boolean值区分状态使代码更加容易理解、更容易些代码。有三种状态： 白天、黑夜、滚动状态。
canvas画布在滚动状态时，如何画开、关两种状态。
供用户回调的监听器在哪设置？
点击事件、滑块没有滑满就松手、滑块滑满了。这三个地方添加回调方法。
自定义控件：先看构造方法：
public SlideSwitchButton(Context context) {
this(context, null);
}
public SlideSwitchButton(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public SlideSwitchButton(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
private void init(Context context) {
this.context = context;
Resources resources = getResources();
switch_light = BitmapFactory.decodeResource(resources,
R.drawable.switch_on);
switch_night = BitmapFactory.decodeResource(resources,
R.drawable.switch_off);
switch_thumb = BitmapFactory.decodeResource(resources,
R.drawable.switch_thumb);
// 进行缩放
float sx = MyApplication.myApp.screenWidth / switch_light.getWidth()
- 1;
float sy = 1 + sx / 4;
switch_light = BitmapUtil.toScaleBitmap(switch_light, sx, sy);
switch_night = BitmapUtil.toScaleBitmap(switch_night, sx, sy);
switch_thumb = BitmapUtil.toScaleBitmap(switch_thumb, sy, sy);
switch_width = switch_light.getWidth();
switch_height = switch_light.getHeight();
thumb_width = switch_thumb.getWidth();
paint = new Paint();
paint.setColor(Color.GRAY);
paint.setTextSize(DensityUtil.dip2px(context, 13));
paint.setTypeface(Typeface.DEFAULT_BOLD);
}
该构造方法内初始化了我们需要的图片资源，看一下成员变量：
private Context context;// 上下文
private Bitmap switch_light;// 白天模式的图片
private Bitmap switch_night;// 夜间模式的图片
private String light_text = "白天";
private String night_text = "黑夜";
private static final int SWITCH_LIGHT = 0;// 白天状态
private static final int SWITCH_NIGHT = 1;// 夜间状态
private static final int SWITCH_SCROLL = 2;// 滚动状态
private int status = SWITCH_LIGHT;// 默认处于白天状态
private Paint paint;
private Bitmap switch_thumb;// 按钮
private int thumb_width;// 按钮的宽度
private int switch_width;// 开关的宽度
private int switch_height;// 开关的高度
private int left;// 左边界
private int startX;// 按下起点横坐标
private int endX;// 滑动时、离开时横坐标
private boolean actionUp = false;// 手指离开
private OnSwitchListener listener;// 监听器
接下来就是自定义控件的三大方法，先看onMeasure方法：仅仅就是测量一下，可能不需要这个方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(switch_width, switch_height);
left = switch_width - thumb_width;
}
onDraw方法：是该自定义控件最核心方法
根据状态来绘画开关。白天、黑夜这两种比较好画。
滚动时，根据滑块滑动的位置，滑块左边画白天、右边画黑夜。
滑动距离小于指定值时，当做点击事件，开关切换状态。
滑块滑动时，大于指定值时，根据是否超过中间线而松手，超过了则状态切换，没超过则状态不变。
滑动满时，即从左往右滑，滑动了满格时，即一直滑到底，判断滑块位置是否到边界，到达则切换状态。
难点：
canvas.drawBitmap(bitmap,src,dst,paint)方法，src指要裁剪的区域，dst指要放在哪里。一般两个都一样。
屏幕适配问题。drawText(..)
@Override
protected void onDraw(Canvas canvas) {
if (status == SWITCH_LIGHT) {
// 处于白天状态
canvas.drawBitmap(switch_light, 0, 0, paint);
canvas.drawBitmap(switch_thumb, 0, 0, paint);
canvas.drawText(light_text, thumb_width,
DensityUtil.dip2px(context, 16), paint);
} else if (status == SWITCH_NIGHT) {
// 处于夜间状态
canvas.drawBitmap(switch_night, 0, 0, paint);
canvas.drawBitmap(switch_thumb, left, 0, paint);
canvas.drawText(night_text, DensityUtil.dip2px(context, 5),
DensityUtil.dip2px(context, 16), paint);
} else {
// 滚动状态
if (actionUp) {//滑块在中间位置的哪边？
if (endX < switch_width / 2) {
status = SWITCH_LIGHT;
} else {
status = SWITCH_NIGHT;
}
actionUp = false;
invalidate();
if (listener != null) {
listener.onSwitched(this,status == SWITCH_LIGHT);
}
return;
}
//使滑块滑动时手势居于中间
int start = endX - thumb_width / 2;
if (start <= 0)// 左边界
start = 0;
if (start > left)// 右边界
start = left;
// 向右滑，由白天滑向黑夜
// 画黑夜
drawBitmap(canvas, new Rect(0, 0, endX, switch_height), new Rect(0,
0, endX, switch_height), switch_night);
// 画白天
drawBitmap(canvas, new Rect(endX, 0, switch_width, switch_height),
new Rect(endX, 0, switch_width, switch_height),
switch_light);
// TODO:滚动时画字，跟随着消息、展现
// canvas.drawText(night_text, 5, 16, paint);
// canvas.drawText(light_text, thumb_width, 16, paint);
// 画按钮
canvas.drawBitmap(switch_thumb, start, 0, paint);
if (start == left) {// 已经滑到底
status = SWITCH_NIGHT;
if (listener != null) {
listener.onSwitched(this,false);
}
} else if (start == 0) {
status = SWITCH_LIGHT;
if (listener != null) {
listener.onSwitched(this,true);
}
}
}
}
/**
* 使用canvas画图,dst表示要显示在哪,src表示要切割的区域
*
* @param canvas
* @param src
* @param dst
* @param bitmap
*/
public void drawBitmap(Canvas canvas, Rect src, Rect dst, Bitmap bitmap) {
dst = (dst == null ? new Rect(0, 0, bitmap.getWidth(),
bitmap.getHeight()) : dst);
canvas.drawBitmap(bitmap, src, dst, paint);
}
onTouch方法：判断手指位置，不断重绘
判断点击事件
判断当前状态，是白天就不要再往白天滑，是黑夜就不要再往黑夜滑。
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getX();
break;
case MotionEvent.ACTION_MOVE:
endX = (int) event.getX();
if (Math.abs(startX - endX) < 8) {
return true;
}
if (startX < endX) {
// 向右滑，由白天滑向黑夜
if (startX > switch_night.getWidth() - thumb_width) {// 已经是黑夜
status = SWITCH_NIGHT;
return true;
}
} else {
// 向左滑，由黑夜滑向白天
if (startX < thumb_width) {// 已经是白天
status = SWITCH_LIGHT;
return true;
}
}
status = SWITCH_SCROLL;
break;
case MotionEvent.ACTION_UP:
endX = (int) event.getX();
if (Math.abs(startX - endX) < 8) {
// 作为点击事件，切换状态,
status = Math.abs(status - 1);
if (listener != null) {
listener.onSwitched(this,status == SWITCH_LIGHT);
}
break;
}
actionUp = true;
break;
}
invalidate();
return true;
}
设置监听器，比较简单啦：
/**
* 设置监听器
*
* @param listener
*/
public void setOnSwitchListener(OnSwitchListener listener) {
this.listener = listener;
}
/**
* 自定义接口回调
*
* @author baiiu
*
*/
public interface OnSwitchListener {
/**
*
* @param slideSwitch
* 本开关对象
* @param isLight
* true,表示于白天。 false表示夜晚
*/
public abstract void onSwitched(SlideSwitchButton slideSwitch,
boolean isLight);
}
设置方法，供用户调用：
/**
* 设置开关状态,true表示白天
*/
public void setSwitch(boolean isLight) {
status = isLight ? SWITCH_LIGHT : SWITCH_NIGHT;
}
时间： 2024-07-29 20:39:02