android如何實(shí)現(xiàn)滑動(dòng)解鎖

本篇內(nèi)容主要講解“android如何實(shí)現(xiàn)滑動(dòng)解鎖”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“android如何實(shí)現(xiàn)滑動(dòng)解鎖”吧!

效果圖

需要用到的畫(huà)筆， 整體灰色的背景，  滑塊， 滑動(dòng)之后綠色背景， 字體 

mSliPaint = new Paint();
mSliPaint.setColor(Color.parseColor("#4a4c5b"));
mSliPaint.setAntiAlias(true);
 
mBgPaint = new Paint();
mBgPaint.setColor(Color.parseColor("#a6a6a6"));
mBgPaint.setAntiAlias(true);
 
mBluePaint = new Paint();
mBluePaint.setColor(Color.parseColor("#009496"));
mBluePaint.setAntiAlias(true);
 
mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setTextSize(mTextSize);
//該方法即為設(shè)置基線(xiàn)上那個(gè)點(diǎn)究竟是left,center,還是right
mPaint.setTextAlign(Paint.Align.LEFT);

在onDraw中繪制  mMovex為手指滑動(dòng)的X坐標(biāo)

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //背景色
  RectF oval = new RectF(margin, margin, width - margin, height - margin);// 設(shè)置個(gè)新的長(zhǎng)方形
  canvas.drawRect(oval,mBgPaint);
 
 
  //劃過(guò)去背景色
  RectF ovalBlue= new RectF(margin,margin,mMoveX+margin,mR*2+margin*3);
  canvas.drawRect(ovalBlue,mBluePaint);
 
  //文字
  Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
  float top = fontMetrics.top;//為基線(xiàn)到字體上邊框的距離
  float bottom = fontMetrics.bottom;//為基線(xiàn)到字體下邊框的距離
  int baseLineY = (int) (height / 2 - top / 2 - bottom / 2);//基線(xiàn)中間點(diǎn)的y軸計(jì)算公式
  canvas.drawText(mText, mTextLeft, baseLineY, mPaint);
 
 
 
  //滑塊
  RectF oval2 = new RectF(mMoveX+margin,margin,mMoveX+mR*3+margin*3,mR*2+margin*3);// 設(shè)置個(gè)新的長(zhǎng)方形
  canvas.drawRect(oval2,mSliPaint);//方形
 
 
  //三個(gè)小箭頭
  Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.mipmap.arrow_right_small);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2-15,mR-margin,mSliPaint);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2,mR-margin,mSliPaint);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2+15,mR-margin,mSliPaint);
 
}

onTouch中進(jìn)行滑動(dòng)監(jiān)聽(tīng) 負(fù)值

@Override
public boolean onTouchEvent(MotionEvent event) {
 
//  Log.e(event.getAction()+"");
  // 點(diǎn)擊是否在滑塊上
  if (event.getAction() != MotionEvent.ACTION_DOWN
    && !mSliderRect.contains((int) mStartX, (int) mStartY)) {
   if (event.getAction() == MotionEvent.ACTION_UP
     || event.getAction() == MotionEvent.ACTION_CANCEL) {
    mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
   }
   return super.onTouchEvent(event);
  }
  acquireVelocityTrackerAndAddMovement(event);
 
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    mStartX = event.getX();
    mStartY = event.getY();
    mLastX = mStartX;
    mHandler.removeMessages(MSG_REDRAW);
//    L.e("按下");
    Log.e("SlideU","按下");
 
    break;
 
   case MotionEvent.ACTION_MOVE:
    Log.e("SlideU","移動(dòng)");
 
    mLastX = event.getX();
    if (mLastX > mStartX) {
     if (mLastX - mStartX > mSlidableLength) {
      mLastX = mStartX + mSlidableLength;
      mMoveX = mSlidableLength;
     } else {
      mMoveX = (int) (mLastX - mStartX);
     }
    } else {
     mLastX = mStartX;
     mMoveX = 0;
    }
    invalidate();
    break;
 
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL:
    Log.e("SlideU","超出或抬起");
    mVelocityTracker.computeCurrentVelocity(1000, mMaxVelocity);
    float velocityX = mVelocityTracker.getXVelocity();
    Log.e("SlideU","速度"+velocityX);
    if (mLastX - mStartX > mEffectiveLength || velocityX/2 > mEffectiveVelocity) {
     startAnimator(mLastX - mStartX, mSlidableLength, velocityX, true);
    } else {
     startAnimator(mLastX - mStartX, 0, velocityX, false);
     mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
    }
    releaseVelocityTracker();
    break;
  }
  return super.onTouchEvent(event);
 }

