Android自定义控件之滑动解锁

我的视频系列 http://edu.csdn.net/course/detail/2741，一起来学习Android…

代码参考地址 https://github.com/liuzhiyuan0932/SlideUnLock

代码效果图>

自定义滑动解锁的控件继承自View

public class SlideUnlockView extends View

自定义SlideUnLockView的属性

在values文件夹中定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="SlideUnlockButton">

<!-- 背景图片的属性, 引用的是R.drawable.xx. -->
<attr name="slideUnlockBackgroundResource" format="reference" />

<!-- 滑动块图片的属性, 引用的是R.drawable.xx. -->
<attr name="slideUnlockBlockResource" format="reference" />
</declare-styleable>

</resources>

在xml布局中使用相关的属性

<com.zhiyuan.slideunlockdemo.view.SlideUnlockView
android:id="@+id/slideUnlockView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
test:slideUnlockBackgroundResource="@drawable/jiesuo_bg"
test:slideUnlockBlockResource="@drawable/jiesuo_button" />

定义滑块的几种状态

/**
* 滑块当前的状态
*/
public int currentState;
/**
* 未解锁
*/
public static final int STATE_LOCK = 1;
/**
* 解锁
*/
public static final int STATE_UNLOCK = 2;
/**
* 正在拖拽
*/
public static final int STATE_MOVING = 3;

获取图片资源，并进行初始绘制

在构造方法中获取属性值

public SlideUnlockView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// 默认滑动解锁为未解锁状态
currentState = STATE_LOCK;
// 命名空间
String namespace = "http://schemas.android.com/apk/res/com.zhiyuan.slideunlockdemo";

// 取出自定义属性中背景图片
int slideUnlockBackgroundResource = attrs.getAttributeResourceValue(
namespace, "slideUnlockBackgroundResource", -1);
// 取出自定义属性中滑块图片
int slideUnlockBlockResource = attrs.getAttributeResourceValue(
namespace, "slideUnlockBlockResource", -1);
// 取出自定义属性中当前状态
// 如果解锁状态是true，说明已经解锁
/**
* 当取出自定义属性的背景时，设置背景
*/
setSlideUnlockBackground(slideUnlockBackgroundResource);
/**
* 当取出自定义属性的滑块时，设置滑块的图片
*/
setSlideUnlockBlock(slideUnlockBlockResource);
/**
* 执行onDraw方法，进行界面绘制
*/
postInvalidate();
}

设置图片的方法，设置好图片之后，进行界面的初始 绘制

/**
* 设置背景图
* @param slideUnlockBackgroundResource
*/
public void setSlideUnlockBackground(int slideUnlockBackgroundResource) {
slideUnlockBackground = BitmapFactory.decodeResource(getResources(),
slideUnlockBackgroundResource);
// 获取背景图的宽和高
blockBackgoundWidth = slideUnlockBackground.getWidth();

}
/**
* 设置滑块图
* @param slideUnlockBlockResource
*/
public void setSlideUnlockBlock(int slideUnlockBlockResource) {
slideUnlockBlock = BitmapFactory.decodeResource(getResources(),
slideUnlockBlockResource);
// 获取滑块的宽和高
blockWidth = slideUnlockBlock.getWidth();
blockHeight = slideUnlockBlock.getHeight();
}

通过测量背景图的宽高设置SlideUnLockView的宽高

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//设置控件的宽高为滑块背景图的宽高
setMeasuredDimension(slideUnlockBackground.getWidth(),
slideUnlockBackground.getHeight());
}

处理onTouch事件

判断手指是否按在滑块上

/**
* 计算手指是否是落在了滑块上(默认是按照滑块在未解锁的初始位置来计算的)
*/
public boolean isDownOnBlock(float x1, float x2, float y1, float y2) {
float sqrt = FloatMath.sqrt(Math.abs(x1 - x2) * Math.abs(x1 - x2)
+ Math.abs(y1 - y2) * Math.abs(y1 - y2));
if (sqrt <= blockWidth / 2) {
return true;
}
return false;
}

onTouch事件处理的主要逻辑

@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
// 当手指按下的时候，判断手指按下的位置是否在滑块上边
case MotionEvent.ACTION_DOWN:

if (currentState != STATE_MOVING) {
// 判断一下，如果当前正在移动，则不执行触摸操作
// 获取相对于背景的左上角的x，y值
x = event.getX();
y = event.getY();
// 先计算出滑块的中心点的x，y坐标
float blockCenterX = blockWidth * 1.0f / 2;
float blockCenterY = blockHeight * 1.0f / 2;
downOnBlock = isDownOnBlock(blockCenterX, x, blockCenterY, y);
Log.i(TAG, "down......................");
// 调用onDraw方法
postInvalidate();

}
break;
case MotionEvent.ACTION_MOVE:
// 如果手指确定按在滑块上，就视为开始拖拽滑块
if (downOnBlock) {
// 获取相对于背景的左上角的x，y值
x = event.getX();
y = event.getY();
currentState = STATE_MOVING;
Log.i(TAG, "move......................");
// 调用onDraw方法
postInvalidate();
}
break;
case MotionEvent.ACTION_UP:
if (currentState == STATE_MOVING) {
// 当手指抬起的时候，应该是让滑块归位的
// 说明未解锁
if (x < blockBackgoundWidth - blockWidth) {
handler.sendEmptyMessageDelayed(0, 10);
// 通过回调设置已解锁
onUnLockListener.setUnLocked(false);
} else {
currentState = STATE_UNLOCK;
// 通过回调设置未解锁
onUnLockListener.setUnLocked(true);
}
downOnBlock = false;
// 调用onDraw方法
postInvalidate();

}
break;

