前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >android自定义View实现手势解锁

android自定义View实现手势解锁

作者头像
砸漏
发布2020-11-05 15:26:20
6260
发布2020-11-05 15:26:20
举报
文章被收录于专栏:恩蓝脚本

有时候为了程序的安全性,我们经常要采取一些安全措施,就像我们常用的支付宝那样,隔一定的时间再回到应用程序时会让用户利用手势去解锁应用程序,最近由于项目需求,也要求做这样一个功能,当用户切出本应用程序15分钟后回来,让用户手势解锁,整个需求的难点就在如何实现这个手势锁,开始一点头绪也没有,没有一点思路去实现这个手势解锁功能,在google了一番后看了一篇非常好的博客后,按照博主的思路的确是可以实现一个十分不错的手势锁View,也参考了下那位大神的代码,下面是我根据他的思路和代码片段实现的一个自定义手势解锁 View,先看效果图.

这是自定义View的初始效果图:

以下是绘制手势时的效果图:

下面是实现的demo代码:

代码语言:javascript
复制
package com.example.gesturelock; 
import java.util.ArrayList; 
import java.util.List; 
import java.util.Timer; 
import java.util.TimerTask; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.Path; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.View; 
import com.example.gesturelock.GestureLockView.OnGestureFinishListener; 
public class MyGestureLockView extends View { 
/** 
* 不同状态的画笔 
*/ 
private Paint paintNormal; 
private Paint paintOnTouch; 
private Paint paintInnerCycle; 
private Paint paintLines; 
private Paint paintKeyError; 
private MyCycle[] cycles; 
private Path linePath = new Path(); 
private List<Integer  linedCycles = new ArrayList<Integer (); 
private OnGestureFinishListener onGestureFinishListener; 
private String key; 
private int eventX, eventY; 
private boolean canContinue = true; 
private boolean result; 
private Timer timer; 
/** 
* 不同状态下的色值 
*/ 
private int OUT_CYCLE_NORMAL = Color.rgb(108, 119, 138); // ������Բ��ɫ 
private int OUT_CYCLE_ONTOUCH = Color.rgb(025, 066, 103); // ѡ����Բ��ɫ 
private int INNER_CYCLE_ONTOUCH = Color.rgb(002, 210, 255); // ѡ����Բ��ɫ 
private int LINE_COLOR = Color.argb(127, 002, 210, 255); // ��������ɫ 
private int ERROR_COLOR = Color.argb(127, 255, 000, 000); 
public void setOnGestureFinishListener( 
OnGestureFinishListener onGestureFinishListener) { 
this.onGestureFinishListener = onGestureFinishListener; 
} 
public void setKey(String key) { 
this.key = key; 
} 
public MyGestureLockView(Context context, AttributeSet attrs, int defStyle) { 
super(context, attrs, defStyle); 
init(); 
} 
public MyGestureLockView(Context context, AttributeSet attrs) { 
super(context, attrs); 
init(); 
} 
public MyGestureLockView(Context context) { 
super(context); 
init(); 
} 
private void init() { 
paintNormal = new Paint(); 
paintNormal.setAntiAlias(true); 
paintNormal.setStrokeWidth(3); 
paintNormal.setStyle(Paint.Style.STROKE); 
paintOnTouch = new Paint(); 
paintOnTouch.setAntiAlias(true); 
paintOnTouch.setStrokeWidth(3); 
paintOnTouch.setStyle(Paint.Style.STROKE); 
paintInnerCycle = new Paint(); 
paintInnerCycle.setAntiAlias(true); 
paintInnerCycle.setStyle(Paint.Style.FILL); 
paintLines = new Paint(); 
paintLines.setAntiAlias(true); 
paintLines.setStyle(Paint.Style.STROKE); 
paintLines.setStrokeWidth(6); 
paintKeyError = new Paint(); 
paintKeyError.setAntiAlias(true); 
paintKeyError.setStyle(Paint.Style.STROKE); 
paintKeyError.setStrokeWidth(3); 
} 
@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
// TODO Auto-generated method stub 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
} 
@Override 
protected void onLayout(boolean changed, int left, int top, int right, 
int bottom) { 
// TODO Auto-generated method stub 
super.onLayout(changed, left, top, right, bottom); 
int perSize = 0; 
if (cycles == null && (perSize = getWidth() / 6)   0) { 
cycles = new MyCycle[9]; 
for (int i = 0; i < 3; i++) { 
for (int j = 0; j < 3; j++) { 
MyCycle cycle = new MyCycle(); 
cycle.setNum(i * 3 + j); 
cycle.setOx(perSize * (j * 2 + 1)); 
cycle.setOy(perSize * (i * 2 + 1)); 
cycle.setR(perSize * 0.5f); 
cycles[i * 3 + j] = cycle; 
} 
} 
} 
} 
/** 
* 绘制所需要绘制的内容 
*/ 
@Override 
protected void onDraw(Canvas canvas) { 
// TODO Auto-generated method stub 
super.onDraw(canvas); 
for (int i = 0; i < cycles.length; i++) { 
if (!canContinue && !result) { 
paintOnTouch.setColor(ERROR_COLOR); 
paintInnerCycle.setColor(ERROR_COLOR); 
paintLines.setColor(ERROR_COLOR); 
} else if (cycles[i].isOnTouch()) { 
paintOnTouch.setColor(OUT_CYCLE_ONTOUCH); 
paintInnerCycle.setColor(INNER_CYCLE_ONTOUCH); 
paintLines.setColor(LINE_COLOR); 
} else { 
paintNormal.setColor(OUT_CYCLE_NORMAL); 
paintInnerCycle.setColor(INNER_CYCLE_ONTOUCH); 
paintLines.setColor(LINE_COLOR); 
} 
if (cycles[i].isOnTouch()) { 
canvas.drawCircle(cycles[i].getOx(), cycles[i].getOy(), 
cycles[i].getR(), paintOnTouch); 
drawInnerBuleCycle(cycles[i], canvas); 
} else { 
canvas.drawCircle(cycles[i].getOx(), cycles[i].getOy(), 
cycles[i].getR(), paintNormal); 
} 
} 
drawLine(canvas); 
} 
/** 
* 绘制大圆里的小圆 
* 
* @param canvas 
*/ 
private void drawInnerBuleCycle(MyCycle cycle, Canvas canvas) { 
canvas.drawCircle(cycle.getOx(), cycle.getOy(), cycle.getR() / 3, 
paintInnerCycle); 
} 
private void drawLine(Canvas canvas) { 
linePath.reset(); 
if (linedCycles.size()   0) { 
for (int i = 0; i < linedCycles.size(); i++) { 
int index = linedCycles.get(i); 
if (i == 0) { 
// 设置为整条路径的起点 
linePath.moveTo(cycles[index].getOx(), cycles[i].getOy()); 
} else { 
linePath.lineTo(cycles[i].getOx(), cycles[i].getOy()); 
} 
} 
linePath.lineTo(eventX, eventY); 
canvas.drawPath(linePath, paintLines); 
} 
} 
/** 
* 根据手择时触摸点的不同,修改对应的状态值 
*/ 
@Override 
public boolean onTouchEvent(MotionEvent event) { 
if (canContinue) { 
switch (event.getAction()) { 
case MotionEvent.ACTION_DOWN: 
case MotionEvent.ACTION_MOVE: 
eventX = (int) event.getX(); 
eventY = (int) event.getY(); 
for (int i = 0; i < cycles.length; i++) { 
if (cycles[i].isPointIn(eventX, eventY)) { 
cycles[i].setOnTouch(true); 
if (!linedCycles.contains(cycles[i].getNum())) { 
linedCycles.add(cycles[i].getNum()); 
} 
} 
} 
break; 
case MotionEvent.ACTION_UP: 
canContinue = false; 
StringBuffer sb = new StringBuffer(); 
for (int i = 0; i < linedCycles.size(); i++) { 
sb.append(linedCycles.get(i)); 
} 
result = key.equals(sb.toString()); 
if (onGestureFinishListener != null) { 
onGestureFinishListener.OnGestureFinish(result); 
} 
timer = new Timer(); 
timer.schedule(new TimerTask() { 
@Override 
public void run() { 
// 回到初始状态 
eventX = eventY = 0; 
for (int i = 0; i < cycles.length; i++) { 
cycles[i].setOnTouch(false); 
} 
linedCycles.clear(); 
linePath.reset(); 
canContinue = true; 
postInvalidate(); 
} 
}, 1000); 
break; 
} 
} 
invalidate(); 
return true; 
} 
} 