整體代碼

public class LoadAwaySlideUnlockView extends View {
 public interface UnlockListener {
  void onLoadAwayUnlock();
 }
 
 private UnlockListener mUnlockListener;
 
 
 public void setUnlockListener(UnlockListener unlockListener) {
  mUnlockListener = unlockListener;
 }
 
 private static final int MSG_REDRAW = 1;
 private static final int DRAW_INTERVAL = 50;
 private static final int STEP_LENGTH = 10;//速度
 
 private Paint mPaint;//文字的畫(huà)筆
 private Paint mSliPaint;//滑塊畫(huà)筆
 private Paint mBgPaint;//背景畫(huà)筆
 private Paint mBluePaint;//劃過(guò)去之后藍(lán)色背景的畫(huà)筆
 
 private VelocityTracker mVelocityTracker;//滑動(dòng)速度
 private int mMaxVelocity;
 private LinearGradient mGradient;//漸變色
 private LinearGradient bgGradient;//背景漸變色
// private LinearGradient sliGradient;//滑塊漸變色
// LinearGradient有兩個(gè)構(gòu)造函數(shù);
//
// public LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions,Shader.TileMode tile)
//
// 參數(shù):
//
// float x0: 漸變起始點(diǎn)x坐標(biāo)
//
// float y0:漸變起始點(diǎn)y坐標(biāo)
//
// float x1:漸變結(jié)束點(diǎn)x坐標(biāo)
//
// float y1:漸變結(jié)束點(diǎn)y坐標(biāo)
//
// int[] colors:顏色 的int 數(shù)組
//
// float[] positions: 相對(duì)位置的顏色數(shù)組,可為null, 若為null,可為null,顏色沿漸變線(xiàn)均勻分布
//
// Shader.TileMode tile: 渲染器平鋪模式
//
//
//
// public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,Shader.TileMode tile)
//
// float x0: 漸變起始點(diǎn)x坐標(biāo)
//
// float y0:漸變起始點(diǎn)y坐標(biāo)
//
// float x1:漸變結(jié)束點(diǎn)x坐標(biāo)
//
// float y1:漸變結(jié)束點(diǎn)y坐標(biāo)
//
// int color0: 起始漸變色
// int color1: 結(jié)束漸變色
//
// Shader.TileMode tile: 渲染器平鋪模式
 
 private int[] mGradientColors;
 private int[] bgGradientColors;
 private int mGradientIndex;
 private Interpolator mInterpolator;
 private float mDensity;
 private Matrix mMatrix;
 private ValueAnimator mValueAnimator;
 
 
 private int width;
 private int height;
 
 private String mText;//文字
 private int mTextSize;//文字大小
 private int mTextLeft;//文字距離左邊
 private int mR;//滑塊的半徑
 private float margin;
 
 
 private Rect mSliderRect;
 private int mSlidableLength; // SlidableLength = BackgroundWidth - LeftMagins - RightMagins - SliderWidth
 private int mEffectiveLength; // Suggested length is 20pixels shorter than SlidableLength
 private float mEffectiveVelocity = 1000;//滑塊自動(dòng)回滾的速度
 
 private float mStartX;
 private float mStartY;
 private float mLastX;
 private float mMoveX;
 
 public LoadAwaySlideUnlockView(Context context) {
  this(context, null);
 }
 
