Android自定义锁屏实现----仿正点闹钟滑屏解锁
Android自定义锁屏实现----仿正点闹钟滑屏解锁 楼主 发表于 2012-5-23 15:26:16 | 查看: 653 | 回复: 11 本帖最后由 vivie 于 2012-5-23 16:37 编辑
前几周看了下解锁的框架，基本上算是弄了个脸熟。看着别人花哨的解锁界面，心里也很痒痒的。于是，画了一天时间，捣鼓出了这个成果----仿正点闹钟解锁。基本功能实现了，但程序效率问题以及程序的几处Bug都没有完全解决，留待以后有机会弄吧。
与正点闹钟对比如下：1336741336_3070.jpg 2012-5-23 14:09 上传 下载附件 (23.79 KB) 1336739254_7572.png 2012-5-23 14:09 上传 下载附件 (130.74 KB)
(我们的解锁界面) (正点闹钟的解锁界面)如何知晓正点闹钟的布局构成？ 毫无疑问，当我们想模仿任何一个优秀界面设计时，我们的第一想法肯定是能不能看到该App Apk包对应的资源文件(一般说，编译成Apk时，src目录源文件是看不到的，res目录可以看到)。但是，为了安全性以及技术壁垒，公司都会进行加密处理。于是，我们想通过直接看layout布局文件泡汤了。当然，如果反编译看到那就无敌了。我不懂反编译，我就不多谈了。就我所知Apk下图片资源是不会加密的，于是我们可以查看这些图片以及文件名来猜测界面的可能组成情况，这对我们后面的分析很有用处。
真正我想说的： 一直以来，作为程序员我们一直疏忽了一个利器：--- Hierarchy Viewer工具，可以直接观看布局文件的构成。对于该工具的具体用法请参考该文章：Android 实用工具Hierarchy Viewer实战
PS ： 如果你还羡慕其他人的布局 ， 你就out了。 - -
我们针对正点闹钟的如下界面，利用工具查看，我们重点关注下图蓝色区域，如下：上图中的蓝色区域利用Hierarchy Viewer工具得出如下的布局文件组成： 1336739368_7844.png 2012-5-23 14:09 上传 下载附件 (52.14 KB)
怎么样，是不是很清楚了？大概知道怎么布局了吧。针对上面的布局，再逐一详解下，最后形成一个类似的layout布局文件。 1336739799_3699.png 2012-5-23 14:09 上传 下载附件 (32.74 KB)
首先贴下这几张资源图片吧，大家心里也有个印象。 1336739523_2422.png 2012-5-23 14:09 上传 下载附件 (8.95 KB) 1336739535_8319.png 2012-5-23 14:09 上传 下载附件 (8.88 KB) 未命名.jpg 2012-5-23 16:11 上传 下载附件 (2.43 KB) 1336739594_2423.png 2012-5-23 14:09 上传 下载附件 (1.13 KB) 1336739666_5248.png 2012-5-23 14:09 上传 下载附件 (4.17 KB)
其中最顶层RelativeLayout采用了一个背景图片，即圆弧形的图片。
上图的编号解释如下 ：编号 1 ：TextView控件，显示一个图片资源，可能采用了android:background或者android:drawableLeft类似属性显示图片。 编号 2 ：TextView控件 ---- “向右滑动结束提醒”。so easy 编号 3 ：ImageView控件 --- 为了显示动画效果，采用了一个对应的动画文件，作为该控件的背景图片, 从其图片资源文件看验证了这点，采用了三张不同效果的图片。 so easy 编号 4 ： ImageView控件，显示一张图片。 so easy
呵呵，怎么样是不是看起来比较简单，该layout布局文件如下：
说明： 代码块中 <SliderRelativeLayout>节点实则为<RelativeLayout>节点 ， 大家请注意下。<SliderRelativeLayout android:id="@+id/slider_layout"
android:layout_width="fill_parent"
android:layout_height="63dip"
android:layout_gravity="center"
android:layout_marginTop="200dip"
android:background="@drawable/step2_tip_2"
>
<!-- Lock OK icon -->
<ImageView android:id="@+id/getup_finish_ico"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/slider_ico_alarm">
</ImageView>
<!-- Arrow Animation -->
<ImageView android:id="@+id/getup_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dip"
android:layout_toLeftOf="@id/getup_finish_ico"
android:layout_alignTop="@id/getup_finish_ico"
android:background="@anim/slider_tip_anim">
</ImageView>
<!-- hint_unlock -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/getup_arrow"
android:layout_alignTop="@id/getup_finish_ico"
android:text="@string/hint_unlock">
</TextView>
<!-- slider img -->
<TextView android:id="@+id/slider_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dip"
android:drawableTop="@drawable/getup_slider_ico_normal">
</TextView>
</SliderRelativeLayout>复制代码 棘手问题： 如何实现动态效果，即绘制一个更随手指移动的东东 ？ 先说下我的疑惑：如果参照正点闹钟显示的资源文件，即完全采用系统提供的控件，然后为这些控件提供触摸事件监听去滑动前面所说的编号为1的TextView控件----滑动可以调用scrollTo()或者scrollBy()方法，我试了几次但是都没有效果，原因是scrollTo()和scrollBy()方法并不偏移背景图片，仅仅偏移某个View的内容视图(onDraw()方法里绘制的)，具体答案可以参考：Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解
我的实现方式
我们知道，自定义View/ViewGroup可以唯所欲为。因此，为了实现这种拖拽效果，实现了一个继承于RelativeLayout的自定义ViewGroup控件，并且重写了其中的onTouchEvent()方法去绘制一个跟随手指而动的Bitmap图片资源。当然，这只是第一步，还有很多细节需要处理，主要是一些坐标处理以及图片随着时间返回的问题，但这块内容大家看看代码注释加以理解吧，我是真的不好描述出来。见后文所贴代码。下面的知识主要是如何以一个APK的形式去实现解锁界面。
知识点一 ： 如何以APK形式去达到锁屏的目的以及 屏幕变暗以及屏幕点亮的广播。
android.intent.action.SCREEN_ON --- 屏幕变亮的广播
android.intent.action.SCREEN_OFF ---- 屏幕点暗的广播请参考：android 自定义锁屏
知识点二：Activity里如何屏蔽Home键和Back键？ 请参考： android实现简单锁屏
知识点三：KeyguardManager简介 请参考：KeyguardManager简介 具体原因可以去看看:Android框架浅析之锁屏(Keyguard)机制原理
关于禁止下拉状态栏问题，由于不能在源码下编译，因此无法达到禁止下拉状态栏。但我们的目的主要是学习正点闹钟的布局 以及一种对它的一种可能的实现方式。这就够了。 OK，下面贴出我的自定义RelativeLayout的代码。
为了帮助大家更好的理解代码，最后说明图片是如何回退的？
基本思路：我们根据当前Bitmap拖拽图片的所在位置，每隔几毫秒就让Bitmap拖拽图片回退一定距离，并且请求View会重新绘制，直到该Bitmap拖拽图片返回初始地方，即可显示一个回退动画效果了。代码中是利用Handler来控制的。
自定义RelativeLayout代码： public class SliderRelativeLayout extends RelativeLayout {
private static String TAG = "SliderRelativeLayout";
private TextView tv_slider_icon = null; // 初始控件，用来判断是否为拖动？
private Bitmap dragBitmap = null; //拖拽图片
private Context mContext = null; // 初始化图片拖拽时的Bitmap对象
private Handler mainHandler = null; //与主Activity通信的Handler对象
private int mLastMoveX = 1000; //当前bitmap应该绘制的地方 ， 初始值为足够大，可以认为看不见
public SliderRelativeLayout(Context context) {
super(context);
mContext = context;
initDragBitmap();
}
// 初始化图片拖拽时的Bitmap对象
private void initDragBitmap() {
if (dragBitmap == null)
dragBitmap = BitmapFactory.decodeResource(mContext.getResources(),
R.drawable.getup_slider_ico_pressed);
}
@Override
protected void onFinishInflate() {
// TODO Auto-generated method stub
super.onFinishInflate();
// 该控件主要判断是否处于滑动点击区域。滑动时 处于INVISIBLE状态（消失），正常时处于VISIBLE（可见）状态
tv_slider_icon = (TextView) findViewById(R.id.slider_icon);
}
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();
Log.i(TAG, "onTouchEvent" + " X is " + x + " Y is " + y);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mLastMoveX = (int) event.getX();
//处理Action_Down事件： 判断是否点击了滑动区域
return handleActionDownEvenet(event);
case MotionEvent.ACTION_MOVE:
mLastMoveX = x; //保存了X轴方向
invalidate(); //重新绘制
return true;
case MotionEvent.ACTION_UP:
//处理Action_Up事件： 判断是否解锁成功，成功则结束我们的Activity ；否则 ，缓慢回退该图片。
handleActionUpEvent(event);
return true;
}
return super.onTouchEvent(event);
}
// 绘制拖动时的图片
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
//Log.(TAG, "onDraw ######" );
// 图片更随手势移动
invalidateDragImg(canvas);
}
// 图片更随手势移动
private void invalidateDragImg(Canvas canvas) {
//Log.e(TAG, "handleActionUpEvenet : invalidateDragImg" );
//以合适的坐标值绘制该图片
int drawXCor = mLastMoveX - dragBitmap.getWidth();
int drawYCor = tv_slider_icon.getTop();
Log.i(TAG, "invalidateDragImg" + " drawXCor "+ drawXCor + " and drawYCor" + drawYCor);
canvas.drawBitmap(dragBitmap, drawXCor < 0 ? 5 : drawXCor , drawYCor , null);
}
// 手势落下是，是否点中了图片，即是否需要开始移动
private boolean handleActionDownEvenet(MotionEvent event) {
Rect rect = new Rect();
tv_slider_icon.getHitRect(rect);
boolean isHit = rect.contains((int) event.getX(), (int) event.getY());
if(isHit) //开始拖拽 ，隐藏该图片
tv_slider_icon.setVisibility(View.INVISIBLE);
//Log.e(TAG, "handleActionDownEvenet : isHit" + isHit);
return isHit;
}
//回退动画时间间隔值
private static int BACK_DURATION = 20 ; // 20ms
//水平方向前进速率
private static float VE_HORIZONTAL = 0.7f ; //0.1dip/ms
//判断松开手指时，是否达到末尾即可以开锁了 , 是，则开锁，否则，通过一定的算法使其回退。
private void handleActionUpEvent(MotionEvent event){
int x = (int) event.getX() ;
Log.e(TAG, "handleActionUpEvent : x -->" + x + " getRight() " + getRight() );
//距离在15dip以内代表解锁成功。
boolean isSucess= Math.abs(x - getRight()) <= 15 ;
if(isSucess){
Toast.makeText(mContext, "解锁成功", 1000).show();
resetViewState();
virbate(); //震动一下
//结束我们的主Activity界面
mainHandler.obtainMessage(MainActivity.MSG_LOCK_SUCESS).sendToTarget();
}
else {//没有成功解锁，以一定的算法使其回退
//每隔20ms , 速率为0.6dip/ms , 使当前的图片往后回退一段距离，直到到达最左端
mLastMoveX = x ; //记录手势松开时，当前的坐标位置。
int distance = x - tv_slider_icon.getRight() ;
//只有移动了足够距离才回退
Log.e(TAG, "handleActionUpEvent : mLastMoveX -->" + mLastMoveX + " distance -->" + distance );
if(distance >= 0)
mHandler.postDelayed(BackDragImgTask, BACK_DURATION);
else{ //复原初始场景
resetViewState();
}
}
}
//重置初始的状态，显示tv_slider_icon图像，使bitmap不可见
private void resetViewState(){
mLastMoveX = 1000 ;
tv_slider_icon.setVisibility(View.VISIBLE);
invalidate(); //重绘最后一次
}
//通过延时控制当前绘制bitmap的位置坐标
private Runnable BackDragImgTask = new Runnable(){
public void run(){
//一下次Bitmap应该到达的坐标值
mLastMoveX = mLastMoveX - (int)(BACK_DURATION * VE_HORIZONTAL);
Log.e(TAG, "BackDragImgTask ############# mLastMoveX " + mLastMoveX);
invalidate();//重绘
//是否需要下一次动画 ？ 到达了初始位置，不在需要绘制
boolean shouldEnd = Math.abs(mLastMoveX - tv_slider_icon.getRight()) <= 8 ;
if(!shouldEnd)
mHandler.postDelayed(BackDragImgTask, BACK_DURATION);
else { //复原初始场景
resetViewState();
}
}
};
private Handler mHandler =new Handler (){
public void handleMessage(Message msg){
Log.i(TAG, "handleMessage : #### " );
}
};
//震动一下下咯
private void virbate(){
Vibrator vibrator = (Vibrator) mContext.getSystemService(Context.VIBRATOR_SERVICE);
vibrator.vibrate(200);
}
public void setMainHandler(Handler handler){
mainHandler = handler;//activity所在的Handler对象
}} 复制代码 补充一下，我们的Activity采用了“singleTop”启动模式，防止启动多个Activity实例。
