I am looking to animate the size of my UIView Container at the same time my ad appears at the bottom. I have the ad slide up from the bottom of the screen when it's ready. I want my UIView container to decrease that same amount of size as the ad slides up.
I created an outlet property for my container view within the top level UIViewController that it is embedded in.
My ad animation code:
- (void)adViewDidReceiveAd:(GADBannerView *)view
{
NSLog(#"Received Ad");
[UIView animateWithDuration:1.0 animations:^ {
view.frame = CGRectMake(0.0,
self.view.frame.size.height - view.frame.size.height,
view.frame.size.width,
view.frame.size.height);
// This is where I think I would need to animate the container view.
}];
}
How can I decrease the size of my container view to match that of the ad? I need the container to stay in the same spot and everything, but some height needs to be taken off of the bottom.
That's simple: just animate your container frame in the same block as you are animating your banner view up. It will be something like this:
[UIView animateWithDuration:1.0 animations:^ {
view.frame = CGRectMake(0.0,
self.view.frame.size.height - view.frame.size.height,
view.frame.size.width,
view.frame.size.height);
self.containerView.frame = CGRectMake( self.containerView.frame.origin.x,
self.containerView.frame.origin.y,
self.containerView.frame.size.width,
self.containerView.frame.size.height - view.frame.size.height);
}];
This piece of code will decrease your containerView as the same height of your banner and at the same time. You can change/adapt as you want.
Edit: if you are using autolayout, you should create a IBOutlet for the constraint and animate it, and not the frame itself.
Related
I am currently trying to make a UIView containing some UILabel animate to a new size. But doing so I am having some trouble understanding what is really happening with my view. I read some other post about it but I am still unclear about what is really going on.
In my button I added something that just double the size of the right constraint :
[superView layoutIfNeeded];
rightConst.constant *= 2;
[UIView animateWithDuration:3
animations:^{
[superView layoutIfNeeded];
} completion:nil];
superView Being the view I wanna animate and rightConst the constraint to the right.
But doing so, the animation starts but it is actually coming from left. I don't understand this part. My goal would be to animate just the right side of the view to show the resize and maybe the bottom part of the view but the top left should be fixed.
Thanks.
As described in this document, if you call [aView layoutSubviews], layout of the subviews of aView is forced but layout of aView itself is NOT forced.
You need to call layoutSubviews of the superview of the view you want to animate. In this case, the superview of the superview of the two labels.
Solution is here
UIView *theView;
// theView is the superview of the superview of the two labels.
theView = superView.superview;
[theView layoutIfNeeded];
rightConst.constant *= 2;
[UIView animateWithDuration:3
animations:^{
[theView layoutIfNeeded];
} completion:nil];
I have a large image with 1000 px width. I want to display the image in original size and I want it to automatically scroll from right to left in an animation. For example in IPhone 6 it should display the 375 px first, then should move to the left till the all parts of photo is displayed in time. How can I do this?
// You have to put the imageView inside a UIScrollView
// Set the duration you want for your animation
[UIView animateWithDuration:1.5f animations:^{
//Code for animation
[scrollView setContentOffset:CGPointMake(imageView.frame.size.width - scrollView.frame.size.width, scrollView.contentOffset.y) animated:NO];
} completion:^(BOOL finished) {
//Code after the animation is completed
}];
You can programmatically scroll UIScrollView with setContentOffset function. For example:
scrollView.setContentOffset(CGPoint(x: scrollView.frame.width - imageView.frame.width, y: 0), animated: true)
You can also set the contentOffset property within UIView.animateWithDuration block for more controlled animation.
It's kind the weird I'm facing right now, I know that adding constraints in an AutoLayout IB is simple. But I really couldn't figure-out why my simple constraints are not working when I'm resizing (ZoomIn Animation) a UIView.
The View I'm targeting to zoomIn works fine, but the subviews within it is not being positioned well. It seems that the constraints are not working.
From this setup, where in the Yellow Boxes are UIViews and the Green Boxes are UIImageViews.
When I tapped on a Yellow Box, it should zoomIn, as what is shown on the photo below it.
These are the constraints:
This should be the expected resulting upon zoomIn AnimationBut I got no luck, The yellow box zoomIn but the Green Box is let on its old position and did not changed size.
I put a leading, trailing, topSpace, and bottomSpace from Yellow Box to Green Box already.
My code for resizing the yellow box is:
- (void) resizeViewWithZoomInAnimation: (UIView*)view duration:(float)secs option:(UIViewAnimationOptions) option {
//sets the new width and height of deal's view
float newWidth = view.superview.frame.size.width - 20;
float newHeight = view.superview.frame.size.height - 20;
[UIView animateWithDuration:secs delay:0.0 options:option
animations: ^{
switch ([view tag]) {
case 1:
[view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, newWidth, newHeight)];
break;
case 2:
[view setFrame:CGRectMake(CGRectGetMaxX(view.frame),CGRectGetMinY(view.frame), -newWidth , newHeight)];
break;
case 3:
[view setFrame:CGRectMake(CGRectGetMinX(view.frame),CGRectGetMaxY(view.frame), newWidth , -newHeight)];
break;
case 4:
[view setFrame:CGRectMake(CGRectGetMaxX(view.frame),CGRectGetMaxY(view.frame), -newWidth, -newHeight)];
break;
}
}
completion:nil];
}
This should be the expected resulting upon zoomIn Animation:
When trying to animate with Auto Layout, you should not change view's frames directly. Instead, you should animate changes in constraints.
To access constraints from storyboard you can simply create IBOutlets for them.
[containerView layoutIfNeeded]; // complete pending layout operations (optional)
[UIView animateWithDuration:1.0 animations:^{
// Update constraints
self.viewConstraint1.constant = NEW_VALUE;
self.viewConstraint2.constant = NEW_VALUE;
// Animate the changes
[containerView layoutIfNeeded];
}];
Note that you usually want to call layoutIfNeeded on the super view(or higher) of the view you are trying to animate.
I recommend reading more on Auto Layout in Apple's official guide.
A tweak to the above answer, I used from within a UIViewController
[self.view layoutIfNeeded];
[UIView animateWithDuration:.5
animations:^{
myConstraint.constant = 64;
[self.view layoutIfNeeded];
}
completion:^(BOOL finished) {
// whatever
}];
Changes of note: Apple docs recommend using layoutIfNeeded, and calling this both before and within the animation block. This is so that you can be sure the animation stack is cleared before beginning.
Also, you are to call layoutIfNeeded on the parent view of the constraint you will be animating, not on the view who owns the constraint. Thanks to #nkukushkin for the initial answer.
It's also important to have your constraints set up correctly. The 'fix constraints' tool in IB won't necessary set them up in a way that works correctly for animating. For me I had to go through them and think through how I wanted the dependencies to work, which is of course expected but might not be obvious to the beginner (and results in errors).
When you are using constrains, pre-constrains are generated. When you act on position and size, remove constrains while animating the view or do following:
yourView.translatesAutoresizingMaskIntoConstraints = YES;
I want to make the width of an UIImageView larger through an animation. I have an UIView with and UIImageView made in the story board. What I want to achieve is so that it looks like the view is scaling from left to right, and keeping its original position. I have tried the following code, but what it does is animating the imageview from the top left corner of its parent view and moving and scaling it until it reaches the position and scale it had from the beginning.
[UIView animateWithDuration:4.0f delay:1.0f options:UIViewAnimationCurveEaseOut animations:^{
CGRect currentFrame = self.imageview1.frame;
currentFrame.size.width = 150;
self.imageview1.frame = currentFrame;
}completion:nil];
Any ideas why this behaviour?
A bit late answer, but I solved the problem. It seems that you cannot change the frame of views in code if autolayout is enabled. Instead you need to animate the constraints of the view, which you can set up in the storyboard and then animate like this:
[self.view layoutIfNeeded];
[UIView animateWithDuration:0.3 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.bottomViewY.constant = -196;
[self.view layoutIfNeeded];
} completion:nil];
self.bottomViewY is a constraint which is assigned as an IBOulet. You need to call layoutIfNeeded as it will update the constraints.
I have been struggling for a long time with a problem with a UIScrollView.
I have a UIScrollVIew that contains a UITextView as a subview. When I select the text view a keyboard pops up. I want to resize the text view to fit exactly in the available space, and also scroll the scroll view so that the text view is positioned exactly in the visible space (not hidden by the keyboard).
When the keyboard appears I call a method that calculates the appropriate size for the text view and then performs the following code:
[UIView animateWithDuration:0.3
animations:^
{
self.textView.frame = frame;
}
];
[self.scrollView setContentOffset:CGPointMake(0,frame.origin.y) animated:YES];
(here frame is the appropriate frame for the text view).
Unfortunately the scroll view does not always scroll to the correct position, especially when it is already at a non zero vertical content offset when I select the text view. I know that the content offset that I'm setting it to is correct.
After a lot of testing I finally realized that what was happening was that after the animation completed, the scroll view was automatically scrolling again.
This code does work:
UIView animateWithDuration:0.3
animations:^
{
self.textView.frame = frame;
}
completion:^(BOOL finished) {
[self.scrollView setContentOffset:CGPointMake(0, frame.origin.y) animated:YES];
}
];
but it looks strange because the scroll view scrolls to the wrong position, then to the right one.
Does anyone know how I can prevent the scroll view from changing it's content offset when the text view frame finishes its animation?
I am testing using iOS 5.0.
Here is a solution that I found that works. I'm still don't completely understand what's happening, possible it has something to do with the way my springs and struts are set. Basically I am shrinking the scroll view content size by the same amount that the text view shrinks.
- (void)keyboardDidShow:(NSNotification*)aNotification
{
NSDictionary* info = [aNotification userInfo];
// Get the height of the keyboard
CGRect kbRect = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue];
kbRect = [self.view convertRect:kbRect fromView:nil];
CGSize kbSize = kbRect.size;
// Adjust the height of the text view to fit in the visible view
CGRect frame = self.textView.frame;
int visibleHeight = self.view.frame.size.height;
visibleHeight -= kbSize.height;
frame.size.height = visibleHeight;
// Get the new scroll view content size
CGSize contentSize = self.scrollView.contentSize;
contentSize.height = contentSize.height - self.textView.frame.size.height + frame.size.height;
[UIView animateWithDuration:0.1
animations:^
{
self.textView.frame = frame;
// Note that the scroll view content size needs to be reset, or the scroll view
// may automatically scroll to a new position after the animation is complete.
self.scrollView.contentSize = contentSize;
[self.scrollView setContentOffset:CGPointMake(0, frame.origin.y) animated:YES];
}
];
// Turn off scrolling in scroll view
self.scrollView.scrollEnabled = NO;
}
// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
// Update the view layout
[UIView animateWithDuration:0.3 animations:^
{
self.scrollView.contentOffset = CGPointZero;
[self updateViewLayout];
}
];
// Turn on scrolling in the scroll view
self.scrollView.scrollEnabled = YES;
}
([self updateViewLayout] is a method that returns the text view to the correct height, and resets the scroll view content size, as well as making sure all the other subviews are properly positioned).
Do not adjust the frame of the text view. All you need to do is scroll the scrollview. If you scroll the scrollview animated, then the textView will slide up animated. Just do the following:
[self.scrollView setContentOffset:CGPointMake(0, frame.origin.y) animated:YES];
If you need the scroll view to scroll at a specific rate then manually adjust the content offset in an animation block.(I haven't tested this, you may want to adjust the animation flag, or step through the content offset one pixel at a time if this doesn't work)
[UIView animateWithDuration:0.3f
animations:^{
[self.scrollView setContentOffset:CGPointMake(0, frame.origin.y) animated:YES];
} ];
I believe I also had something similar. I wanted my horizontal UIScrollView to go back to it's original offset (0,0), and every time I animated back to it, it would be just a couple pixels off, but as soon as someone touched the scrollview, it would continue and finish the animation (almost like lag in a video game).
Due to that, I tried putting it in GCD as the main queue and it worked perfectly fine after that. Here's the code:
- (void)setPageZero{
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:1.0f
delay:0 options:UIViewAnimationOptionCurveEaseInOut
animations:^{
[self.scrollView setContentOffset:CGPointMake(0, self.scrollView.frame.origin.y) animated:YES];
}
completion:^(BOOL finished) {}];
});
}
What that basically does, is that it puts the animation into the main queue (kind of like a superhighway in the CPU/GPU) and it prioritizes it over other things!
Hope this helps future readers!
I'm having a similar problem. Basically I have a scroll view with three pages each containing a custom UIView class. The custom UIView class contains an image and a number of overlay views containing information about the image. The overlay views contain a number of UITextView fields.
I attach the custom views to the scroll view and then I load the image & overlays using block operations. I swipe to the right by deleting the first view, repositioning the next two views, and adding an new view to the right.
If I create the UITextField objects and disable scrolling as follows:
UITextView* view = [[UITextView alloc]
initWithFrame:CGRectMake(position.x,position.y,width,height)];
view.editable = NO;
view.scrollEnabled = NO;
Then the scroll view gets repositioned between pages when I return from the block code. Note that I don't reposition the scroll view and on exit from the block, the scroll view is in the correct position.
However, if I comment out the code to disable scrolling
UITextView* view = [[UITextView alloc]
initWithFrame:CGRectMake(position.x,position.y,width,height)];
view.editable = NO;
// view.scrollEnabled = NO;
this repositioning does not occur and the scrolling works as expected.
Complete hack: May improve the reset issue:
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
[self setContentOffset:self.contentOffset animated:NO];
}