Keeping the width and height of a UITextField on iPad or iPhone the same with AutoLayout

I had a question about Auto Layouts in Xcode. I've started to get the hang of this system and so far it is working pretty well. The only problem I am trying to solve is related to my UITextFields and UIButtons in my login screen. Currently, my auto layout constraints are set that the the textfield gets stretched out iPad. My ideal layout is to have the textfields be the same size as they are on iPhone and still centered on the iPad display... Please see accompanying screen shots for reference. I've tried many Interface Builder Constraint combination, but I cannot figure out the correct one? Any help would be appreciated.


Screen Shots

1. Current Auto Layout - i.stack.imgur.com/EABr6.png

2. Intended Auto Layout - i.stack.imgur.com/K2K0b.png


Thanks,

Replies

The simplest would be:

- set a constraint to center horizontally the textFields

- set their width to a fixed value

Okay. I understand point # 1 and # 3... however, I didn't understand what you meant by "set their width less than a fixed value"

Look, I have modified.


The width should be set to be OK for portrait mode on iPhone.

You can add another constraint for leading, to be >= 20 ; so that for smaller width iPhone, you leave some left margin (right margin will be equal, because it is centered).


You should also set the width constraint priority to a lower value of 900.


So finally, you would have those constraints:

- Width = 400, priority 900

- align center to view

- align leading to view >= 16

- align top as needed

Claude31, Sorry, I'm lost here... 😕 maybe I need to review some material on Auto Layout but I tried some of your steps above but couldnt get that to work. Could you explain it again please? Thank you.

OK, let's first look at email textField.


Select it in Interface Builder.


- Control-drag to the UIView object ; in the constraints that are proposed, select:

Top space

Leading space

Bottom space

Align center

- click in the size button at the bottom of the screen and set width to 400


Now, look at the constraints in Size inspector.

- select the width constraint, click Edit ; you can now set priority to 900

- select leading constraint ; Edit ; set the value to 16 and change the = to a ≥


For password, control-drag to eMail textField to set constraints :

- align leading

- align trailing

- top space


You will set the constraints for the "Sign in" button in the same way as for email.


Hope that's clear enough.

Okay. I followed your instructions and they were clear however the results i am getting are way off than expected. Please see links below...



Results Post AutoLayout Settings Image

h ttps://drive.google.com/file/d/1gzPSByExSxJXyTMsTe5Qb50s2ZBjZCYE/view?usp=sharing


Xcode IB Constraints

h ttps://drive.google.com/file/d/14iAbLFWQ3k9lL0StDz3bdoEQT_8ObS7t/view?usp=sharing

I'd probably put everything in a containing UIView and give that view a maximum width constraint. Maybe less than or equal to 400 or 450 or whatever looks good, to let it expand just a little on iPad.


Be aware that "same size as they are on iPhone" is ambiguous - there are multiple iPhone screen sizes. And of course portrait / landscape. But constraining my container view distance to the safe area = 0 (this one optional, i.e. priority < 1000), centered in superview, width <= some constant, should work for all layouts.

I see a first error (I was not clear in my message) :

email top = password top


you shoiuld set vertical spacing between the 2 (control drag from password to email and select vertical spacing).


To align properly, add the same constraints for password as for email

Control-drag to the UIView object ; in the constraints that are proposed, select:

Top space

Leading space

Bottom space

Align center

- click in the size button at the bottom of the screen and set width to 400


Now, look at the constraints in Size inspector.

- select the width constraint, click Edit ; you can now set priority to 900

- select leading constraint ; Edit ; set the value to 16 and change the = to a ≥


And delete the constraints relative to email:

- align leading

- align trailing


For the sign button, you could set the height to a fixed value of 25