iPhone - UITextView should look like a UITextField - iphone

I need a textfield so an user could write several lines. Unfortunately a UITextField does not provide several lines, so I think I have to use an UITextView.
But the design of both are not the same.
Is it possible to design the UITextView like the UITextfield standard with white background and rounded corners?
Thanks a lot in advance & Best Regards.

In my self appointed role as interface-nazi, I feel compelled to point out that UITextField and UITextView have different appearances to communicate to users to expect a slightly different function.
In a textfield, a return ends editing. In a textview, it may only create a new line. In a textfield, links and phone numbers are not recognized. In a textview they are. Textviews can scroll. And so on...
You shouldn't create a non-standard interface element unless you have a strong compelling reason to do so. You should ask yourself how making a textview look like a textfield will help the user understand what actions they need to take to make the app work as they expect and wish it to.
Surprisingly small tweaks can create serious user confusion. A non-standard interface can introduce just slight pause, a half second, every time they use it. That minor confusion can degrade their perception of the utility of the app.

You can put a mask image with rounded borders over your textView. Background of UITextView can be changed by standard setBackgroundColor message.

Thanks to Timur here, you can use this chat input sample to implement a multiple line uitextview like what you see in the iPhone messaging app.
It helped me in my app :)
Here how it looks:

Related

iPhone - Proper UI controls for calculations

I am pretty new to iPhone development and currently working on an application which includes a view that performs a simple numerical calculation. In particular, the user enters 3 or 4 values into text fields and the view displays the result. Something along the lines of http://www.moneychimp.com/calculator/compound_interest_calculator.htm
What is the nicest way to achieve this? I am currently using simple UITextFields and a UILabel for the result but it doesn't look nice or "native-like". What UI object would be best to use?
Thank you!
It's entirely up to you. You're using the right classes for actual input- it comes down to how you choose to style those classes. I'd suggest looking at the documentation for UIView and CALayer (youView.layer, and include QuartzCore framework in your project).
A good start might be to choose a color scheme, a background for your app, and the look and feel you're shooting for- this will inform your styling. Try looking for apps that you think are elegant and attractive, and boil down what they do and what you like about them.
I'd say;
use a grouped table style (with the white tables with round corners on a blueish striped background)
embed settings values directly in the cell (aligned to the right) as much as possible
you can show a relevant keyboard (text, numbers) or picker view to let the user pick values, directly when they tap the cell. Use sliders and switches where relevant.
You may want to take a look at http://www.inappsettingskit.com/, we are currently investigating it for the same purpose and it seems to do the job
You can use either a UISlider or a UIPickerView if some of your values have limits.
You can use UISwitch for toggles.
You can also switch the default keyboard for your textfields to be numeric.
Other than that you seem to be on the right track.
Also, sometimes putting a view inside a scrollview makes things seem cooler even if its only one page. The auto bounce on scrollviews is kind of cool.

Bubble Chat + Emoticon + UITableViewCell

This is a question for iPhone development and I'm hopin someone can point me to the right direction on how i should go about implementing this.
I am trying to write a chat application that supports emoticons/smileys. Where the smiley/emoticon images are stored can be figured out later. I think few iphone applications out there are already doing this (i.e. skype + ebuddy(?)) but not sure what method they went for.
After searching around, there seems to be a few ways of doing this (i think):
bubble chat style which has been discussed before. UITableViewController with custom UITableViewCell. For emoticons, might have to do a whole bunch of calculations to determine where to stick a UIImageView for each emoticon.
Use UIWebView as the whole "window". Style it to look like bubble chat. Takes away any manual calculations on image smiley placements.
I have no idea what the performance is like for each of these two methods, how complex it can get etc, so any comments and guidance will help for sure. Cheers
If you use custom UITableViewCell, then I'd probably implement drawRect: instead of adding labels and images. One will probably take as long to implement as the other, but it will perform much better.
The UIWebView might be worth a short, although you will have to make sure that everything looks right there, too. Instead of using one big web page, I suggest simply throwing in a web view into each table view cell.
Personally I prefer the first approach, measuring and layout of text is not too complicated, but then I've never been the ultimate HTML guru.
I agree with #Eiko on making custom UITableViewCells, especially using drawRect instead of adding labels, images, etc.
If you used a UIWebView how would you handle updating it? A complete reload each time new text is sent? That seems like it will be a cause of issues. Once you get a long conversation reloading the entire UIWebView's contents will cause some flickering which isn't acceptable in my opinion. Also using a UIWebView would require you to have 2 complete copies of each conversation in memory. 1 as your backend data and 1 as the HTML. Where using a UITableView you have your backend data, and only enough of that will be duplicated that can fill 1 screen at a time.

