Text jumps when animating position of UITextField subclass - ios

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];
}];

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.

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.

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.

Related

prevent to view appear with animmation

I have a problem that my custom navigation bar appears for the first time with animation. I think it happens because I use auto-layout and it animates it self into the state of landscape or portrait. But I want to have a functionality, that after first time I enter the screen everything is still, and where it belongs. and after that if I turn the screen or if I do something all the animations appears like now.
Is there a good think to omit the first animations when the view creates itself?
The animations are : labels floating from left to right. and 1 label appears as from 0px width and height it scales into 100% width and height
code:
[self.navigationController.navigationBar addSubview:self.topBar];
self.topbar is UIView. I have added it to block [UIView performWithoutAnimation:^{ }]; but it does not helps, everytime the view appears for the first time I have my labels floating from left to right.
The answer is that I used some methods [self layoutIfNeeded]; After setting the constraint. The solution is to have a method set like this:
- (void) yourAnimation:(BOOL)animated{
if(animated){
[UIView animateWithDuration:0.3 animations:^{
//your animated code
//[self layoutIfNeeded];
}];
}else{
[UIView performWithoutAnimation:^{
//your stuff without animation
}];
}
}

CGRectOffset animation misbehaved when working with TextField

The task is to move the textfield up when user done editing.
Right now, I have a text field textfield in the centre of the view, and a method moveTextFieldToTheTop.
Here is the code:
- (BOOL)textFieldShouldReturn:(UITextField *)textField
{
[_textField resignFirstResponder];
return NO;
}
- (void)textFieldDidEndEditing:(UITextField *)textField
{
[self moveTextFieldToTheTop];
}
- (void)moveTextFieldToTheTop
{
[UIView animateWithDuration:0.3
animations:^{
_textField.frame = CGRectOffset(_textField.frame, 0, -100);
}];
}
Instead of moving 100px up from the centre, textfield would somehow appear 100px below the centre and move to the centre position.
I debugged the code, and find out
[_textField resignFirstResponder];; is the cause of this problem.
But I really can't find out why and how to solve this problem.
Can someone please help me?
Update
I was using auto layout when I came across this problem. If I uncheck use auto layout, problem solved.
But is there a way to solve this problem with auto layout checked?
With auto layout change your moveTextFieldToTheTop method with this:
- (void)moveTextFieldToTheTop
{
//TODO update _textField's constraint to move _textField 100pt up
[_textField setNeedsLayout];
[UIView animateWithDuration:0.3
animations:^{
[_textField layoutIfNeeded];
}];
}
if you are using storyboard, then connect constraint of _textField to view controller, and update the code TODO part with that constraint(you need to change constraint .const property by 100)
Update
Here is the example project with textfield, just run the example, touch on textfield to open keyboard, and then press return button on keyboard.
https://www.dropbox.com/s/x138ta2uy1z3bbo/ToolBarhighlightproblem.zip?dl=0

Object returns to the original position (after an animation) when keyboard appears

I have this strange new issue: this code (that works perfectly)
[UIView animateWithDuration:0.4 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
CGRect frame = _logoClaim.frame;
frame.origin.y -= 180;
_logoClaim.frame = frame;
} completion:NULL];
moves a view that contains a UIImageView and an UILabel to the top of my self.view.
The view that moves unhides a UITextField.
When I try to write text into the UITextField, obviously appear the keyboard.
And at this moment, the view animated before, returns to the original start position!!!
What is the reason?
Put a completion block in your animation and check the finished value. The keyboard is cancelling the animation and the finished bool will be NO. I would disable input in the UITextField until the animation is completed. Do this in your completion block.
EDIT
Looking at your duration and re-reading the question,I may be mistaken with what I think you mean. If this answer is incorrect I will remove it.
Also, search your code for _logoClaim.frame in case you are adjusting it onKeyboardWillAppear
You would need to create outlet for its bottom/top space constraints and update the constant value of it inside the animation block.
[UIView animateWithDuration:0.4
...
animations:^{
/*Update the value of the constraint outlet supposing it to be a bottom space constraint*/
_layoutConstraintBottom += 180;
[self.logoClaim layoutIfNeeded];
} completion:NULL];
Do not forget to call -layoutIfNeeded for your animating view.

How to Use Autolayout to Animate Resizing a UITextView's Bottom Constraint When Content Has Been Scrolled