 public LoadAwaySlideUnlockView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }
 
 public LoadAwaySlideUnlockView(Context context, AttributeSet attrs, int defStyleAttr) {
  this(context, attrs, defStyleAttr, 0);
 }
 
 public void setText(String text){
  mText = text;
 
 }
 
 public LoadAwaySlideUnlockView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
  super(context, attrs, defStyleAttr, defStyleRes);
  mDensity = getResources().getDisplayMetrics().density;
  ViewConfiguration configuration = ViewConfiguration.get(context);
  mMaxVelocity = configuration.getScaledMaximumFlingVelocity();
  mInterpolator = new AccelerateDecelerateInterpolator();
 
  setClickable(true);
  setFocusable(true);
  setFocusableInTouchMode(true);
 
  mSlidableLength = 200;
  mTextSize = 30;//文字大小
  mTextLeft = 10;//文字距離左邊
  mMoveX = 0;
  mGradientIndex = 0;
 
  mSliPaint = new Paint();
  mSliPaint.setColor(Color.parseColor("#4a4c5b"));
  mSliPaint.setAntiAlias(true);
 
  mBgPaint = new Paint();
  mBgPaint.setColor(Color.parseColor("#a6a6a6"));
  mBgPaint.setAntiAlias(true);
 
 
  mBluePaint = new Paint();
  mBluePaint.setColor(Color.parseColor("#009496"));
  mBluePaint.setAntiAlias(true);
 
 
  mPaint = new Paint();
  mPaint.setColor(Color.WHITE);
  mPaint.setTextSize(mTextSize);
  //該方法即為設(shè)置基線(xiàn)上那個(gè)點(diǎn)究竟是left,center,還是right
  mPaint.setTextAlign(Paint.Align.LEFT);
  // mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
 }
 
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  int specWidthSize = MeasureSpec.getSize(widthMeasureSpec);//寬
  int specHeightSize = MeasureSpec.getSize(heightMeasureSpec);//高
 
  mMatrix = new Matrix();
 
  width = specWidthSize;
  height = specHeightSize;
  mTextLeft = (int) (height * 1.5);
  margin = height / 20;
  mR = (int) (((height-margin*2) / 2)-margin);
 
 
  //最大滑動(dòng)距離
  mSlidableLength = (int) (specWidthSize -(mMoveX+mR*3+margin*3-mMoveX+margin));
  //有效距離
  mEffectiveLength = mSlidableLength-20;
 
 
  mSliderRect=new Rect((int)margin, (int)margin, 300, (int)(height - margin));
 
 
  mGradientColors = new int[]{Color.argb(255, 120, 120, 120),
    Color.argb(255, 120, 120, 120), Color.argb(255, 255, 255, 255)};
 
 
 
  mGradient = new LinearGradient(0, 0, width/2, 0, mGradientColors,
    new float[]{0, 0.7f, 1}, Shader.TileMode.MIRROR);
 
 
 
  bgGradient = new LinearGradient(
    0, 0, 0, (float) ((height)/2.0),
    Color.argb(80, 0X77, 0X77, 0X77), Color.argb(200, 0X11, 0X11, 0X11),
    Shader.TileMode.CLAMP
  );
 
  mHandler.removeMessages(MSG_REDRAW);
  mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
 }
 
 
 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  //背景色
  RectF oval = new RectF(margin, margin, width - margin, height - margin);// 設(shè)置個(gè)新的長(zhǎng)方形
  canvas.drawRect(oval,mBgPaint);
 
 
  //劃過(guò)去背景色
  RectF ovalBlue= new RectF(margin,margin,mMoveX+margin,mR*2+margin*3);
  canvas.drawRect(ovalBlue,mBluePaint);
 
  //文字
  Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
  float top = fontMetrics.top;//為基線(xiàn)到字體上邊框的距離
  float bottom = fontMetrics.bottom;//為基線(xiàn)到字體下邊框的距離
  int baseLineY = (int) (height / 2 - top / 2 - bottom / 2);//基線(xiàn)中間點(diǎn)的y軸計(jì)算公式
  canvas.drawText(mText, mTextLeft, baseLineY, mPaint);
 
 
 
  //滑塊
  RectF oval2 = new RectF(mMoveX+margin,margin,mMoveX+mR*3+margin*3,mR*2+margin*3);// 設(shè)置個(gè)新的長(zhǎng)方形
  canvas.drawRect(oval2,mSliPaint);//方形

 
  //三個(gè)小箭頭
  Bitmap bitmap = BitmapFactory.decodeResource(this.getContext().getResources(), R.mipmap.arrow_right_small);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2-15,mR-margin,mSliPaint);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2,mR-margin,mSliPaint);
  canvas.drawBitmap(bitmap,mMoveX+(mMoveX+mR*3+margin*3-mMoveX)/2+15,mR-margin,mSliPaint);
 
 
 }
 
 public void reset() {
  if (mValueAnimator != null) {
   mValueAnimator.cancel();
  }
  mMoveX = 0;
  mPaint.setAlpha(255);
 
  mHandler.removeMessages(MSG_REDRAW);
  mHandler.sendEmptyMessageDelayed(MSG_REDRAW,200);
 }
 
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 
//  Log.e(event.getAction()+"");
  // 點(diǎn)擊是否在滑塊上
  if (event.getAction() != MotionEvent.ACTION_DOWN
    && !mSliderRect.contains((int) mStartX, (int) mStartY)) {
   if (event.getAction() == MotionEvent.ACTION_UP
     || event.getAction() == MotionEvent.ACTION_CANCEL) {
    mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
   }
   return super.onTouchEvent(event);
  }
  acquireVelocityTrackerAndAddMovement(event);
 
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    mStartX = event.getX();
    mStartY = event.getY();
    mLastX = mStartX;
    mHandler.removeMessages(MSG_REDRAW);
