先上个图
手势解锁.gif
很久没有写文章了,今天讲下手势解锁,虽然现在用的不是很多,但是有的需求还是需要.手势解锁这样的例子网上很多,也有多种方式可以实现,今天就带大家一步步分析,并且实现下.只是一个引导,具体要做到什么程度还得根据需求而定.
一.分析
1)分析本质
- 手势解锁,其本质就是根据绘制的路径,记录连线的按扭,从而生成手势密码.所以我们要做的手势密码,起始就是给button连线.
2)分析控件
- 每一个圆圈都是个按扭,后面是背景图片,9个按扭添加在一个View上,View是透明的而已
Snip20160826_1.png
3)分析如何实现
- 当手指点击到按钮上时,按扭被选中.当手指移动时,经过的按扭被选中且连线.当手指离开屏幕时,按扭恢复正常状态且连线消失.那么我想到了三个需要实现的方法:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent **)event
实现这三个方法基本就能达到我们的需求了
二.开始做
1)搭建界面
- 搭建界面,这里偷个懒,直接在Storyboard里拖拽的
- 创建一个类,继承UIView,我这里起名叫LockView
Snip20160826_2.png
2)子控件布局
- 首先创建9个按扭
- (void)initButton {
for (int i = 0; i< 9; i++) {
UIButton *bt = [UIButton buttonWithType:UIButtonTypeCustom];
[bt setImage:[UIImage imageNamed:@"normal"] forState:UIControlStateNormal];
[bt setImage:[UIImage imageNamed:@"select"] forState:UIControlStateSelected];
//关闭button的交互,防止移动过程中拦截事件
bt.userInteractionEnabled = NO;
//给个tag值,用于记录密码
bt.tag = i+1000;
[self addSubview:bt];
}
}
- 对子控件进行重新布局
- (void)layoutSubviews {
[super layoutSubviews];
CGFloat btW = 60; //bt宽
CGFloat btH = btW; //等高
CGFloat marginX = (self.frame.size.width - 3*btW)/4; //水平间距
CGFloat marginY = marginX; //垂直间距等于水平间距
//遍历进行布局
for (int i= 0; i<self.subviews.count; i++) {
NSInteger row = i/3;//行数
NSInteger column = i%3;//列数
UIButton *bt = self.subviews[i];
bt.frame = CGRectMake(marginX+column*(marginX+btW), marginY+row*(marginY+btH), btW, btH); //每一个button对应的位置
}
}
- 加载视图上的控件
- (void)awakeFromNib {
[self initButton];
}
运行看下效果,这里把view背景色去掉吧
Snip20160826_3.png
3)业务实现
前面由于关闭的bt的交互,是为了不让它拦截view的事件,那么现在需要判断当前触摸的点是否在bt上,如果是就选中bt. 如何实现? 这里我封装了当前触摸点和返回触摸点在bt上的方法
- CGRectContainsPoint(CGRect rect, CGPoint point) 这个方法用来判断当前的点是否在某个控件的frame上
/**
* 获取当前触摸点
*
* @param touches
*
* @return 当前触摸点
*/
- (CGPoint )fetchCurrentTouchPointWith:(NSSet<UITouch *> *)touches {
UITouch *touch = touches.anyObject;
return [touch locationInView:self];
}
/**
* 获取bt,如果当前触摸点在bt上就返回bt
*
* @param point 当前触摸点
*
* @return bt
*/
- (UIButton *)fetchButtonContainsWith:(CGPoint)point {
for (UIButton *bt in self.subviews) {
//是否包含触摸点 如果包含返回bt
if (CGRectContainsPoint(bt.frame, point)) {
return bt;
}
}
return nil;
}
/**
* 改变bt的选中状态
*
* @param touches 触摸集合
*/
- (void)changeBtSelectedStateWith:(NSSet <UITouch *> *)touches{
CGPoint point = [self fetchCurrentTouchPointWith:touches];
UIButton *bt = [self fetchButtonContainsWith:point];
//bt存在且未被选中时,改变状态,并且加入到数组中
if (bt&&bt.selected==NO) {
bt.selected = YES;
[self.selectedBtArray addObject:bt]; //用来存储选中的按扭
}
}
- 实现点击屏幕时实现的方法
//点击时
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self changeBtSelectedStateWith:touches];
}
运行看效果
点击时.gif
- 2.实现手指移动时实现的方法
- 我们想想,手指移动时,移动到按扭上时,未选中的按扭,要被选中.另外还要绘制一条线连接这些选中的按扭,如何做,我想到了UIBezierPath 然后需要实现这个方法
- -(void)drawRect:(CGRect)rect ;
//移动时
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
[self changeBtSelectedStateWith:touches];
//这个属性用来记录当前手指的位置
self.fingerPoint = [self fetchCurrentTouchPointWith:touches];
//重绘
[self setNeedsDisplay]; //调用这个方法,目的自动调用(void)drawRect:(CGRect)rect
}
//绘制
- (void)drawRect:(CGRect)rect {
//有bt时才绘制
if (self.selectedBtArray.count) {
UIBezierPath *path = [UIBezierPath bezierPath];
for (int i = 0; i<self.selectedBtArray.count; i++) {
UIButton *bt = self.selectedBtArray[i];
//是第一个点
if (i == 0) {
//设置成路径的起点
[path moveToPoint:bt.center];
}
else{
// 不是第一个点画线
[path addLineToPoint:bt.center];
}
}
//给手指添加一条线,目的就是根据手指移动
[path addLineToPoint:self.fingerPoint];
//线宽
path.lineWidth = 6;
//颜色
[[UIColor whiteColor] set];
//终点处理
path.lineJoinStyle = kCGLineJoinRound;
//连线
[path stroke];
}
}
运行看下效果
移动时.gif
- 3.实现手指离开屏幕时时实现的方法
- 手指离开屏幕时需要 需要消除绘制的线,并且按扭要恢复到原有状态,并且把值存起来
我这里存到了本地
//离开时
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
NSString *str = @"";
//1取消按扭的选中状态
for (UIButton *bt in self.selectedBtArray) {
bt.selected = NO;
//2存储选中按扭的值
str = [str stringByAppendingString:[NSString stringWithFormat:@"%ld",bt.tag- 1000]];
}
//从本地读取手势密码
NSString *GPWD = [[NSUserDefaults standardUserDefaults] objectForKey:@"GPWD"];
if (GPWD) { //密码存在就判断正确性
NSString *message = @"";
if ([GPWD isEqualToString:str]) {
message = @"密码正确";
}
else {
message = @"密码错误";
}
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:message delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
[alert show];
}
else { //密码不存在就写入到本地
[[NSUserDefaults standardUserDefaults] setObject:str forKey:@"GPWD"];
}
//3.清除线
[self.selectedBtArray removeAllObjects];
[self setNeedsDisplay];
}
效果如下:
手势解锁.gif
三.总结
以上的实现还有很多缺陷,当然实现的方式也不止这一种.特别是最后的业务判断,大家可以继续完善.如有问题欢迎大家指出,相互交流.
请大家关注专题iOS菜鸟到大神有很多技术贴,欢迎大家投稿
