Adjust width of UITextField to fill toolbar in landscape

Question

In a UIToolbar, I have added a UITextField to the middle of the bar (which gets added as a UIBarButtonItem) with another UIBarButtonItem (Action button) next to it. I added flexible space bar button items at the very left and very right. It looks great on portrait, but when I rotate to landscape it centers them and looks ok, but I need the text field to get stretched to fill the width and push the last button clear to the right - exactly like it does in Messages - on iPhone and iPad.

I thought Auto Layout would do the trick but Apple states you cannot create constraints for UIBarButtonItems. And indeed when I select any of the bar buttons or the text field it will not allow creating any constraints.

Could you please let me know how to accomplish this? Thanks!

EDIT: I've tried a few other combinations with fixed/flexible spaces. When I don't add any, the text field and share button are pushed over to the left:

If instead I do fixed spaces, it looks the exact same as above with 0 widths, or if I set a width then it obviously will push them over. That last space on the far right has no effect - it's not fixed against the far right side so it goes off the screen.

I tried a fixed space on the left and a flexible on the right, with the middle one fixed (or no middle one), and it looks like the screenshot above. I then changed the middle one to flexible and it turned out like this:

If I change the first to flexible, none in the middle (or if I add a fixed one), and flxed on the right, it is moved over to the right:

If the first is flexible, middle is flexible, and right is fixed, this is how it looks:

In all cases the width of the text field remains the same static value as it was originally set up in the storyboard. I think the problem is that when you set the width by dragging the frame, there are no blue guidelines to snap to so it will always remain that same width.

Did I miss any combination of spaces? If I cannot implement the desired behavior in the interface builder, how would one accomplish this in code?

Firecrest

Answer 1

To obtain a horizontally stretching text field, I had to manually set its frame in viewWillAppear and also when the orientation changes - I used viewWillTransitionToSize:withTransitionCoordinator::

[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  __nonnull context) {
    self.textField.frame = CGRectMake(0, 0, self.navigationController.navigationBar.frame.size.width - self.actionButton.width - 55, self.inputTextField.frame.size.height);
} completion:^(id<UIViewControllerTransitionCoordinatorContext>  __nonnull context) {
}];

Previous solution (no longer works for me in latest OSes):

Add this in viewDidLoad:

self.textField.autoresizingMask = UIViewAutoresizingFlexibleWidth;

Firecrest

Doesn't work for me in Xcode 6.2/iOS8: the UITextField remains a fixed size, so the toolbar is chopped off in the compact size and it is not wide enough in the regular size. – Riva

I figured out why it didn't work for me: I was looking at the results in Preview, where you can look at both an iPhone and an iPad at the same time, see here (ignore the fact it says Swift: the tutorial has nothing to do with Swift): youtube.com/watch?v=p5wD8dvSDbM. Apparently Preview only shows you what you did in IB, so Preview can't see the code in the answer. As a result, in Preview my TextField wasn't stretching, but when I Ran (Run'ed?!) my code against various devices (click on the device in the jump bar to the right of the Stop button, and choose another device), ... – Riva

... the TextField sized itself to fit the available space. Thanks! – Riva

@Riva Odd! I couldn't get it to work with iOS 8 running in the simulator. In any case, I added an example of how you can do this by setting its frame. – Firecrest

It's working for me in iOS8.2, in that it's visually correct--but I'm getting some errors in the console: Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. I'm working on it. – Riva

The constraints causing the errors I see in the console are for another control--when I delete all the constraints for the other control, I get no errors and the TextField in the ToolBar fills the available space in iPhone6 and iPad Air, and when those devices are rotated the TextField stretches to fill the landscape width. – Riva

Did you add the text field in a storyboard or is it all done programmatically? With or without flexible space in the toolbar, and another button to the right? I'm testing with Xcode 6.3 and iOS 8.3, can't get it to work using UIViewAutoresizingFlexibleWidth. – Firecrest

All in a (universal) storyboard--except for your code. No flexible spaces. Two buttons to the right. The buttons to the right make no difference. I deleted them and I extended the UITextField all the way to the right, and it fills the available space in compact or regular size, and in portrait or landscape orientation. – Riva

I guess my constraints are important, see here: #29996890 – Riva