//    L.e("按下");
    Log.e("SlideU","按下");
 
    break;
 
   case MotionEvent.ACTION_MOVE:
    Log.e("SlideU","移動(dòng)");
 
    mLastX = event.getX();
    if (mLastX > mStartX) {
     if (mLastX - mStartX > mSlidableLength) {
      mLastX = mStartX + mSlidableLength;
      mMoveX = mSlidableLength;
     } else {
      mMoveX = (int) (mLastX - mStartX);
     }
    } else {
     mLastX = mStartX;
     mMoveX = 0;
    }
    invalidate();
    break;
 
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL:
    Log.e("SlideU","超出或抬起");
    mVelocityTracker.computeCurrentVelocity(1000, mMaxVelocity);
    float velocityX = mVelocityTracker.getXVelocity();
    Log.e("SlideU","速度"+velocityX);
    if (mLastX - mStartX > mEffectiveLength || velocityX/2 > mEffectiveVelocity) {
     startAnimator(mLastX - mStartX, mSlidableLength, velocityX, true);
    } else {
     startAnimator(mLastX - mStartX, 0, velocityX, false);
     mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
    }
    releaseVelocityTracker();
    break;
  }
  return super.onTouchEvent(event);
 }
 
 private void startAnimator(float start, float end, float velocity, boolean isRightMoving) {
  if (velocity < mEffectiveVelocity) {
   velocity = mEffectiveVelocity;
  }
  int duration = (int) (Math.abs(end - start) * 1000 / velocity);
  mValueAnimator = ValueAnimator.ofFloat(start, end);
  mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
    mMoveX = (Float) animation.getAnimatedValue();
    invalidate();
   }
  });
  mValueAnimator.setDuration(duration);
  mValueAnimator.setInterpolator(mInterpolator);
  if (isRightMoving) {
   mValueAnimator.addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
    }
 
    @Override
    public void onAnimationEnd(Animator animation) {
//     L.e("解鎖");
     Log.e("SlideU","解鎖");
 
     if (mUnlockListener != null) {
      mUnlockListener.onLoadAwayUnlock();
     }
    }
 
    @Override
    public void onAnimationCancel(Animator animation) {
    }
 
    @Override
    public void onAnimationRepeat(Animator animation) {
    }
   });
  }
  mValueAnimator.start();
 }
 
 private void acquireVelocityTrackerAndAddMovement(MotionEvent ev) {
  if (mVelocityTracker == null) {
   mVelocityTracker = VelocityTracker.obtain();
  }
  mVelocityTracker.addMovement(ev);
 }
 
 private void releaseVelocityTracker() {
  if (mVelocityTracker != null) {
   mVelocityTracker.recycle();
   mVelocityTracker = null;
  }
 }
 

 private Handler mHandler = new Handler() {
 
  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   switch (msg.what) {
    case MSG_REDRAW:
     if(mMatrix==null){
      mMatrix = new Matrix();
 
     }
     mMatrix.setTranslate(mGradientIndex, 0);
 
     if(mGradient==null){
//      L.e("mGradient空");
      mGradientColors = new int[]{Color.argb(255, 120, 120, 120),
        Color.argb(255, 120, 120, 120), Color.argb(255, 255, 255, 255)};
 
      mGradient = new LinearGradient(0, 0, width/2, 0, mGradientColors,
        new float[]{0, 0.7f, 1}, Shader.TileMode.MIRROR);
     }
 
     mGradient.setLocalMatrix(mMatrix);
     invalidate();
     mGradientIndex += STEP_LENGTH ;
     if(mGradientIndex>=Integer.MAX_VALUE){
      mGradientIndex = 0;
     }
     mHandler.sendEmptyMessageDelayed(MSG_REDRAW, DRAW_INTERVAL);
     break;
   }
  }
 };
}

xml布局

<xxxx.LoadAwaySlideUnlockView
    android:id="@+id/slideUnlock"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="match_parent"
    android:layout_height="56dp"/>

activity中 添加提示文字和滑動(dòng)監(jiān)聽(tīng)即可

slideUnlock.setText("中間提示文字");
slideUnlock.setSlideListener(this);

到此，相信大家對(duì)“android如何實(shí)現(xiàn)滑動(dòng)解鎖”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！