Layout created in 4 inch screen gets messed up in 3.5 inch screen even when using Auto Layout

2
votes

I have a simple login screen. It looks fine on the 4-inch screen.

enter image description here

But when I run it in the 3.5-inch screen, as you can see the bottom part gets cut off.

enter image description here

I have Auto Layout turned on and below are the constraints that are set.

enter image description here

If I may explain a little further, I have 4 UITextFields. The first one(User ID) is aligned as Center Y alignment. And each UITextField below each other has Vertical Space constraint set. For the Button also, The Vertical Space is set with the UITextField above(Server). I understand that's the constraint that's causing the problem. But say if I remove that and add a Bottom Space to SuperView constraint instead, the button's gonna overlap the last UITextField.

I've gone through both parts of the tutorial on Auto Layout here on RW. I still have no idea how to correct this. How can I make this layout appear correctly in both screen sizes?

Thank you.

1
iphoneioslayoutios6autolayout
fixed the loginbutton position from bottom – Sumit Mundra
When I do that, the button overlaps the UITextField – Isuru
you need to redefine your all UITextField constraints.. – Sumit Mundra
You mean through code? – Isuru
first you set degine for 3.5 inch and then check in 4 inch.... – Sumit Mundra

1 Answers

1
votes

The simple solution is pin everything to the top making sure it fits for a 3.5 inch screen. As the screen expands there will be extra space at the bottom.

The better option is vertically space the elements evenly on both screens, this can't be done purely in interface builder though. You would need to calculate vertical spacings in code and apply them in updateViewConstraints