iOS-手势解锁

来源:互联网 发布:淘宝网腿祙裤 编辑:程序博客网 时间:2024/06/13 15:05

这里写图片描述

准备工作

新建一个类,继承于UIView。这里起名为GesturesToUnlockView。所有的画图工作将在这个View里完成。
从上面的图我们可以看到,至少需要选中状态和非选中状态两种图片,以及一个好看的背景图。
然后考虑一下按钮的行列数,摆放的位置距离。
如果密码是否是固定的位数,

let s_width = UIScreen.mainScreen().bounds.size.width;let s_height = UIScreen.mainScreen().bounds.size.height;//    未选中的图片名    let normalChoosePicName = "zzf_password_btn_normal";//    选中的图片名    let clickChoosePicName = "zzf_password_btn_click";//  按钮行列数    let btnNum : Int = 3;//    存多少个密码    let secretCodeNum = 4;//    存密码的数组    var secretArray:NSMutableArray!;

那么我们先把那些按钮给放下。找个你喜欢的位置,用两个for循环放几个按钮吧。

//    按钮摆放    func putBtnsOnTheView(){        let btnWidth = CGFloat(70);        let xline : CGFloat = CGFloat((s_width-20)/CGFloat(btnNum*2));        let normalImage = UIImage(named: normalChoosePicName);        let clickImage = UIImage(named: clickChoosePicName);        for(var i = 0; i < btnNum ; i++){            for(var j = 0; j < btnNum;j++){                let pic = UIImageView(image: normalImage, highlightedImage: clickImage);                pic.frame = CGRectMake(0, 0, btnWidth, btnWidth);                pic.center = CGPointMake((10+xline*CGFloat(2*j+1)),s_height/3+10+xline*CGFloat(2*i+1));                pic.userInteractionEnabled = true;                self.addSubview(pic);                pic.tag = 5001+i*btnNum+j;            }        }

我们希望初始化的时候按钮就是摆放好了的,所以重写一下这个View的初始化方法

override init(frame: CGRect) {        super.init(frame: frame);        self.putBtnsOnTheView();        self.backgroundColor = UIColor.clearColor();    }
  • 触碰事件和画图

在开始触碰屏幕的时候,初始化一个数组,用来存储划过的按钮们的tag值。

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {        if(secretArray == nil){            secretArray = NSMutableArray(capacity: secretCodeNum);        }    }

然后是手指移动的时候

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {//        当前手指按到的坐标        let pt = (touches as NSSet).anyObject()?.locationInView(self);//        判断此时手指碰到了那个View        let touchView = self.hitTest(pt!, withEvent: event);        pointValue = NSValue.init(CGPoint: pt!);//        绘图        self.setNeedsDisplay(); //第一种方法//        self.attachment();//第2种方法//      判断是否是9个按钮之一        if(touchView?.tag > 5000 && touchView?.tag <= 5000+(btnNum*btnNum)){            var found = false;              if(secretArray.count > 0){                for temp in secretArray{//                    判断是不是重复点击了已有的View                   found = (temp.integerValue == touchView?.tag)                    if(found){                        break;                    }                }            }//            重复点击就返回            if(found){                return;            }//                        secretArray.addObject(NSNumber(int: Int32((touchView?.tag)!)));            self.addDotView(touchView!);            let tempImageView = touchView as! UIImageView;            tempImageView.highlighted = true;           }        }//    添加按过的点到数组中存起来    func addDotView(dotview:UIView){        if(dotView == nil){            dotView = NSMutableArray(capacity: 0);        }        dotView.addObject(dotview);//        密码判断 do something       }

思路:手指在屏幕上面划过,判断这时候手指的有没有按在设置的9个按钮上。如果碰到了9个按钮中得一个,那么从数组中取出已经点击过的按钮,根据tag值判断是不是重复点击了。如果是重复点击的,那么就返回;如果是没有点击过的按钮,那么就把就把tag值存在数组里,并且高亮按钮。
关于画图这里可以有两种方法,我们只说第一种方法,想了解另外一种方法可以在最后下载代码看看。

    override func drawRect(rect: CGRect) {        if(pointValue == nil){            return;        }        let context = UIGraphicsGetCurrentContext();        CGContextSetStrokeColorWithColor(context, UIColor.yellowColor().CGColor);        CGContextSetLineWidth(context, 4);        var lastDot:UIView!;        var from:CGPoint!;        if (dotView == nil){            return;        }        for temp in dotView        {             from  = (temp as? UIImageView)!.center;            if (lastDot == nil){                CGContextMoveToPoint(context, from.x, from.y)            }else{                CGContextAddLineToPoint(context, from.x, from.y);                 }            lastDot = temp as! UIView;          }        let pt = pointValue.CGPointValue();        CGContextAddLineToPoint(context, pt.x, pt.y);        CGContextStrokePath(context);                pointValue = nil;         }
 选择已经存过的按钮,让它们之间连接起来。最后一个按钮再和现在手指的位置连接起来。   
  • 最后的扫尾工作
    当手提起,不接触屏幕后,就应该把屏幕上所有的按钮都设置成非高亮的状态。
 override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {        self.clearDotViews();        for temp in self.subviews{            if(temp is UIImageView){                let tempImageView = temp as! UIImageView;                tempImageView.highlighted = false;            }        }//        画图        self.setNeedsDisplay();//        self.attachment();    }func clearDotViews(){        if(dotView == nil){            return;        }        dotView.removeAllObjects();        if(secretArray == nil){            return;        }        secretArray.removeAllObjects();    }

有现成的工程可以下载下来看看 代码下载

0 0
原创粉丝点击