How would you design a question/answer view (iPhone SDK)

I'm new to iPhone development, and I have a question on how to create a view for my application.
The view should display a problem (using formatted/syntax highlighted text), and multiple possible answers. The user should be able to click on an answer to validate it.
Currently, I am trying to use a UITableView embedding UIWebView as contentView. That allows me to display formatted text easily.
The problem is that it is a real pain to compute and adjust the height of the cells. I have to preload the webview, call sizeToFit, get its height, and update the cell accordingly. This process should be done for the problem and the answers (as they are HTML formatted text too).
It's such a pain that I am planning to switch to something else. I thought using only a big UIWebView and design everything in HTML. But I looked at some articles describing how to communicate between the HTML page and the ObjectiveC code. This seems to involve some awful tricks too...
So... that's it, I don't really know what I should do.
I guess some of you dealt with such things before, and would provide some greatly appreciated tips :)
The catch here is that the iPhone API does not yet support NSAttributedString so you can't just set the text to appear as you would like in a textview.
I saw one work around which essentially used individual UILabels to represent each attribute run. (Can't find the link now.) They used NSString UIKit extensions to calculate the position of the strings on the view and then used that to position the labels.
Another work around would be to draw the strings with their attributes to a UIImage and then just display the image. That would be the easiest solution I think.
In either case your going to have to basically recreate the data structure of an attributed string.
NSAttributedString does a lot of work for us. We really miss it when it is gone.

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.
Try Chat Input Sample. It has the similar look and functionality of SMS app.
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.
You get to do this yourself. Luckily, the UITextField can notify you whenever its text changes using UITextFieldTextDidChangeNotification, and luckily NSString has methods (under the UIKit Additions) that let you get the height of the string given a certain width using boundingRectWithSize:options:attributes:context:, and luckily you can resize a UITextField yourself using frame.
I know this is old but for the people that still look at this answer there is now a nice control from Slack that does that called SlackTextViewController.

Implementing Autocompletion in iPhone UITextField for contacts in address book

I would like to have a UITextField or UITextView in where as I do some input, alternatives will appear something similar to when you type an address in Mail Application, alternatives appear down and is possible tap them so get a better input user interface.(since there is no need to type the complete word or address or phone number)
I do know how to fetch data from Address Book framework, also how to input text in UITextField/UITextView and its delegates but I don't know what kind of structure to use for fetching and showing data as the user do his/her input.
I know basic CoreData if this matters,
I hope I can get some help.
UPDATE (2010/3/10):
I don't have problem make a native-like GUI but I am asking about the algorithm, does any body knows what kind algorithm is best for this thing? maybe some binary tree?
Or should I just fetch data from coredata everytime?
Thanks
Ignacio
UPDATE (2010/03/28):
I've been very busy these days, so I have not tried UISearchResults but it seems fine to me. BUT I wonder was there a necessity of deletion of the wining answer? I don't think is fair my reputation went down and couldn't see the winning answer. ;(
You don't need some advanced algorithm to do this kind of thing... if you want to search the address book, then you can do so each time the user types in a character (or however frequent you need to seach). To do this, just take a look at the UISearchDisplayController class. I learned how to do almost the exact thing by looking at Apple's TableSearch sample app.
That app searches a list of objects using different fields (All, Device, Desktop, Portable)... so you could adapt it to Address Book fields (First Name, Last Name, Address...). The only thing you need to change is the search within the Address Book. I don't know exactly what your requirements ask for but this should be what you need to get it done. If you have any trouble with the code let me know... but this example really helped me, so hopefully it works for you.
I was looking for the same thing a while ago. Something that people kept suggesting was the Three20 project (google it).
For my needs this was overkill because it requires the whole project to build and I didn't want the whole project. Plus it's more fun to try it yourself :)
I ended up starting from scratch and making my own:
I started out with a subclass of a UIScrollView to contain the different controls. I subclassed a UITextField and overrided "editingRectForBounds" to support multiple lines. The bit where the contacts are displayed is just a UITableView with a background color of:
[UIColor colorWithRed:0.92 green:0.92 blue:0.92 alpha:1];
And separator color:
[UIColor colorWithWhite:0.85 alpha:1];
This and the use of a shadow makes it looks like it's sunken slightly under the UITextField. I create the shadow with a custom UIView, loading it once and hiding it when required, but it works just as well with an image.
Finally, I made the blue pill shapes with a custom UIView which can intercept "touchesBegan" to know when they should change color.
Adding them is a simple matter of calculating where they need to go and using:
[myTextField addSubview:myBlueView];
Hope that helps!