Text input box like the SMS app on the iPhone

views:

821

answers:

+4 Q:

Text input box like the SMS app on the iPhone

I am having a terrible time trying to get an input box like the one in the SMS app.

Can anyone offer some guidance on how to build one of these and make it look good? I need an input box that is shaped nicely like the UITextfield but will stretch vertically when typing.

I assume that I need to calculate width of the text and stretch the overlay image frame vertically when the text word wraps. The closest I have come does stretch but the cursor bounces all around when nearing the boundaries.

UPDATE:

I have worked on this everyday for a week and I have about given up on the UITextView. I can get it to stretch properly but when backspacing, the Textview height shrinks too much when going up a line. As I continue backspacing it corrects itself. For example, it displays this behavior when I am on line 4 and backspace up to line 3. Then as I continue backspacing, it corrects until I get to the end of line 2. Then it corrects itself,.... etc.

I decided to try to subclass UITextField but I can't even get it to display in the Frame size that I specify. 150,150,150,150.

+1 A:

You get to do this yourself. Luckily, the UITextField can notify you whenever its text changes, and luckily NSString has methods (under the UIKit Additions) that let you get the height of the string given a certain width, and luckily you can resize a UITextField yourself.

Dave DeLong 2010-03-01 23:01:49

I thought the UITextField didn't support multiple lines. I have been trying to make this work with a UITextView but I don't know how to give it a "framed" (rounded oval) look like the SMS app does.

Bobby 2010-03-01 23:59:14

@Bobby GAH! you're right, I totally forgot that bit; thanks for reminding me. :) In that case, you'll have to draw the border around the `UITextView` yourself.

Dave DeLong 2010-03-02 00:11:34

To give it the rounded oval overlay, add a `UIImageView` on top of it. Then set its image property to a `UIImage` created with the `stretchableImageWithLeftCapWidth:topCapHeight:` method (check the docs for more on that).

Ian Henry 2010-03-02 00:48:00

If you subclass the UITextField, and override editingRectForBounds, you can make it support mulitple lines. You'll just need to calculate where the cursor is and when you should resize and change the rect.

Tom Irving 2010-03-06 10:44:21

I finally got the uitextfield to be taller than standard. But I still haven't been able get the cursor to drop to the next line. Should it does this by expanding the bounds or do I have to move the cursor in code?

Bobby 2010-03-09 23:00:12

That should be "should I do this by"

Bobby 2010-03-10 00:06:58

+1 A:

Three20 project has a control that should do this for you.

From the Three20 README:

TTTextEditor is a UITextView which can grow in height automatically as you type. I use this for entering messages in Facebook Chat, and it behaves similarly to the editor in Apple's SMS app.

Alan Rogers 2010-03-09 03:41:34

I finally decided to go this route.

Bobby 2010-03-11 13:47:35

Great, let us know how it works out!

Alan Rogers 2010-03-11 14:22:51

ansaurus

tags:

views:

answers:

Text input box like the SMS app on the iPhone

related questions