Custom UITextField / UIButton
What I am trying to do is replicate an NSTokenField like the UITextField that is displayed in the Mail and Messages app (enter contact and it offers suggestions).
I have autocomplete working fine, when you type UITextField, the UITableView pops up showing any matches it can find in the array, when you click one, it adds it to the UITextField. I am still happy with that.
The problem I am facing is that the controls look like they are in native applications. In the end, design is everything!
My first question is, how do I add a shadow view to the UITableView? It looks like it fell behind the UITextField.
Second, I know that I will have to subclass the UITextField to make it look the way I would like, but I don't know where to start. Some pointers or a pattern would be great!
Finally, I feel like I need to create a custom UIButton with text space and blue gradient and then add it to the UITextField. Same problem as in UITextField, not really sure how to subclass the UIButton (what methods to draw and what to do) 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 and then removed if backspace is clicked again (exactly how NSTokenField works).
I've included an image so you can see what I'm talking about: http://www.thermoglobalnuclearwar.com/stuff/mail.jpg
I took a look at the Joe Hewitts Three20 project, but I couldn't make heads or tails out of it. I would like to start very simple and understand everything that is going on, not just drag and drop his code into mine and have no idea what is going on!
Any help is greatly appreciated!
Thanks, Tom.
source to share
Ok, I have a shadow working under the UITextField and I added the "To:" caption to it. It looks great!
So the last thing is the blue NSToken as a control. I started to think that the easiest way is to subclass the UIView and draw a blue gradient and label inside it. This brings me to a few more questions:
I found this: http://github.com/leonho/iphone-libs/tree/master which draws a nice rounded look and I adapted it to add text to it, not a number, which I don't know how to do This is to draw a gradient instead of a solid block of color.
This raises the question of adding rounded views to the UITextField, moving the cursor, and determining how to remove the views when the cursor reaches them, but I'll decide when I need to.
source to share
Do you consider using the Three20 library ? It contains a control that I think does what you want (TTPickerTextView).
As the website description says
TTPickerTextField is a UITextField. As you type, it looks for a data source and it adds bubbles to the flow of text when you select the forward option. I use this in TTMessageController to select the recipient names of messages.
At a minimum, the source code can give you some pointers on how to achieve different visuals.
source to share