Text jumps when animating position of UITextField subclass

Question

When I animate the location of my UITextField subclass, the text in the field jumps out of step with the location of the UITextField holding it, which is very jarring and I can't figure out why it happens:

My subclass adds a button to the right hand side of the text field that when tapped calls a method on the view controller, which changes the textfield border colour and moves the text field up the screen by changing the top space constraint of the text field, and a couple of other views located above it.

[UIView animateWithDuration:0.3
                     animations:^{
                         self.tableViewBottomSpaceConstraint.constant = 0;
                         self.mainLabelHeightConstraint.constant = 0;
                         self.subLabelTopSpaceConstraint.constant = 0;
                         self.postCodeFieldTopSpaceConstraint.constant = 12;
                         [self.view layoutIfNeeded];

                     }];

Answer 1

i fixed this. change your code to this. It will work.

[UIView animateWithDuration:0.3
                 animations:^{
                     self.tableViewBottomSpaceConstraint.constant = 0;
                     self.mainLabelHeightConstraint.constant = 0;
                     self.subLabelTopSpaceConstraint.constant = 0;
                     self.postCodeFieldTopSpaceConstraint.constant = 12;
                     [self.view layoutSubviews];

                 }];

or if this doesn't work then instead of

[self.view layoutSubviews];

use the parent view of the text field and layoutSubviews. In my case this worked. I think this answer is eligible for the bounty. Thanks.

EDIT:

I found the reason of this. When we are trying to layoutIfNeeded it means its changing the outer layout first and after it changes its layout its changing the inner text of UITextField because we are not forcefully changing layout of all subviews of that text field. After all UITextField is made up of UIView and Label and other base elements. But when we trying to layoutSubviews its changing layout of all subviews simultaneously. Thats why the bouncing is gone.

Answer 2

It looks like for some reason your UI isn't in a settled state before the animation is triggered.

Try adding a call to [self.view layoutIfNeeded]; before your animation block, and use [self.view layoutIfNeeded]; at the end of your block rather than [self.view layoutSubviews]; which shouldn't really be used in this context.

Answer 3

For iOS 9 or above, this solve the issue

Objective-C:

 - (void)textFieldDidEndEditing:(UITextField *)textField
 {
    [textField layoutIfNeeded]; //Fixes iOS 9 text bounce glitch
    //...other stuff
 }

Swift:

  func textFieldDidEndEditing(_ textField: UITextField) {
    textField.layoutIfNeeded() //Fixes iOS 9 text bounce glitch
    //...other stuff
  }

Google takes me here. Under @Mahesh Agrawal 's answer, @Andy comments a link that links to Here which is the best solution I can find for this problem.