1

I'm fairly new to iOS dev and very new to storyboards. I'm trying to create a basic form using a UITableView with static cells and a "grouped" style.

I'm hoping to make only one storyboard and use it for both iPhone and iPad, not sure if this is recommended but I don't really have and design elements that are specific to either device so there'd be a lot of repetition if I maintain a separate storyboard for both device families.

So I drag a label onto the left hand side of my table cell and a text input onto the right then I use auto-layout and setup some constraints: - Label has a leading space to superview of 30 - TextField has a trailing space to superview of 30 - Horizontal spacing constraint between the label and textfield - Fixed width constraint on label

It works great on iPhone however on iPad the label and textfield extend beyond the edges of the table cell. This is because iPad has wider margins (wider than the 30pt constraints I used) on the left and right side of the table cells.

It's obvious why it doesn't work. I guess my question is, that this is a common scenario and I suspect there's a simple solution. Interested to hear recommendations. Is there a way to constrain the label and textfield to the edges of the cell rather than the edges of the table? If not should I:

  1. Replicate the storyboards for iPhone and iPad
  2. Use a form library like QuickDialog
  3. Add and arrange the label and textfields programatically
  4. Any other suggestions?

Here's a screenshot showing the auto-layout constraints: enter image description here

And this is how the layout behaves on iPad: enter image description here

Bruce
  • 387
  • 3
  • 14

2 Answers2

3

I have the same problem. I solved it the long way by creating outlets for each horizontal constraint and then programmatically changing the constant depending if the current device is an iPad or iPhone.

header file:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *myLabelHorizontalConstraint;

method file in the viewDidLoad subroutine:

if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
        myLabelHorizontalConstraint.constant = 60;
} else myLabelHorizontalConstraint.constant = 30;

You can leave out the 'else' part if the constraint in your storyboard scene layout is set to 30 which in my case is the iPhone setting. I just put it in above in order to show a complete example.

I wish there was a more universal solution such as a setting in Storyboard somewhere or a single resize command. It seems the iPad static cell group layout indents about 30 points more than iPhone but doesn't compensate for this in autolayout. Maybe I am missing something somewhere.

Scott
  • 56
  • 6
  • I think this solution addresses the specific problem. Thanks for the tip Scott. On longer forms setting up the outlets could get a bit tedious but in that case a programatic layout might be best anyway. – Bruce May 19 '13 at 19:14
1

I prefere solution 3 ^^ use the cellForRow:atIndexPath: methode and there the cell.titleLabel.title for your label and add the UITextField with autoResizingMask (or similary) flexibleWidth to your cell.contentView.

Or other solution: create a custom Cell for iPhone and for iPad and load this ^^ so you also have lesser problems handling the textfields :P If you need further help with this or have questions, just comment :)

geo
  • 1,781
  • 1
  • 18
  • 30
  • I am leaning towards this solution now as I can't find a super-convenient way of doing it with auto-layout. Thanks. – Bruce May 19 '13 at 19:15