android 滑动解锁

通过android自定义View实现横向的滑动解锁,1、滑动到中间会自动返回到原始的位置,2、滑动到底部会自动解锁,会触发解锁的回调;首先看效果图如下:


实现以上部分一共分为三部分:

  • 其中背景通过shape.xml实现
  • 滑动的锁是一张图片
  • 文字通过Paint绘制在中间,高度可定制

主要介绍一下实现的主要部分:

(1)有自定义的属性如下:
<declare-styleable name="SlideLockView">   
      <attr name="lock_drawable" format="reference"/>    
      <attr name="lock_radius" format="dimension|reference"/>  
      <attr name="lock_tips_tx" format="string|reference"/>  
      <attr name="locl_tips_tx_size" format="dimension|reference"/>
      <attr name="lock_tips_tx_color" format="color|reference"/>
</declare-styleable>
(2)重写ondraw()方法,绘制文字和锁:
@Overrideprotected void onDraw(Canvas canvas) 
{  
      canvas.getClipBounds(mTipsTextRect);   
      int cHeight = mTipsTextRect.height();    
      int cWidth = mTipsTextRect.width();   
      mPaint.setTextAlign(Paint.Align.LEFT);   
      mPaint.getTextBounds(mTipText, 0, mTipText.length(), mTipsTextRect);   
      float x = cWidth / 2f - mTipsTextRect.width() / 2f - mTipsTextRect.left;   
      float y = cHeight / 2f + mTipsTextRect.height() / 2f - mTipsTextRect.bottom;   
      canvas.drawText(mTipText, x, y, mPaint);   
      int rightMax = getWidth() - mLockRadius * 2;    
       if (mLocationX < 0) {      
             canvas.drawBitmap(mLockBitmap, 0, 0, mPaint);   
       } else if (mLocationX > rightMax) {    
             canvas.drawBitmap(mLockBitmap, rightMax, 0, mPaint);  
       } else {      
          canvas.drawBitmap(mLockBitmap, mLocationX, 0, mPaint); 
   }
}
(3)最重要的一步是触摸事件的处理,1、当触摸屏幕是触发ACTION_DOWN事件,计算时候触摸到锁,只有当触到锁的时候才能滑动;2、手指移动时,获得新的位置后计算新的位置,然后重新绘制,若移动到另一端表示解锁成功,执行回调方法解锁成功;3、手指离开屏幕后重新reset View,动画回到初始位置:
 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                float xPos = event.getX();
                float yPos = event.getY();
                if (isTouchLock(xPos, yPos)) {
                    mLocationX = xPos - mLockRadius;
                    mIsDragable = true;
                    invalidate();
                } else {
                    mIsDragable = false;
                }
                return true;
            }
            case MotionEvent.ACTION_MOVE: {

                if (!mIsDragable) return true;

                int rightMax = getWidth() - mLockRadius * 2;
                resetLocationX(event.getX(),rightMax);
                invalidate();

                if (mLocationX >= rightMax){
                    mIsDragable = false;
                    mLocationX = 0;
                    invalidate();
                    if (mLockListener != null){
                        mLockListener.onOpenLockSuccess();
                    }
                    Log.e("AnimaterListener","解锁成功");
                }

                return true;
            }
            case MotionEvent.ACTION_UP: {
                if (!mIsDragable) return true;
                resetLock();
                break;
            }
        }
        return super.onTouchEvent(event);
    }

(4)重新回到初始位置resetLock代码如下:

    private void resetLock(){
        ValueAnimator anim = ValueAnimator.ofFloat(mLocationX,0);
        anim.setDuration(300);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mLocationX = (Float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });
        anim.start();
    }

这就是完成滑动解锁的主要步骤,最后github地址在SlideView

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,455评论 25 708
  • 实现的效果,先上图: 调用启用锁屏,关闭屏幕,再打开会进入自定义的锁屏页面。 最底部的 unlock文字是左到右高...
    咪神阅读 4,841评论 3 8
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,250评论 4 61
  • 上午在医院检查,老公时不时的打来电话,问我检查结果如何,终于检查完毕,拿着报告单找到医生,医生说先吃药观察,我拿着...
    找回失去的你阅读 183评论 0 0
  • 今天我写的诗100篇书评里的第8篇。加油。 因为最近在进行关于读书方法的主题阅读,这是其中的第6本。 作者桦泽紫苑...
    橘子书评阅读 1,049评论 0 3