What UI element in Cocoa Touch is this?

Question

I see this in the mail application on my iPod Touch and I'm wondering if this is a UI element. If not, how can I reproduce it?

Answer 1

On the desktop, that'd be called a "token field." They first appeared in Mail.app, and eventually became part of the AppKit framework. Documentation here.

It should be pretty easy to reproduce that look in Cocoa Touch. In Cocoa Touch, every view is backed by a Core Animation layer, and layers have a cornerRadius attribute. Set that attribute to half the height of the field to create rounded ends. You can set a background color if you're okay with a flat appearance, or you can draw a subtle gradient to give a more convex appearance.

Of course, you only need to do all that if you want a reusable view where you can set the text and so forth. If you only need a few of these for custom buttons or something, it might be easier to just draw them in your favorite drawing program.

Another possibility is to use a third party control, such as any of:

• TITokenField

• JSTokenField

• COTokenField (part of COPeoplePickerViewController)