自定义圆类:

代码语言:javascript
复制
package com.example.gesturelock; 
public class MyCycle { 
private int ox;     // Բ�ĺ����� 
private int oy;     // Բ�������� 
private float r;     // �뾶���� 
private Integer num;   // ������ֵ 
private boolean onTouch; // false=δѡ�� 
public int getOx() { 
return ox; 
} 
public void setOx(int ox) { 
this.ox = ox; 
} 
public int getOy() { 
return oy; 
} 
public void setOy(int oy) { 
this.oy = oy; 
} 
public float getR() { 
return r; 
} 
public void setR(float r) { 
this.r = r; 
} 
public Integer getNum() { 
return num; 
} 
public void setNum(Integer num) { 
this.num = num; 
} 
public boolean isOnTouch() { 
return onTouch; 
} 
public void setOnTouch(boolean onTouch) { 
this.onTouch = onTouch; 
} 
public boolean isPointIn(int x, int y) { 
double distance = Math.sqrt((x - ox) * (x - ox) + (y - oy) * (y - oy)); 
return distance < r; 
} 
} 

思路:

1.自定义一个 View和MyCircle类,将九个MyCircle类的实例绘制到View中.

2.处理onTouch事件,根据不同的事件修改MyCircle实例的状态,并调用更新invaildate更新View

3.重写onDraw()方法,根据不同的状态去重新绘制整个View

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档