手势解锁,就这么简单-白红宇

先上个图

很久没有写文章了,今天讲下手势解锁,虽然现在用的不是很多,但是有的需求还是需要.手势解锁这样的例子网上很多,也有多种方式可以实现,今天就带大家一步步分析,并且实现下.只是一个引导,具体要做到什么程度还得根据需求而定.

####一.分析 ######1)分析本质

手势解锁,其本质就是根据绘制的路径,记录连线的按扭,从而生成手势密码.所以我们要做的手势密码,起始就是给button连线.

######2)分析控件

每一个圆圈都是个按扭,后面是背景图片,9个按扭添加在一个View上,View是透明的而已

######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

######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

加载视图上的控件

- (void)awakeFromNib {    [self initButton];}复制代码

运行看下效果,这里把view背景色去掉吧

######3)业务实现前面由于关闭的bt的交互,是为了不让它拦截view的事件,那么现在需要判断当前触摸的点是否在bt上,如果是就选中bt. 如何实现? 这里我封装了当前触摸点和返回触摸点在bt上的方法

CGRectContainsPoint(CGRect rect, CGPoint point) 这个方法用来判断当前的点是否在某个控件的frame上

/** *  获取当前触摸点 * *  @param touches * *  @return 当前触摸点 */- (CGPoint )fetchCurrentTouchPointWith:(NSSet
    
      *)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 
     
       *)touches{    CGPoint point = [self fetchCurrentTouchPointWith:touches];        UIButton *bt = [self fetchButtonContainsWith:point];      //bt存在且未被选中时,改变状态,并且加入到数组中    if (bt&&bt.selected==NO) {                bt.selected = YES;                [self.selectedBtArray addObject:bt]; //用来存储选中的按扭    }    }复制代码

1. 实现点击屏幕时实现的方法

//点击时- (void)touchesBegan:(NSSet
    
      *)touches withEvent:(UIEvent *)event {        [self changeBtSelectedStateWith:touches];        }复制代码

运行看效果

2.实现手指移动时实现的方法

我们想想,手指移动时,移动到按扭上时,未选中的按扭,要被选中.另外还要绘制一条线连接这些选中的按扭,如何做,我想到了UIBezierPath 然后需要实现这个方法

-(void)drawRect:(CGRect)rect ;

//移动时- (void)touchesMoved:(NSSet
    
      *)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

运行看下效果

3.实现手指离开屏幕时时实现的方法

手指离开屏幕时需要需要消除绘制的线,并且按扭要恢复到原有状态,并且把值存起来我这里存到了本地

//离开时- (void)touchesEnded:(NSSet
    
      *)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];}复制代码

效果如下:

####三.总结以上的实现还有很多缺陷,当然实现的方式也不止这一种.特别是最后的业务判断,大家可以继续完善.如有问题欢迎大家指出,相互交流. 请大家关注专题有很多技术贴,欢迎大家投稿

demo地址:https://git.oschina.net/zhukaiqi/GestureDemo.git