Android Pattern Lock on iPhone

by

I’m a loyal user of iPhone. I’ve been using it since its first version and now I’m on 4S. Though I’m staying in iOS camp and don’t have any intention of moving, I occasionally get the urge to test out and see what’s out there. That’s the reason why I convinced myself to own and play with Dell Streak 5″ phone and Google Nexus S. They are both smart smart-phones. But it’s hard to pick their pros and cons by simply “playing” with it. You’ve got to use it. Daily. For everything including surfing, speed dialing, social-networking and games. Everything. And that’s something that I didn’t get a chance to do until last summer when I was traveling and in need of an unlocked phone. I could make my iPhone work (don’t ask me how) but thought I’d give an Android phone a real kick.

So, I spent 3 weeks using my Dell Streak full-time. I’m not going to tell you about how bad or good Android phone is compared to its counterparts, or discuss my constant efforts to find for an outlet to charge the phone. But I do want to talk about one feature that I used a lot but can’t find on iPhone: It’s the well-known pattern lock feature. If you’ve never seen it, here is a screenshot.

Photo

The idea is simple. Rather than entering 4 digit PIN, you connect the 9-dots (3 by 3) presented on the screen to form a secret pattern. The number of dots connected to form a pattern can be as many as the available dots on screen. In the case of Android lock, the max is 9 dots and the min is 4 dots. In my 3 weeks of usage, I think I can unlock faster using pattern lock versus using PIN lock. And that’s when I started to wonder why in all the apps that I’ve ever used on iPhone, none of them provides this type of lock. Mint is one of my most frequently used apps. I’d love to see it using pattern lock instead of pin lock. It will save me about 0.5 second  every time I use the app. Yeah, that’s a very valuable 0.5 second.

IMG_5405

So, I set aside 2 hours of my time and created a component that provides the pattern lock feature. If you’re an iOS developer, feel free to use it in your app. Mention Grio if you feel indebted to us. Lock your user’s data more securely. If security is less of your concern, do it for the sake of giving users more options.

The code is pretty self-explanatory. The main class is DrawPatternLockViewController. You can set the matrix size by changing the following constant:

 #define MATRIX_SIZE 3 

In the sample app, there’s a Lock button, which will bring up the pattern lock screen.

H1mm98ad35ww  

71wsw9nyuuyk

It’s very easy to use the component. Create an instance, register callback and you’re all set. Here’s the sample code:

DrawPatternLockViewController *lockVC = [[DrawPatternLockViewController alloc] init];
[lockVC setTarget:self withAction:@selector(lockEntered:)];
[self presentModalViewController:lockVC animated:YES]; 

When the user is finished drawing, lockEntered will be called. You can take a look at that function in PatternLockAppViewController. It will compare what user entered with a hardcoded pattern. In this implementation, I store the pattern in an NSString. If you replace the dots with series of numbers (1, 2, 3, …) from top left moving in the right direction downward, you’ll see the dots to be similar to the keypad on a phone. And a pattern string stores those numbers by concatenating them in proper order. So, if you draw a pattern by connecting the dots along the edge clockwise starting from top left toward bottom right corner, you’d end up with an NSString with value @”0102030609″. You can easily change the way you store and interpret a pattern by changing getKey function in DrawPatternLockViewController.

Note: The dot was designed by Grio’s talented designer, #Yui. This project was written using iOS 5 with ARC on. You can download it here.

21 Comments

  1. Veeresh on said:

    This pattern lock appears on a full screen. I want to appear lock screen in some part of the screen because i have some text fields and buttons at top of the screen(visible those textfields and buttons… etc). Advanced Thanks.

  2. ed on said:

    can you guys port this to swift?, thanks

    • David on said:

      Agreed – swift pleaaaase!

  3. John on said:

    What is the license for this code? I’d like to use it in a commercial app.

    • Santo on said:

      You can use it anyway you see fit. If feel indebted, please mention Grio… :>

  4. Pingback: pattern lock in iOS | BlogoSfera

  5. Bhaskar on said:

    This pattern appears on a full screen. What changes shall have to be made here if the pattern has to appear in only a part of the screen? (eg: the screen has Textfields for username and password, the pattern lock and buttons for login and signup.)

    • Santo on said:

      Since the class itself is a UIViewController, you can have it inside any container such as UIPopOverController.

  6. Amit on said:

    its nice one but if we start a draw a pattern then in between any dot can not leave… like if we go to 1 TO 3 then if we draw then we can leave the dot but actually we do not want leave any dot between or middle one .. so how can i do that…

  7. Guigui on said:

    Hello there,

    just a quick note, there’s a nasty bug in DrawPatternLockView.m…

    If you start drawing and leave the screen from the top, then the app will crash…

    To solve it, replace the addDotView method with

    – (void)addDotView:(UIView *)view {
    if (!_dotViews)
    _dotViews = [NSMutableArray array];

    if (view)
    [_dotViews addObject:view];
    }

    Cheers

  8. Guigui on said:

    Really cool piece of code! Looks good guys…

    Just if you’re interested, I’ve modified the rotation behavior. Basically things get all screwed up if the device rotates…

    so I just delete the unlocking view in that case

    – (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
    //Dismiss View
    [self dismissModalViewControllerAnimated:NO];

    // Return YES for supported orientations
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
    } else {
    return YES;
    }
    }

    Cheers

  9. Brittney on said:

    Does this have to be done on a computer? I’m not sure how to get it into my phone. I’ve really been looking to get the dot pattern I stead of the same old 4 digit pattern

  10. Pavankumar on said:

    pls synthesize the property.defenetly it works…

  11. yashmeen on said:

    do u have a code that works on ios 4.0 and above

  12. Thirupathy KS on said:

    Hi Kinjal, If your project uses ARC, the crashes at for (UIView *dotView in _dotViews) in DrawPatternLockView.m does not appear.
    -thiru

  13. Santo on said:

    Kinjal, this app was quickly created for iOS 5 with ARC. It’s a proof of concept and has never been run thru extensive testing. It should be simple enough to make it run on iOS 4.3.

  14. Kinjal on said:

    I just rechecked it…When I run your app with deployment target 4.3, it displays just one dot and not all 9. But when the deployment target is 5.0, it displays all 9 dots and works alright. Since my test phone works with 4.3 target, could u please tell me how can I fix this issue of all dots not being displayed on the screen?
    Also, as I’d written earlier to you, when I use your code in my app, it crashes on for (UIView *dotView in _dotViews) in DrawPatternLockView.m. Using NSZombie, it get the error *** -[__NSArrayM countByEnumeratingWithState:objects:count:]: message sent to deallocated instance 0x6e33a40.
    I will be really grateful to you if could help me out on this.
    Thanks!

  15. Kinjal on said:

    Also I ran your app just now on the iPhone, it shows just one dot and not all 9. :(

  16. Kinjal on said:

    Hi. I am glad to found this very very useful code to implement pattern lock in my app. I downloaded and ran it, works great! However, when I used it in my app. it crashes at for (UIView *dotView in _dotViews) in DrawPatternLockView.m class and says _dotView has been deallocated! I cannot understand why this is happening. Ill be really grateful to you if you could help me out in this. I am running it on iOS 5 version.
    Thanks a ton…
    KD

  17. Tu Pham on said:

    Great work. Thanks so much!

  18. Mr.Kela on said:

    Awesome! I just changed the locking algorithm according to y requirements and it works like a charm. Great work man! Keep it up

Leave a Reply

Your email address will not be published. Required fields are marked