Custom UITextField/UIButton

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.

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.

I have tried it on a few different occasions, but like I said above, I couldn't make any use of it. Everything is a subclass of a subclass and draws with a subclass of a subclass.All I really need to know is how to very simply subclass a UIButton and UITextField, and how to override the drawing method for each so I can do it myself.I can get to the harder stuff later.

Tom Irving 2009-10-23 12:42:27

You can add your custom view as a child of the UITextField by using the following message [textField addSubview:customView];The TTPickerTextField class mentioned elsewhere demonstartes one way to achieve the rest of the tasks required (such as handling keyboard input and selections etc).To create your custom UITextField class, use XCode's new file dialog to add a new class that derives from NSObject, then replace NSObject with UITextField within the header file. Within Interface Builder you can change the identity of your UITextField to "MyCustomTextField" using the inspector window.

Christopher Fairbairn 2009-10-26 23:28:15

Thanks.Would I then have to add all the UITextField methods to the custom class, or are they automatically called because it is just a subclass?

Tom Irving 2009-10-27 14:45:51

Hi, Did you complete the project? I am working to achieve the same effect.

Chintan Patel 2010-04-30 15:24:04

Kinda, I ended up creating a version designed for an app of mine rather than something that could be added to any project, is there something specific you need help with?

Tom Irving 2010-04-30 16:09:11

I want to have the same effect of displaying the contact name in the textfield and the entire name getting deleted if the user presses the back button. I will try to do that with the above mentioned library and will get back to you if i cant do it. :)

Chintan Patel 2010-05-03 07:04:09

Looking at the code of iphone-libs, i dont think i will be able to achieve what you point out as UIButton in your screenshot. Three20 has the same exact effect i want in the form of TTPickerTextField but as you said, its "subclass of a subclass" structure puzzles me and i think i will have to import the entire framework to just have TTPickerTextField. Will keep you updated. :)

Chintan Patel 2010-05-03 09:54:34

In the end I used a subclassed UIScrollView to contain the controls, a subclassed UITextField to override editingRectForBounds and a subclassed UIView to draw the blue button-like control. I made it respond to touch events so that it behaves like a button.

Tom Irving 2010-05-03 10:26:59

Ok, so after 2 days of trying on my own, i am giving up. I will like it very much if you share your code to do this because otherwise i have no option but to import entire Three20 framework for just that functionality. Thanks. :)

Chintan Patel 2010-05-05 15:04:57

It might help to post the particular things you're having a problem with. My code is part of a full thing and not just a control on its lonesome and I'm not wanting to share the whole project.

Tom Irving 2010-05-05 17:17:14

I am not able to add UIButtons with the text of the user's name to UITextField. If i add the buttons as subviews to the textfield, the buttons dont respond to cursor. Asked for the project because you have mentioned in your answer that you will share the project when you are done. Anyways, thank you for your time. :)

Chintan Patel 2010-05-06 10:16:06

Contact me using my website's contact form and I'll explain better what you need to do to get everything working. The comment formatting on here is less than helpful.

Tom Irving 2010-05-06 11:58:43

ansaurus

tags:

views:

answers:

Custom UITextField/UIButton

related questions