default:
break;
}
return true;
}

调用OnDraw方法并根据状态进行绘制

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 在一开始的使用将背景图绘制出来
canvas.drawBitmap(slideUnlockBackground, 0, 0, null);
/**
* 判断当前状态
*/
switch (currentState) {
// 如果是未解锁，就将滑块绘制到最左端
case STATE_LOCK:
canvas.drawBitmap(slideUnlockBlock, 0, 0, null);
break;
// 已解锁，计算出
case STATE_UNLOCK:
int unlockX = blockBackgoundWidth - blockWidth;
canvas.drawBitmap(slideUnlockBlock, unlockX, 0, null);
break;
case STATE_MOVING:
if (x < 0) {
x = 0;
} else if (x > blockBackgoundWidth - blockWidth) {
x = blockBackgoundWidth - blockWidth;
}
canvas.drawBitmap(slideUnlockBlock, x, 0, null);
break;
default:
break;
}
}

设置手指抬起未解锁时滑块缓慢回到初始位置

/**
* 通过handler来控制滑块在未解锁的时候，平缓的滑动到左端
*/
Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
if (msg.what == 0) {
// 如果x还大于0，就人为的设置缓慢移动到最左端，每次移动距离设置为背景宽的/100
if (x > 0) {
x = x - blockBackgoundWidth * 1.0f / 100;
// 刷新界面
postInvalidate();
// 设置继续移动
handler.sendEmptyMessageDelayed(0, 10);
} else {
handler.removeCallbacksAndMessages(null);
currentState = STATE_LOCK;
Log.i(TAG, "state---lock.....");
}
}
};
};

case MotionEvent.ACTION_UP:
if (currentState == STATE_MOVING) {
// 当手指抬起的时候，应该是让滑块归位的
// 说明未解锁
if (x < blockBackgoundWidth - blockWidth) {
handler.sendEmptyMessageDelayed(0, 10);
// 通过回调设置已解锁
onUnLockListener.setUnLocked(false);
} else {
currentState = STATE_UNLOCK;
// 通过回调设置未解锁
onUnLockListener.setUnLocked(true);
}
downOnBlock = false;
// 调用onDraw方法
postInvalidate();

}
break;

设置滑动解锁的监听

定义一个解锁监听的接口

public interface OnUnLockListener {
public void setUnLocked(boolean lock);
}

对外听设置监听的方法

public void setOnUnLockListener(OnUnLockListener onUnLockListener) {
this.onUnLockListener = onUnLockListener;
}

在OnTouch中解锁的时候，进行设置

if (currentState == STATE_MOVING) {
// 当手指抬起的时候，应该是让滑块归位的
// 说明未解锁
if (x < blockBackgoundWidth - blockWidth) {
handler.sendEmptyMessageDelayed(0, 10);
// 通过回调设置已解锁
onUnLockListener.setUnLocked(false);
} else {
currentState = STATE_UNLOCK;
// 通过回调设置未解锁
onUnLockListener.setUnLocked(true);
}
downOnBlock = false;
// 调用onDraw方法
postInvalidate();

}

定义滑动解锁时手机震动的震动器

// 获取系统振动器服务
vibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE);
// 启动震动器 100ms
vibrator.vibrate(100);

在类中使用SlideUnLockView

slideUnlockView = (SlideUnlockView) findViewById(R.id.slideUnlockView);

// 设置滑动解锁-解锁的监听
slideUnlockView.setOnUnLockListener(new OnUnLockListener() {
@Override
public void setUnLocked(boolean unLock) {
// 如果是true，证明解锁
if (unLock) {
// 启动震动器 100ms
vibrator.vibrate(100);
// 当解锁的时候，执行逻辑操作，在这里仅仅是将图片进行展示
imageView.setVisibility(View.VISIBLE);
// 重置一下滑动解锁的控件
slideUnlockView.reset();
// 让滑动解锁控件消失
slideUnlockView.setVisibility(View.GONE);
}
}
});

}

用户屏幕锁屏的监听

注册Android锁屏广播

/**
* 注册一个屏幕锁屏的广播
*/
private void registScreenOffReceiver() {
// TODO Auto-generated method stub
receiver = new ScreenOnOffReceiver();
// 创建一个意图过滤器
IntentFilter filter = new IntentFilter();
// 添加屏幕锁屏的广播
filter.addAction("android.intent.action.SCREEN_OFF");
// 在代码里边来注册广播
this.registerReceiver(receiver, filter);

}

定义广播接收器

class ScreenOnOffReceiver extends BroadcastReceiver {

private static final String TAG = "ScreenOnOffReceiver";

@Override
public void onReceive(Context context, Intent intent) {
String action = intent.getAction();
// 关屏的操作
if ("android.intent.action.SCREEN_OFF".equals(action)) {
// 当手机关屏时，我们同时也锁屏
slideUnlockView.setVisibility(View.VISIBLE);
// 设置图片消失
imageView.setVisibility(View.GONE);
}
}
}

以上是Android自定义控件–滑动解锁的所有代码逻辑