arcade16 arcade16 - 2 years ago 96
Objective-C Question

Autolayout vs. different XIB for different form factors?

I am working on a universal application that must support all current iOS device form factors. The interface is using autolayout via storyboards and currently displays correctly on the iPad, iPhone 6, and iPhone 6 Plus form factors. However, I am struggling with getting the interface / constraints to properly scale on the iPhone 5 / SE form factor. Does anyone have recommendations for how I can fix my constraints on the iPhone 5 / SE form factor or would you just recommend loading a different XIB for the iPhone 5 / SE? Thanks in advance.

Correct interface on an iPhone 6S:
Correct interface on an iPhone 6S

Broken interface on iPhone 5 / SE:
Broken interface on iPhone 5 / SE

(This is the only view giving me a hard time).

Answer Source

My rule of thumb is to design storyboards for the Any x Any size class, and then make specific changes for other sizes as needed. This is because Any x Any forces you to think in terms of resizable components and relative positioning because you're working with a 600 x 600 size that doesn't actually exist on any device. My guess is that your design has fixed vertical constraints between components, when what you want is for some of them to be relative. In other words, it looks like your Login button, -- or -- separator, and TouchID views are at fixed distances from the bottom edge of the view, and the others are fixed from the top edge. If autolayout can't compute the desired distances at runtime, it will pick one constraint to turn off in order to resolve problems; in this case, it's your vertical constraint between the bottom of the password field to the top of the Login button. Instead, I'd make the constraint between the TouchID button and the bottom of the view a less-than-or-equal constraint, not an equals, and/or give it a lower priority than the other vertical constraints.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download