手势解锁,就这么简单

2016-08-26 本文已影响1448人朱凯奇

先上个图

手势解锁.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]; //用来存储选中的按扭
    }
    

}

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

//点击时
- (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菜鸟到大神有很多技术贴,欢迎大家投稿

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