Static table cell layout for iPhone and iPad

Question

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

I hope to make only one storyboard and use it for both iPhone and iPad, but I’m not sure if this is recommended, but I don’t have design elements specific to any device, so there would be a lot of repetition if I support a separate storyboard for both device families.

Therefore, I drag the label to the left side of the table cell and enter text on the right, then I use the machine and set some restrictions: - The label has a leading location for viewing 30 - TextField has a finite space for viewing 30 - Limiting the horizontal distance between the label and the text field - Limiting fixed width on label

It works great on the iPhone, but on the iPad, the shortcut and text box go beyond the table cell. This is because the iPad has wider margins (wider than the 30pt restrictions that I used) on the left and right side of the table cells.

Obviously, why this does not work. I think my question is that this is a common scenario, and I suspect there is a simple solution. Interested in hearing recommendations. Is there a way to limit the label and text box to the edges of the cell, and not to the edges of the table? If not, I have to:

• Replicate storyboards for iPhone and iPad.
• Use a form library like QuickDialog
• Add and organize shortcuts and text fields programmatically
• Any other suggestions?

Here is a screenshot showing the limitations of auto-layout:

And this is what the layout looks like on an iPad:

Answer 1

I have the same problem. I decided this a long way, creating outputs for each horizontal constraint, and then programmatically changing the constant depending on whether the current device is an iPad or iPhone.

header file:

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

in the viewDidLoad routine:

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

You can leave the “else” part if the restriction in the layout of the storyboard scene is set to 30, which in my case is the iPhone setting. I just put it above to show a complete example.

I would like to have a more universal solution, such as setting up a Storyboard somewhere or one resize command. It seems that the iPad iPad’s static cluster panel moves 30 points more than the iPhone, but doesn’t compensate for this when auto-detecting. Maybe I'm missing something.

Answer 2

I prefer the solution 3 ^^ to use the cellForRow:atIndexPath: method and there cell.titleLabel.title for your label and add a UITextField using autoResizingMask (or similar) flexibleWidth to your cell.contentView .

Or another solution: create a custom cell for iPhone and iPad and download this ^^ so that you also have less problems processing text fields: P If you need more help with this or have questions, just write a comment :)