Question

I have an app where users have to enter tags to search bars / events.
They can do this by either typing or by selecting “category – subcategory – tag” fom a table.

Suppose the second option.
What I would like to do is get the same effect in my app as Stack Overflow does when tags are recognized (Facebook too btw) and draw a rectangle around tags (bordered label / button?), ordered properly in a UITextField (or UITextView) when making selections in the UITableView. Users can delete these boxes by tapping on a cross.

I can’t find information on how this is done on an iPhone.
Is there anyone who can give me guidelines in the right directions?

An alternative would be to add the selected items to a tableview. However, I didn’t find this solution as clean: when adding many tags, the table may become too large and the view is still supposed to show other stuff as well.

Thanks for your tips.

Answer 1

Not everything that looks like a textField is a textfield. Use the power of imagination.

A quick sketch could look like this:

There are actually 4 views in this sample.

The yellowish view that pretends to be a textField. Two UILabels with purplish backgroundColor and a textField with clear backgroundColor.

That’s how I would handle it. To do this dynamically you would need some code, but I won’t write that for you. It’s pretty straight forward.

1. at the beginning the textField takes the whole width
2. when the user enters the delimiter (e.g. a comma) get the text of the textfield
3. figure out the size of the label
4. add the label
5. clear textfield and resize it.
6. go to 2.

Add rounded corners and black borders for style.