flexible width for UITextField in auto layout

4
votes

I've recently enabled Auto Layout in my client's app and am trying to update the program to take advantage of the iPhone 6 and 6 Plus larger screen sizes. However, I cannot get my view widths to adjust accordingly.

At the moment, I'm just concerned with getting the top two views correct. Here's what it looks like:

UILabel UITextField

The UILabel (called Name) has the following constraints:
- Leading Space to Superview: 27
- Top Space to Superview: 24

The UITextField's constraints:
- Leading Space to Name: 20
- Trailing Space to Superview: 27
- Align Center Y to Name

My hope was that this would position the left edge of the UITextField close to the Name label, and the right edge close to the right edge of the containing UIScrollView. However, while the left edge is correct, the UITextField is comically small, such that it could take no more than one or two characters.

If I add a constraint to the UITextField Width >= 156, the field is wide enough for the small iPhones, but doesn't stretch far enough for the larger ones. It seems to completely ignore the Trailing Space to Superview constraint I placed on the UITextField.

How can I get the UITextField to resize in accordance with the size of each device? Can I do it without resorting to code to change the constant of the Width constraint? Why is the Trailing Space to Superview constraint not respected?

Thanks for any assistance.

enter image description here

4
iosuitextfieldautolayout
The constraints you say you have should work. Are you sure those are actually what you have? You shouldn't need any width constraint to make the text field stretch. – rdelmar
Hey, can you add a snapshot? I could guide you better. – Abubakr Dar
I added a screenshot of the simulator, the storyboard scene, and the constraints for the UITextField. – Casey Perkins
There is a red arrow that indicates errors. The layout system is unable to satisfy all constraints - you either have conflicting constraints or some are missing. Please try to resolve layout errors first. – Max Komarychev
I have updated the screenshot to show that all warnings and errors have been corrected, yet the problem remains; the fields still do not obey the right edges constraints on iPhone 6 and 6 Plus. Any help would be greatly appreciated. – Casey Perkins

4 Answers

4
votes

The problem is with the scroll view. I made a project with your settings and could see the very small text view you spoke of. I don't know how you made the scroll view, but with auto layout, they can be difficult. So this is what I do with scroll views and auto layout. In your view controller you want to set constraints on your scroll view as follows, pin to the top bottom and both sides. This allows the scroll view to take up the entire screen no matter what device. Then, instead of putting your labels and text views into the scroll view, drag in another view. Since your inputs go beyond the length of the screen, put all your inputs into this new view and extend it downward to make room for all your inputs. You might need to move the view so you can place everything in. Then set the new view back so the x and y positions are both zero.

Now for the cool part. Make constraints on this new view that is inside your scroll view. Make them as follows, top, bottom, both sides, and the height. Then center this view in its container. Now before the view will actually scroll you need to go to the outline and find the constraint that is for the bottom of the view. It should be a negative number. Select this constraint and set it to zero.

enter image description here

You will now be able to scroll to see all your inputs.

Now you can set constraints on your label and text view. To do this, set the constraints on the label as top to view, and leading space to view, then pin height and width. Select the text view and set the constraints to pin to the label, pin to the trailing of the view. Then you can set it's Y to the labels Y. If you select both you can choose align centers horizontally. enter image description here

It should look like the picture above. The results will be what you desired in your post. Keep adding constraints to the rest of your input fields the same way, and all should work. Please let me know if you have any questions.

1
votes

Constraints to ScrollViews are really tricky, the scrollview is adapting to their content and that's the cause you get a smaller screen than you want.

You need to reference one of the element inside the scrollView to the scrollView superview or give to the scrollview a fixed size. In this case you want to reference the UIViewController.view (right side). With that you don't need any constraint like 156>= and shouldn't be any ambiguity.

0
votes


    As per your question you need to add custom view in scroll view and set constraints accordingly. You can visit this link it will help you solve your problem of auto layout constraints on scroll view.
ref: http://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/
I would recommend you to use table view for any view which requires form as it will be more appropriate instead of scrollView.

-1
votes

This is a trick.

Add a dummy textField out of scrollView.

Set constraints for dummy textField to get right width you want.

Then add equal width constraint to textField with dummy textField.

Screenshot