Shrink width of UITextField based on growth of another - ios

Question

I am trying to modify the width of a UITextField based on the increasing width of another. Here's an example of my layout:
On the left box (which contains int dialog codes once selected) I want to set this to margin 0 to start with and extend the right UITextField right across. When the left box contains data I want to adjust the right hand text field's border relative to that.
I know how to do this easily in Android but I am not having much luck in Xcode. Can anyone point me in the right direction?

Answer 1

The basic idea is
observe the text changed event
recalculate the width
update the constant property of the width constraint
Here is a simple demo and more edge cases need to be considered.
- (void)viewDidLoad {
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(100, 150, 175, 100)];
container.backgroundColor = [UIColor grayColor];
[self.view addSubview:container];
//initialize text fields
UITextField *leftInput = [[UITextField alloc] initWithFrame:CGRectZero];
leftInput.translatesAutoresizingMaskIntoConstraints = NO;
[leftInput addTarget:self action:#selector(textDidChange:) forControlEvents:UIControlEventEditingChanged];
[container addSubview:leftInput];
UITextField *rightInput = [[UITextField alloc] initWithFrame:CGRectZero];
rightInput.translatesAutoresizingMaskIntoConstraints = NO;
[container addSubview:rightInput];
//setup constraints
NSDictionary *views = NSDictionaryOfVariableBindings(container, leftInput, rightInput);
NSMutableArray *constraints = [NSMutableArray array];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"H:|-[leftInput]-[rightInput]-|" options:0 metrics:nil views:views]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[leftInput]-|" options:0 metrics:nil views:views]];
[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:#"V:|-[rightInput]-|" options:0 metrics:nil views:views]];
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:leftInput attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:0 multiplier:0 constant:minWidth];
[constraints addObject:widthConstraint];
self.widthConstraint = widthConstraint;
[NSLayoutConstraint activateConstraints:constraints];
}
- (void)textDidChange:(UITextField *)textInput {
NSDictionary *attributes = #{NSFontAttributeName: textInput.font};
CGFloat width = [textInput.text sizeWithAttributes:attributes].width;
self.widthConstraint.constant = MAX(minWidth, width);
}

Answer 2

Here is an alternative without using constants. The idea is to set up the autolayout in such a way that it recalculates width of the left text field for you so you simply update the layout when text changes.
First, set hugging priority on left text field to be higher than right text field. Make sure you have these horizontal constraints installed:
Left margin of left text field to container (or other item, simply fix the left margin)
Right margin of left text field should have a fixed horizontal spacing to left margin of right text field (this is the gap between the text fields, standard is 8px but of course use what you want)
Right margin of right text field to the right side of the container or whatever you use to anchor the right side to
This forces the two text fields to occupy some given space between the left and right margins, and autolayout must decide which text field gets priority. By setting hugging priority higher for left text field you state that you prefer the right text field to expand if there is space available, therefore if both fields are empty, the right one will take up the full space. This is why you need to set up greater than or smaller than constraints to limit how small/large your text fields can get.
For now, let's assume we start with both text fields empty. At this point it would be smart to provide a minimum width for the left text field because otherwise it will have a width of 0 and so it won't be possible to enter any text. Minimum size of about 50 should be reasonable to allow for text input, but try and see what works for you.
Remember to capture the text editing changed property on the text field, so assuming you have the text field in a variable named leftTextField, call
[leftTextField addTarget:self action:#selector(leftTextChanged) forControlEvents:UIControlEventEditingChanged];
somewhere in your viewDidLoad or other initialisation method.
Now all that remains is to ask autolayout to recalculate the intrinsic size of the views and update itself. This is done by calling layoutIfNeeded, so your method would look like
- (void)leftTextChanged {
[self.view layoutIfNeeded];
}
Hope this helps.