Thursday, May 5, 2011

iPhone On-Screen Keyboard Rundown

As I started building the latest Consumetrics iPhone app over the weekend, I had to choose which keyboard style to use for some input fields like name, email, and so on. These fields live in a “settings table” (really just a grouped table with input fields on it), so picking keyboards in Interface Builder is out of the question, unfortunately, since I require some pretty customized cells. Naturally, I checked the documentation first, where I was confronted by this plethora of options:
typedef enum {
        UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable
    } UIKeyboardType;
Good grief. Seven distinct keyboard types? Bah. (Yes, 9 appear in the list, but UIKeyboardTypeDefault and UIKeyboardTypeAlphabet are just aliases for other types. Quiet you.) Some choices were obvious — my email address field will probably use UIKeyboardTypeEmailAddress, for instance — but some other choices are kind of head-scratchers. One of the fields wants a quantity, for example. Which keyboard should I use for that bad boy? UIKeyboardTypeNumberPad? But what if I need units, like “cups”? Can I get an alphabetic keyboard from UIKeyboardTypeNumberPad? I didn’t know, and tragically neither does Google; there aren’t any good breakdowns of iPhone keyboard types on the first few pages. Hitting up some blogs finally pointed me to some more Apple documentation, but even that still didn’t answer all my questions.
After not finding what I need, I did what any good developer would do: put down what I was supposed to be doing, and pick up something more interesting. I slapped together a quick iPhone app to display each keyboard type through a table view, the source for which is attached, and used it to scribble down a quick reference, which follows forthwith:

This rundown contains images of all keyboard views for all keyboard types. Each keyboard is configured exactly the same with respect to things like which “Return” button they use, so any difference you see is due purely to differences in the keyboards themselves, and not their configuration. Bearing this in mind, it turns out there are only two real keyboard layout types: the “normal” alphabet keyboard layout, and the number pad layout:
normal alphabet keyboard layout number pad keyboard layout
The first thing to realize is that even though it looks like there are seven different keyboards, there really aren’t. There are really just 2 different keyboard layouts with different keys stuck on them, and the layouts are strung together in different ways. (The alphabet keyboard does have a couple varieties with more or fewer keys, but they’re really just variations on a theme.) The particularly observant reader (or maybe just the ones who are breathing, it is blue after all) will notice one particular difference between these keyboard layouts: the “Done” button. We’ll chat more about that in a bit.
UIKeyboardTypeASCIICapable and Friend
This keyboard has three different views: alphabet, punctuation and numbers, and punctuation and symbols.
normal alphabet keyboard layout alphabet keyboard layout with numbers and punctuation alphabet keyboard layout with symbols
You alternate between the three views by pushing the “ABC,” “123,” and “#+=” buttons on each view, which is as intuitive as we’ve come to expect from Apple. This keyboard has a total of 98 characters (26 lowercase + 26 uppercase + 1 spacebar + 10 numbers + 35 punctuation), so “ASCII capable” is a great name for this keyboard, and it should serve almost any enter-text-onto-your-iPhone need that you have. (And between you and me, if you push and hold some characters, you get a list of other characters to enter, so you can actually type a lot more than 98 characters on this keyboard, just less conveniently. I should note that this tap-and-hold input method works on all keyboards, not just UIKeyboardTypeASCIICapable.)
tap-and-hold diacritic example
The next keyboard type in the list, UIKeyboardTypeNumbersAndPunctuation, is exactly the same as this keyboard, it just opens on the second (numbers) view instead of the first (alphabet) view.
As a rule, this keyboard type should be your bread-and-butter keyboard. If you don’t know which keyboard to use, use this guy; he won’t let you down. There’s nothing text-wise you can do with an on-screen iPhone keyboard you can’t do with UIKeyboardTypeASCIICapable. (If your input is number-oriented as opposed to alphabet-oriented, though, you should probably use UIKeyboardTypeNumbersAndPunctuation.)
The only real drawback to this keyboard is that it’s clunky, with three screens to navigate, doesn’t provide any really input sanitization, so your user can enter almost any character he can think of, even if it doesn’t make sense in the context of the input. What keyboard should you use to provide input-level sanitization? Like sanitization for a URL, for example?
I’m glad you asked! UIKeyboardTypeURL is designed specifically for the purpose of inputting the most common URLs quickly and efficiently:
URL alphabet keyboard layout URL number and punctuation keyboard layout URL number and symbol keyboard layout
This keyboard is basically the UIKeyboardTypeASCIICapable keyboard with the non-URL keys removed, and the spacebar replaced with some URL-handy keys. This keyboard is ideal for entering web addresses, like Otherwise, not much else to say here. The take-home message is just that input sanitization is A Good Thing, and you should think about it, and this keyboard offers great sanitization for URLs. (But you probably knew that from the name.)
If an email address and the UIKeyboardTypeURL somehow got together, the UIKeyboardTypeEmailAddress would be the love child from that unholy union:
email alphabet keyboard layout email number and punctuation keyboard layout email number and symbol keyboard layout
This has exactly the same layout as UIKeyboardTypeURL, but has a few keys swapped around to suit email addresses. The only surprise here is the “space” key; evidently spaces are allowed in email addresses, but you have to quote them. Who know? Otherwise, nothing to see here. Move along.
Here’s where things start to shake up a little bit. Behold our first number pad keyboard:
numberpad keyboard
As you can see, this layout is quite different from the others. The most important difference, though, lies in this keyboard’s lack of a Done key. The Done key is the key you use to dismiss the keyboard when you’re done editing, so knowing its location is kind of important. (Without a Done key, there’s no way for the user to dismiss the keyboard, so it just sits there.) This is one of the few places where Apple has violated the “Principle of Least Surprise” by not putting the Done key in the same place it appears on other keyboards. On “doneless” keyboards like these, most developers put a Done key on the navigation bar at the top, as I did:
numberpad done key example
As I’m sure you surmised from the title, this keyboard is specifically for numbers-only input, which is perhaps less useful than you might expect. That’s why UIKeyboardTypeNumberPad brought some friends along.
This keyboard is just an on-screen implementation of a conventional touch-tone phone pad. You’ll have to use the same Done key trick from above.
phone pad number layout phone pad symbol layout
This keyboard brings along the symbol characters you need for some phone numbers, which is important. Unfortunately, however, I’ve now officially run out of witty transitions. So it’s a good thing you won’t remember, because these are not the droids you’re looking for. :: waves hand ::
Ah, UIKeyboardTypeNamePhonePad. Of all the many, many keyboards the iPhone supports, I find this one the most confusing. It supports numbers, letters, and spaces only, with no punctuation or symbols whatsoever. (And lowercase letters only at that because the shift key is disabled!) Very strange:
name phone pad alphabet layout name phone pad numbers layout
But mine is not to question why. Mine is just… no, actually mine is to question why. WTF Apple? Seriously, I can’t even get uppercase letters on this keyboard? Odd. There is one bit of good news about this particular keyboard, though: it has both a number pad and a Done button, so you can have a number pad without having to do a bunch of navigation-bar-done-button gymnastics. At least as long as you don’t mind using a kind of gimpy keyboard, anyway.
Keyboard App Source Code
Attached to this post you’ll find a file called “iPhone Keyboard”. Inside you’ll find all the NIBs, source code, graphic resources, etc. for the iPhone app I used to build this post. I made it pretty quick, but I think it’s pretty clean, so hopefully it’ll be useful to someone somewhere. At the very least it should serve as a good example of how to work with the Done key on the physical keyboard via UITextFieldDelegate and textFieldShouldReturn: versus on the Navigation bar using self.navigationItem.rightBarButtonItem and UIBarButtonItem. If anyone really wants to see it, I’d be happy to write a post about the architecture of the program and how it works at a high level.
And that’s that! You’re now an expert on iPhone keyboards. Or at least what they look like. Hopefully this will help people understand the core iPhone input method better and plan around what keyboard is best to use. Remember, the most restrictive keyboard you can use is the one you should use.

No comments:

Post a Comment