How can I achieve this layout in iOS?

Question

I'm trying to achieve a layout similar to this:

I'm puzzled as to how this can be achieved. The new features in iOS 6, container cells and autolayout, perhaps should be of help, but the application I saw this in is quite old and they implemented that without those new features. What I want to achieve is a label, a textfield, and then another label which may have text long enough that it has to wrap to the following line, like in the image I attached. A possible way to achieve this is to put a label with two lines, and put for example the underscore character repeated and then measure somehow where the underscores start and end and overlay the textfield in that area. But this is difficult and seems quite cumbersome. How can I achieve that?

Answer 1

I actually think your underscore idea isn't exactly a bad one and might not be as hard as you think.

There are probably cleaner (though maybe slower) ways to do this, but the easiest that comes to mind is setting a delimiter in your string that you can use to break the string into components like this:

Why ^________^ you late to work this morning?

From here, [[myString componentsSeparatedByString:@"^"] objectAtIndex:1]; will give you your underscores.

Next step is getting the size, like this [underscoreString sizeWithFont:[UIFont fontWithName:@"<your font>" size:<your size>]];

Now you have the size of your underscore string which you can use to overlay your UITextField. Be sure to consider the width of your delimiters in your underscoreString, either append them or adjust the width of the UITextField accordingly. Bear in mind, there are still other things to consider here (what happens if the underscore string word wraps for example), but hopefully this answers your immediate question.