UIView Animation animates position but not width - cocoa-touch

I'm trying to transform a UISearchBar, like in Mobile Safari: touch in the search field and it grows while the location field shrinks.
My current animation to alter the width and position of the search field only animates the position: just before it slides to the right place, it simply snaps out to the right width. Here's my code:
[UIView beginAnimations:#"searchGrowUp" context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationDuration:0.5f];
[UIView setAnimationDelegate:self];
CGFloat findFieldWidth = findField.frame.size.width;
CGFloat urlFieldWidth = urlField.frame.size.width;
CGRect findFieldFrame = findField.frame;
CGRect urlFieldFrame = urlField.frame;
findFieldFrame.origin.x = findFieldFrame.origin.x - 150.0f;
findFieldFrame.size.width = findFieldWidth + 150.0f;
urlFieldFrame.size.width = urlFieldWidth - 150.0f;
urlField.frame = urlFieldFrame;
findField.frame = findFieldFrame;
[UIView commitAnimations];
I've modified this code slightly for the sake of presenting it here, but I hope this gives the gist.
Any guesses as to why this is happening would be appreciated!
Cheers,
Aaron.

I figured it out thanks to this post: Changing the size of the UISearchBar TextField?
Turns out the contents of a UISearchBar don't resize properly along with the outer layer. So you have to call -layoutSubviews: within the animation block after the frame is set on the searchbar. So the block ends like:
[findField setFrame:CGRectMake(findField.bounds.origin.y, findField.bounds.origin.y, findFieldWidth, findField.bounds.size.height)];
[findField layoutSubviews];
[UIView commitAnimations];
Props to Nick Farina!

I had the same problem when trying to animate the width of a UISearchBar.
On iOS 4 and later, I found that using UIViewAnimationOptionLayoutSubviews as an option for
+[UIView animateWithDuration:delay:options:animations:completion:]
fixed it.

The accepted answer works but according to Apple docs you "should not call this method". The clean solution is to use layoutIfNeeded method:
[UIView animateWithDuration:UINavigationControllerHideShowBarDuration
delay:0.f
options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[searchBar setFrame: ...
[searchBar layoutIfNeeded];
...
Enjoy!

Sorry this is a bit old, but I was running into a similar problem.
I didn't want to use layoutSubviews because the documentation says you shouldn't call that method directly.
What I did to solve my problem was call sizeToFit on the subview within the animation block.

Related

Change background colour BEHIND ViewController frame (when frame.origin is altered)?

I have an app which intakes client details, built for iPad. When the user taps a UITextField towards the bottom half of the ViewController, the frame programatically shifts upwards so that the fields aren't hidden behind the keyboard. (I tried to implement a UIScrollView but just cannot seem to get it working.) The slight issue I'm having now is when the frame shifts up, you can vaguely see the black behind it. This isn't a huge issue because I have changed the animation time and the black background is barely visible, but I have a feeling there is a more elegant solution.
Here is my code to shift the frame:
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
// Animate frame up if lower textfields are tapped
if (([textField isEqual:_emailField]) || ([textField isEqual:_dobField]) || ([textField isEqual:_niNumField])) {
[UIView beginAnimations:nil
context:NULL];
[UIView setAnimationDuration:0.35f];
CGRect frame = self.view.frame;
frame.origin.y = -210;
[self.view setFrame:frame];
[UIView commitAnimations];
} else {
// Return frame to original position if other textfields are tapped
[self dismissKeyboard];
}
return YES;
}
- (void)dismissKeyboard {
[UIView beginAnimations:nil
context:NULL];
[UIView setAnimationDuration:0.15f];
CGRect frame = self.view.frame;
frame.origin.y = 0;
[self.view setFrame:frame];
[UIView commitAnimations];
}
Here is a brief screenshot of what I'm trying to describe. Left picture is the ViewController normally, right picture is when the frame has been shifted upwards. You can see (vaguely) almost in line with the second row of characters is where the frame stops.
I realise this doesn't seem like an issue because it is barely visible at all, but I have had to speed up the animation hiding the keyboard or else the frame drags behind and the black background becomes visible. I am wondering: is there a way to change this colour? Or is that something we don't have access to? If anyone can suggest a more elegant method for what I am trying to do, I'd gladly take a better solution. Thanks in advance.
Your UIViewController's view is added to the main UIWindow. So you should be able to achieve what you want by changing the UIWindow's background color.
In the UIApplicationDelegate:
self.window.backgroundColor = [UIColor whiteColor];
However, what you're doing isn't the best way to solve the problem of the keyboard covering up the text fields. You should use a UIScrollView or a UITableView to manage this view and use content insets to shift the view up or down.

Animate intrinsicContentSize changes

I have a UIView subclass that draws a circle whose radius changes (with nice bouncy animations). The view is deciding the size of the circle.
I want this UIView subclass to change its frame size to match the animated changes to the circle radius, and I want these changes to modify any NSLayoutConstraints connected to the view (so that views that are constrained to the edge of the circle will move as the circle resizes).
I understand that implementing -(CGSize)intrinsicContentSize and calling invalidateIntrinsicContentSize when the radius changes will tell constraints to update, but I cant figure out how to animate the changes to intrinsicContentSize.
Calling invalidateIntrinsicContentSize from within a [UIView animateWith... block just instantly updates the layout.
Is this even possible, and is there a workaround/better approach?
invalidateIntrinsicContentSize works well with animations and layoutIfNeeded. The only thing you need to consider is, that changing the intrinsic content size invalidates the layout of the superview. So this should work:
[UIView animateWithDuration:0.2 animations:^{
[self invalidateIntrinsicContentSize];
[self.superview setNeedsLayout];
[self.superview layoutIfNeeded];
}];
Swift version of #stigi's answer which worked for me:
UIView.animate(withDuration: 0.2, animations: {
self.invalidateIntrinsicContentSize()
self.superview?.setNeedsLayout()
self.superview?.layoutIfNeeded()
})
Width / height constraint doesn't help? Keep reference of this constraint and ...
[NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:nil
attribute:NSLayoutAttributeNotAnAttribute
multiplier:1
constant:myViewInitialWidth];
... when you do want to animate myView resize, do this ...
self.viewWidthConstraint.constant = 100; // new width
[UIView animateWithDuration:0.3 animations:^{ [view layoutIfNeeded]; }];
... do the same thing for the height.
Depends on your other constraints, maybe you will be forced to raise priority of these two constraints.
Or you can subclass UIView, add - (void)invalidateIntrinsicContentSize:(BOOL)animated and fake it by yourself. Get new size from - (CGSize)intrinsicContentSize and animate it by animating width / height constraints. Or add property to enable / disable animations and override invalidateIntrinsicContentSize and do it inside this method. Many ways ...
In the code below, intrinsic class is the class that has just changed it's size on changing a variable. To animate the intrinsic class only use the code below. If it impacts other objects higher up the view hierarchy then replace self.intrinsic class with the top level view for setNeedsLayout and layoutIfNeeded.
[UIView animateWithDuration:.2 animations:^{
self.intrinsicClass.numberOfWeeks=8;
[self.intrinsicClass setNeedsLayout];
[self.intrinsicClass layoutIfNeeded];
}];
None of this has worked for me. I have a UILabel which I am setting with a NSAttributedString. The text is multiline and wrapping on word boundaries. Therefore the height is variable. I've tried this:
[UIView animateWithDuration:1.0f animations:^{
self.label = newLabelText;
[self.label invalidateIntrinsicContentSize];
[self.view setNeedsLayout];
[self.view layoutIfNeeded];
}];
And a number of variations. None work. The label immediately changes it's size and then slides into it's new position. So the animation of the labels position ons screen is working. But the animating of the label's size change is not.
Well for Swift 4/3 this works and I think this is best practise. If you have a UIView with a UILabel in it and the UIView adapts the frame from the UILabel, use this:
self.theUILabel.text = "text update"
UIView.animate(withDuration: 5.0, animations: {
self.theUIView.layoutIfNeeded()
})
The normal self.view.layoutIfNeeded() will work most of the time as well.

Animating an image view to slide upwards

I am attempting to make an image view (logo below) slide upwards by 100 pixels. I am using this code, but nothing happens at all:
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:3];
logo.center = CGPointMake(logo.center.x, logo.center.y - 100);
[UIView commitAnimations];
This code is in the viewDidLoad method. Specifically, the logo.center = ... is not functioning. Other things (like changing the alpha) do. Maybe I'm not using the right code to slide it upwards?
For non-autolayout storyboards/NIBs, your code is fine. By the way, it's now generally advised that you animate using blocks:
[UIView animateWithDuration:3.0
animations:^{
self.logo.center = CGPointMake(self.logo.center.x, self.logo.center.y - 100.0);
}];
Or, if you want a little more control over options and the like, you can use:
[UIView animateWithDuration:3.0
delay:0.0
options:UIViewAnimationCurveEaseInOut
animations:^{
self.logo.center = CGPointMake(self.logo.center.x, self.logo.center.y - 100);
}
completion:nil];
But your code should work if you're not using autolayout. It's just that the above syntax is preferred for iOS 4 and later.
If you're using autolayout, you (a) create an IBOutlet for your vertical space constraint (see below), and then (b) you can do something like:
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
static BOOL logoAlreadyMoved = NO; // or have an instance variable
if (!logoAlreadyMoved)
{
logoAlreadyMoved = YES; // set this first, in case this method is called again
self.imageVerticalSpaceConstraint.constant -= 100.0;
[UIView animateWithDuration:3.0 animations:^{
[self.view layoutIfNeeded];
}];
}
}
To add an IBOutlet for a constraint, just control-drag from the constraint to your .h in the assistant editor:
By the way, if you're animating a constraint, be sensitive to any other constraints that you might have linked to that imageview. Often if you put something right below the image, it will have its constraint linked to the image, so you may have to make sure you don't have any other controls with constraints to your image (unless you want them to move, too).
You can tell if you're using autolayout by opening your storyboard or NIB and then selecting the "file inspector" (the first tab on the right most panel, or you can pull it up by pressing option+command+1 (the number "1")):
Remember, if you planning on supporting pre-iOS 6, make sure to turn off "autolayout". Autolayout is an iOS 6 feature and won't work on earlier versions of iOS.
have u try
logo.frame = CGRectMake(logo.frame.origin.x, logo.frame.origin.y - 100,logo.frame.size.width,logo.frame.size.height)

Moving a UIView

I am trying to move a UIView programmatically using the following method:
-(void)animatePlaybackLine: (int) currentBeat{
CGRect newFrame = CGRectMake(currentBeat*eighthNoteWidth, 0, eighthNoteWidth, 320);
[playbackLine setFrame:newFrame];
NSLog(#"Line animated to %i", currentBeat);
NSLog(#"New frame origin %f", playbackLine.frame.origin.x);
}
When the method is called, the NSLogs show that the variable currentBeat is incrementing as it should, and the frame of playbackLine (my UIView) appears to be moving as it should. However, the object on the screen doesn't move. I have also tried setting the bounds and the center instead of the frame, and all of them have similar results. I also tried using an animation instead of setting the frame, to no avail.
Is there something else I should be doing to make the image onscreen show the changing frame?
I'm guessing you're calling that method in a loop? iOS isn't going to redraw the screen until your code finishes executing. You can't loop like this and see iterative results.
To animate views, you should use the native support UIKit gives you. In particular, check out the Animations section in the UIView class reference.
Try this
[UIView animateWithDuration:0.3
delay:0.0
options: UIViewAnimationCurveEaseOut
animations:^{
datePickerView.frame = imageFrame;
}
completion:^(BOOL finished){
self.datePickerViewFlag = NO;
}];

How to implement the effect of popping up tableview from bottom of screen?

I'm a newbie of Xcode and Objective-c. Recently I wanna do a task about popping up tableviews. When a button is pressed, the tableview should pop up from the bottom of the screen. The tableview will contain just a few items so I don't wanna it occupy full screen. I read the manual and found UIModalPresentationStyle, but it seems not fulfill my requirements. So what's the more accurate methods I can use?
While #Bharat J's answer is correct, those methods are deprecated in iOS 4.0.
The latest and greatest implementation is + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations
Implemented as:
[UIView animateWithDuration:0.5 animations: ^{
tableView.frame = newFrame;
}
];
You can use below code to create an animation block . Set the frame for the table view as (0,480,320,0) When you hit a button change the frame of the table view in the animation block and make it to CGRectMake(0,200,320,280) or something .
[UIView beginAnimations:#"AnimateTableView" context:view];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
tableView.frame = CGRectMake(0, 200 , 320, 280);
[UIView commitAnimations];
The same animation block for hiding it again but with the frame again begin set to CGRectMake(0,480,320,0). This should work in your case .
Another option would be to use a UIActionSheet and add the uitableview as a subview.
Here is a very similar question about how to add a UIPickerview with similar effect.
Add UIPickerView & a Button in Action sheet - How?