Background
I'm working on a quick and dirty notes app purely to try to understand autolayout. As such I am looking for an autolayout-specific solution to this problem.
I am quite sure that my terminology and understanding of this subject may be incorrect in places so if I misphrase or omit information through ignorance that would otherwise be helpful I am very happy to update this question with better specifics.
Short Problem Summary
This app is a simple note app. On the detail view of the note, there are two text input views, a UITextField, and a UITextView.
The goal is to use autolayout to animate a change of height to the UITextView when it is being edited (making room for the keyboard), and then animate the UITextView back to it's original size when editing is finished.
The animation code I have in place works, however when the UITextView is scrolled near to the bottom of the text the animation from "editing" size to "non-editing" size displays incorrectly durring the animation. (The final result of the animation, however is correct.)
I'm open to alternate "correct" ways of doing this if there's a common pattern for the solution. I am, however, looking for an autolayout solution which, I believe, means avoiding modifying the view's frame directly. (Could be wrong on that.)
Details and Code
A short video of the problem is available here:
http://pile.cliffpruitt.com/m/constraint_problem.mp4
This is the code performing the animation:
// self.bodyFieldConstraintBottom refers to an outlet referencing the UITextView's bottom constraint
// This animation occurrs when the text view is tapped
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView
{
[self enterEditingMode];
[UIView animateWithDuration:2.35
animations:^{
NSLayoutConstraint *bottom_constraint = self.bodyFieldConstraintBottom;
bottom_constraint.constant = 216;
[self.view layoutIfNeeded];
}];
return YES;
}
// This animation occurrs when editing ends and the text field size is restored
- (BOOL)textViewShouldEndEditing:(UITextView *)textView
{
[self exitEditingMode];
[UIView animateWithDuration:2.35
animations:^{
NSLayoutConstraint *bottom_constraint = self.bodyFieldConstraintBottom;
bottom_constraint.constant = 20;
[self.view layoutIfNeeded];
}];
return YES;
}
Full project source (in all it's messy glory) can be downloaded here:
http://pile.cliffpruitt.com/dl/LittleNotebooks.zip
Additional Comments
My understanding of cocoa terminology isn't the best so I'm having a hard time making google searches and docs searches effective. My best guess about the problem (based on observing the animation at a slow speed) is that it is related to a scroll offset somehow because unless the text is scrolled past a certain point, the problem does not manifest itself.
I have read quite a few SO question/answers including:
Resizing an UITextView when the keyboard pops up with auto layout
How to resize UITextView on iOS when a keyboard appears?
UIScrollView animation of height and contentOffset "jumps" content from bottom
The problem is that these answers either do not work ([self.bodyField setContentInset:UIEdgeInsetsMake(0, 0, 216, 0)]; seems to have no effect) or appear to rely on setting the frame of the UIText view which I believe is not supposed to be done when using autolayout.
Final Side Note
I've been at this off and on for about 4 days so my understanding and recollection of all I've read and tried is actually a little less clear than when I'd started. I hope I'm explaining this well enough to convey the issue.
EDIT:
I've noticed that this code actually gets somewhat close to the desired result:
- (BOOL)textViewShouldBeginEditing:(UITextView *)textView
{
[self enterEditingMode];
[UIView animateWithDuration:2.35
animations:^{
[self.bodyField setContentInset:UIEdgeInsetsMake(0, 0, 216, 0)];
[self.view layoutIfNeeded];
}];
return YES;
}
- (BOOL)textViewShouldEndEditing:(UITextView *)textView
{
[self exitEditingMode];
[UIView animateWithDuration:2.35
animations:^{
[self.bodyField setContentInset:UIEdgeInsetsMake(0, 0, 0, 0)];
[self.view layoutIfNeeded];
}];
return YES;
}
The problem with this version is that the scroll indicator scrolls down past the visible area of the text content, meaning it gets "lost" behind the keybaord. Also, it does not help me understand the correct way to animate a UITextView (UIScrollView ?) bottom constraint.
The issue looks weird and I am really not sure whats the main issue but I found out that for the best results you should call [self.view setNeedsUpdateConstraints]; before animating view.
My example code to animate view when keyboard appears:
-(void)keyboardWillShow:(NSNotification *)notification {
CGSize kbSize = [notification.userInfo[UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
//BH: iOS7 is messed up
CGFloat keyboardHeight = kbSize.width;
if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(#"8.0")) {
keyboardHeight = kbSize.height;
}
self.centerYConstraint.constant = keyboardHeight;
[self.view setNeedsUpdateConstraints];
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:[notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue]];
[UIView setAnimationCurve:[notification.userInfo[UIKeyboardAnimationCurveUserInfoKey] integerValue]];
[UIView setAnimationBeginsFromCurrentState:YES];
[self.view layoutIfNeeded];
[UIView commitAnimations];
}
I am using commit animations to animate view with same animationCurve as iOS is animating keyboard so view is moving 1 to 1 accordingly to keyboard. Also, please notice if statement for iOS8 vs iOS7 where Apple finally fixed window sizing.

Move text in UITextField with animation

I need to move text in UITextField (from right to left, and then back) with animation like in Safari App in iOS 7 (see the screenshots below).
Is there any way to do it?
I know that I can set textAlignment, but it won't be animated.
Maybe I should change leftView size in UITextField? But I'm not sure how to calculate size, when text should be aligned on the center. Please, help.~
(source: cs424818.vk.me)
You can achieve this behavior by doing this:
- (void)viewDidLoad
{
// add this to viewDidLoad
// keep the alignment left justified
[self.yourTextField setTextAlignment:NSTextAlignmentLeft];
[self.yourTextField addTarget:self action:#selector(textFieldDidChange)forControlEvents:UIControlEventEditingChanged];
}
-(void)textFieldDidChange
{
// this will cause your textfield to grow and shrink as text is added or removed
// note: this will always grow to the right, the lefthand side will stay anchored
[self.yourTextField sizeToFit];
}
Then when you want to move your UITextField from the center to the left you can simply do:
// 1 second animation
[UIView animateWithDuration:1.0 animations:^{
// move to the left side of some containing view
self.yourTextField.center = CGPointMake(containingView.frame.origin.x + self.yourTextField.frame.size.width/2, self.yourTextField.center.y);
}];
Likewise to move from the lefthand side to the center you can do:
[UIView animateWithDuration:1.0 animations:^{
// move to the center of containing view
self.yourTextField.center = CGPointMake(containingView.frame.size.width/2, self.yourTextField.center.y);
}];
Hope this helps!

Resources