iOS-手势解锁

准备工作

新建一个类，继承于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();
    }

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