Question

I have an Android app with a UI like this for viewing emails:

I’m trying to port this to iOS and need it to work with iOS 5.0 and above (so can’t use auto-layout in iOS 6.0). Hopefully you can tell how the layout should adjust/flow based on the example.

What would be the best way to handle this type of layout? The From and Re lines need to be variable height as shown (actually the To: line as well). The message body needs to be variable height of course.

My only attempt so far has been trying to use UITableViewController with static cells. I am able to get the variable height that way, by using sizeWithFont inside heightForRowAtIndexPath, to return the required height for each row. Using that method I’m having a heck of a time trying to get the style I want (rounded corners and background only for the top part).

So is there a better way? Maybe something that uses Collection View or Container View? On some other screens I need to port I have similar issues, but they have more levels of nesting (rounded blue section inside a white section inside a rounded blue section). Or would I be better off not using IB and building the entire UI in code from just basic label elements and generic views?

Answer 1

The easiest way I can think of is to manually compute for the label frames inside viewDidLayoutSubviews. Here’s some pseudo-code:

On creation:

1. In IB, put all labels as subviews of the blue area. Check that the autoresizing mask of the container sticks to the top, left, and right, as well as have stretchable width. We’ll fix the height and the subview frames in code. The message body can be a label or a textview as a separate view.
2. In viewDidLoad, set the containing view’s layer cornerRadius, borderColor, etc. as appropriate.

In viewDidLayoutSubviews:

1. Time label: Easy. Just set the width to the superview width minus some padding, set the height with sizeWithFont:
2. For To:, From:, and Re:; call sizeToFit. Get the max width and hold on to that.
3. To: label: Set the x to 0 and y to the time label’s bottom.
4. Receiver’s name label: Set x to the width you got from (2.) and y to same as (3.). Set width to (container width – (2.)) and height with sizeWithFont:.
5. Do the same steps from (3.) to (4.) for the From: and Re: rows.
6. Set the blue view height to the frame bottom of the subject label.
7. Fill the rest of the frame with the body textview/label.

You have to add paddings on your own because sizeToFit and sizeWithFont: won’t do that for you. Also, the body UITextView can scroll on it’s own, but if you are expecting long subject titles then you should wrap the whole thing in another UIScrollView (or in IB just set the main view’s class to UIScrollView)