Custom UITextField/UIButton

Question

What I'm trying to do is replicate the NSTokenField like UITextField seen in the Mail app and Messages app (type a contact and it comes up with suggestions).

I've got the autocompleting working perfectly, when you type in a UITextField, a UITableView pops up showing any matches that it can find in an array, when you click one it adds it to the UITextField. I'm really happy with this so far.

The problem I've run into now is making the controls look like those in the native apps. Afterall, design is everything!

My first question is how can I add that shadow look to the UITableView? Looks like it's sunk down behind the UITextField.

Secondly, I know I'm going to have to subclass the UITextField to make it look the way I'd like it to, but I've got no idea where to start with that. Some pointers or a sample would be great!

Lastly, I think I need to create a custom UIButton with space for text and the blue gradient then add it to the UITextField. Same problem as with the UITextField, not really sure how to subclass the UIButton (what methods it needs to draw and stuff) or how to add it to the UITextField in such a way that when you click backspace on in the UITextField, the button will be highlighted, then deleted if backspace is clicked again (exactly how the NSTokenField works).

I've included an image just so you can see what I'm talking about: http://www.thermoglobalnuclearwar.com/stuff/mail.jpg

I have taken a look at Joe Hewitts Three20 project but I couldn't make heads or tails of it. I'd like to start very simply and understand everything that's going on rather than just dragging his code into mine and not having any idea what's going on!

Any help is greatly appreciated!

Thanks, Tom.

Answer 1

Okay, I've got the shadow working underneath the UITextField, and I've added the "To:" label to it. It looks great!

So the final thing is the blue NSToken like control. I've started to think the easiest thing is just to subclass a UIView and draw the blue gradient and label inside it. Which brings me to some more questions:

I found this: http://github.com/leonho/iphone-libs/tree/master which draws a nice rounded view and I've adapted it to add some text to it rather than a number, what I don't know how to do is draw a gradient instead of a solid block of colour.

After that there's just the matter of adding the rounded views to the UITextField, moving the cursor and working out how to delete the views when the cursor reaches them, but I'll tackle that when I need to.

Answer 2

Have you considered using the Three20 library? It contains a control which I think does what you want (TTPickerTextView).

As the website description states

TTPickerTextField is a type-ahead UITextField. As you type it searches a data source, and it adds bubbles into the flow of text when you choose a type-ahead option. I use this in TTMessageController for selecting the names of message recipients.

At a minimum the source code might give you some pointers on how to achieve the various visual effects.