0

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

Example Layout

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?

eselk
  • 6,764
  • 7
  • 60
  • 93

1 Answers1

2

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)

John Estropia
  • 17,460
  • 4
  • 46
  • 50
  • 1
    Thanks, I'll give this a try and accept if works. It doesn't sound so bad the way you have it written. I guess I've been spoiled by other platforms for too long -- used to do this stuff back in the early days of Windows, but been too long. – eselk Oct 03 '12 at 15:26
  • It does seem daunting because you have many UI elements, but if you look at your screenshot most of the measurements are already there. Personally, I prefer this method because it's pretty straightforward. Usually I just shove the whole view hierarchy in IB, only caring about static positions and sizes; then fix all dynamic measurements in code. – John Estropia Oct 03 '12 at 15:53
  • I ended up placing each "row" (field table and text) in a view, and was able to define all padding/etc in IB. So all the coded had to do was set the height of each view, for each row, and the top/y for all but the top row. It is a pain, but at least iOS UIs will/should never be as complex as a Mac/Windows UI might be, so not too much to move around on each view/screen. – eselk Oct 03 '12 at 16:44