How to display interface with flexible content in Xcode storyboard

Question

I need to display cafe details in a viewcontroller. Cafe data is from API call, each cafe may have different data set.

Generally the view will display the following in order:

• cafe name
• address
  • min 2 line and max of 4 line.
• contact number
  • might be empty, max up to 2 sets of contact number
• email
  • might be empty
• description (HTML)
• link to social media or website
  • might be empty, max up to 4 set of URL
• map

What I need:

• display data in view if it's not empty
• be able to set the spacing before the previous element

I'm using xcode storyboard, the view controller is embed in Navigation controller and Tab bar controller.

What's the recommended way to handle flexible/dynamic interface, is there any guide or tutorial that I can follow? So far all the help I can find is simple placing of elements in fixed coordinate. For my case, some element size may change depending on the data returned from API call.

Answer 1

There are a couple of ways to do it..

With that much data I would make a table view and put each row of data (or related pieces of data) in their own rows, it would give you a free scroll view which you most certainly will need with dynamic content.

As for determining the height of a cell, you calculate the height of the "bounding box" that the text will take up in order to display the proper height. Here is an example....

+ (CGFloat)heightForText:(NSString *)text {

    CGFloat topMargin = 10.0; // add a bit of padding to top
    CGFloat bottomMargin = 10.0; // add a bit of padding to bottom
    CGFloat minHeight = 44.0;

    NSAttributedString *string = [NSAttributedString attributedStringWithText:text lineHeight:23 font:[UIFont systemFontWithSize:15] color:[UIColor blackColor] alignment:NSTextAlignmentLeft];

    CGRect screenSize = [[UIScreen mainScreen] bounds];
    CGRect size = [string boundingRectWithSize:CGSizeMake(screenSize.size.width - 70, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin context:nil];
    return MAX(minHeight, size.size.height + topMargin + bottomMargin);
}

Let me know if you would like more clarity.

You could also use storyboard constraints which if done right will calculate everything for you beautifully, but you need to take into account the fact that the user may need to scroll the content, i.e. you need a scroll view.

Answer 2

What you're describing is very much like a contact screen in the Phone (or Contacts) app. Just use the same solution: a table view. One row for the cafe name. One row for the address (containing a text view). One row for each contact number. One row for each email address. One row with an embedded web view for the description (or a text view if you can use RTF instead of HTML). One row for each social media link. One row with an embedded map view.

Answer 3

You should definitely use constraints in the interface builder. With constraints, you can set spacings between each control/view.

This is the official guideline:

This is a full tutorial on how auto layout and constraints work in iOS7 (similar for iOS6):

Answer 4

You can do this with story board while adding a new view controller with and make it's size flexible.

see this screen shot.