fade in collection of thumbnails on UIScrollView one at a time - objective-c

I have a large collection of thumbnails I display on a UIScrollView and I would like them to fade in nicely one at a time. Right now they all fade in together after they are all loaded to the scrollview simply by hiding and showing the scrollview. This is OK but it can take a long time for 500 images to be loaded.
I have tried several different variations of what I though would work by using background threads.
I thought this would work for sure but no luck. I have a NSMutableArray of all of my UIImageViews that I have added to the scroll view, so once they are all in place and the scrollview is sized I call:
[self performSelectorInBackground:#selector(addThumbnailToScrollView) withObject:values];
-(void) addThumbnailToScrollView: (NSDictionary *) aDictionary {
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
NSLog(#"Collection Item Count: %i, imageViewCount: %i", [self.collectionItems count],[self.imageViews count]);
UIImage *img = [Helpers getThumbnailImage:[aDictionary valueForKey:#"PhotoName"] withManufacturer:manufacturerID];
[(UIImageView*)[self.imageViews objectAtIndex:[[aDictionary valueForKey:#"i"] intValue]] setImage:img];
[(UIImageView*)[self.imageViews objectAtIndex:[[aDictionary valueForKey:#"i"] intValue]] setAlpha:0];
[UIView beginAnimations:#"fade" context:nil];
[(UIImageView*)[self.imageViews objectAtIndex:[[aDictionary valueForKey:#"i"] intValue]] setAlpha:1];
[UIView commitAnimations];
[pool drain];
}
The UIView animation cause a crash because it is not done before the objects are released I guess. Even when I remove the animation bit they image still pop onto the screen in large groups versus 1 by 1.

You can try this
-(void)animateTumbs:(NSInteger)index{
index++;
if ([self.imageViews count]
[UIView animateWithDuration:0.2
animations:^{
[(UIImageView*)[self.imageViews objectAtIndex:[[aDictionary valueForKey:#"i"] intValue]] setAlpha:1];
}
completion:^(BOOL finished){
[self animateTumbs:index];
}];
}
Or you can try:
[self performSelectorInBackground:#selector(addThumbnailToScrollView) withObject:values afterDelay:0.2];
Good luck

Related

gap between keyboard and textview during animation

I want to adjust the height of a textview when the keyboard appears. In iOS 7 this can be done by adjusting the NSLayoutConstraint between the textview and the bottomLayoutGuide of the view controller.
That works fine with the code below except for one detail. During the animation the textview runs ahead of the keyboard and a wide gap appears. Similar during the keyboardWillHide method.
The cause for this "bug" is probably because the keyboard starts from the very bottom of the screen while the textview starts higher up due to the height of the toolbar.
Any suggestions on how to fix this?
-(void) keyboardWillShow:(NSNotification *) notification
{
//update constraints
CGRect keyboardFrame = [[[notification userInfo] valueForKey:UIKeyboardFrameEndUserInfoKey] CGRectValue];
CGRect convertedKeyboardFrame = [[self view] convertRect:keyboardFrame
fromView:nil];
CGRect toolbarFrame = [[[self navigationController] toolbar] frame];
CGRect convertedToolbarFrame = [[self view] convertRect:toolbarFrame
fromView:nil];
CGFloat toolbarAdjustment = (UIInterfaceOrientationIsPortrait([self interfaceOrientation])) ? CGRectGetHeight(convertedToolbarFrame) :CGRectGetWidth(convertedToolbarFrame);
[[_textView bottomSpaceConstraint] setConstant:CGRectGetHeight(convertedKeyboardFrame) - toolbarAdjustment];
//animate change
for (UIView *view in [[self view] subviews])
{
[view setNeedsUpdateConstraints];
}
[UIView animateWithDuration:[[[notification userInfo] valueForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue]
delay:0 //0.2 as possible hack, otherwise a gap appears between keyboard and textview
options:[[[notification userInfo] valueForKey:UIKeyboardAnimationCurveUserInfoKey] integerValue]
animations:^{
for (UIView *view in [[self view] subviews])
{
[view layoutIfNeeded];
}
}
completion:NULL];
}
The delay is probably caused by calling layoutIfNeeded repeatedly in a loop.
In the animation block, just send layoutIfNeeded to the root view, i.e., self.view. Sending layoutIfNeeded to the root view will take care of the entire view hierarchy. So get rid of the loop.
I question if the call to setNeedsUpdateConstraints is necessary; if it is, it only needs to be sent to the root view.
Also, try eliminating the animation options parameter
options:0

setNeedsDisplay on uiimageview doesn't refresh the view immediately

I'm using AVCaptureSession to capture an image and then send it to my server.
[self.stillImageOutput captureStillImageAsynchronouslyFromConnection:videoConnection completionHandler: ^(CMSampleBufferRef imageSampleBuffer, NSError *error) {
if (imageSampleBuffer != NULL) {
NSData *imageData = [AVCaptureStillImageOutput jpegStillImageNSDataRepresentation:imageSampleBuffer];
self.videoImageData = [imageData copy];
[self processImage:[UIImage imageWithData:imageData]];
NSString* response=[self uploadImage];
[activityIndicator removeFromSuperview];
self.takePictureBtn.enabled = YES;
[self setUserMessage:response];
}
}];
- (void) processImage:(UIImage *)image
{
...
[UIView beginAnimations:#"rotate" context:nil];
[UIView setAnimationDuration:0.5];
int degrees = [self rotationDegrees];
CGFloat radians =degrees * M_PI / 180.0;
self.captureImageView.transform = CGAffineTransformMakeRotation(radians);
[UIView commitAnimations];
[self.captureImageView setNeedsDisplay];
}
- (NSString*)uploadImage send the photo to the server
The behavior I'm expecting is after processImage terminates that the image will be displayed in the UIImageView captureImageView on it the activity indicator rotates but instead i get a white blanc view with the indicator rotating and only after the server post request terminates captureImageView displays the image
How can I achieve my desired behavior?
Another problem I'm facing is that my imageSampleBuffer returns a mirror image of the taken one (object on the left appears on the right)
From the docs:
This method makes
a note of the request and returns immediately. The view is not
actually redrawn until the next drawing cycle, at which point all
invalidated views are updated.
Since you’re doing other stuff after you call setNeedsDisplay the event doesn’t end and you don’t get a display immediately.
If you want to do more stuff, one approach would be to schedule the rest of the stuff in a new block, like, with
[[NSOperationQueue mainQueue] addOperationWithBlock:^{
NSString *const response = [self uploadImage];
[activityIndicator removeFromSuperview];
self.takePictureBtn.enabled = YES;
[self setUserMessage:response];
}];

Autolayout Constraint - Keyboard

Im stuck trying to animate a table view smoothly which has an autolayout contraint. I have a reference to the constraint "keyboardHeight" in my .h and have linked this up in IB. All i want to do is animate the table view with the keyboard when it pops up. Here is my code:
- (void)keyboardWillShow:(NSNotification *)notification
{
NSDictionary *info = [notification userInfo];
NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [kbFrame CGRectValue];
CGFloat height = keyboardFrame.size.height;
[UIView animateWithDuration:animationDuration animations:^{
self.keyboardHeight.constant = -height;
[self.view setNeedsLayout];
}];
}
The thing is the animation block is instantaneous and I see white space appear before the keyboard has finished its animation. So basically I see the white background of the view as the keyboard is animating. I cannot make the animation last for as long as the keyboard is animating.
Am i approaching this the wrong way? Thanks in advance!
Try it this way:
self.keyboardHeight.constant = -height;
[self.view setNeedsUpdateConstraints];
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
Remember this pattern because this should be the correct way to update constraint-based layouts (according to WWDC). You can also add or remove NSLayoutConstraints as long as you call setNeedsUpdateConstraints after.
If you're using UITableViewController, keyboard size should be automatically accommodated by iOS to adjust the contentInsets. But if your tableView is inside a UIViewController, you probably wanted to use this:
KeyboardLayoutConstraint in the Spring framework. Simplest solution I've found so far.
Try the next code. In this case table view lays out at the bottom edge of the screen.
- (void)keyboardWillShow:(NSNotification *)notification { // UIKeyboardWillShowNotification
NSDictionary *info = [notification userInfo];
NSValue *keyboardFrameValue = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [keyboardFrameValue CGRectValue];
BOOL isPortrait = UIDeviceOrientationIsPortrait([UIApplication sharedApplication].statusBarOrientation);
CGFloat keyboardHeight = isPortrait ? keyboardFrame.size.height : keyboardFrame.size.width;
// constrBottom is a constraint defining distance between bottom edge of tableView and bottom edge of its superview
constrBottom.constant = keyboardHeight;
// or constrBottom.constant = -keyboardHeight - in case if you create constrBottom in code (NSLayoutConstraint constraintWithItem:...:toItem:...) and set views in inverted order
[UIView animateWithDuration:animationDuration animations:^{
[tableView layoutIfNeeded];
}];
}
- (void)keyboardWillHide:(NSNotification *)notification { // UIKeyboardWillHideNotification
NSDictionary *info = [notification userInfo];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
constrBottom.constant = 0;
[UIView animateWithDuration:animationDuration animations:^{
[tableView layoutIfNeeded];
}];
}
The approach I took is to add a view which follows the size of the keyboard. Add it below your tableview, or text input or whatever and it will push things up when the keyboard appears.
This is how I set up the view hierarchy:
NSDictionary *views = #{#"chats": self.chatsListView, #"reply": self.replyBarView, #"fakeKeyboard":self.fakeKeyboardView};
[self.view addVisualConstraints:#"V:|-30-[chats][reply][fakeKeyboard]|" views:views];
And then the key bits of the keyboard-size-following view look like this:
- (void)keyboardWillShow:(NSNotification *)notification
{
// Save the height of keyboard and animation duration
NSDictionary *userInfo = [notification userInfo];
CGRect keyboardRect = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];
self.desiredHeight = CGRectGetHeight(keyboardRect);
self.duration = [userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
[self animateSizeChange];
}
- (void)keyboardWillHide:(NSNotification *)notification
{
self.desiredHeight = 0.0f;
[self animateSizeChange];
}
- (CGSize)intrinsicContentSize
{
return CGSizeMake(UIViewNoIntrinsicMetric, self.desiredHeight);
}
- (void)animateSizeChange
{
[self invalidateIntrinsicContentSize];
// Animate transition
[UIView animateWithDuration:self.duration animations:^{
[self.superview layoutIfNeeded];
}];
}
The nice thing about letting this particular view handle its resizing is that you can let the view controller ignore it, and you can also re-use this view any place in your app you want to shift everything up.
The full file is here:
https://gist.github.com/shepting/6025439

How to make images appear and disappear in iOS apps?

I'm trying to make my app show an image (PNG) in the middle of a screen when a button is pressed and then make it fade out after a few seconds. How would I be able to do this? Also it is a small png so how can i just make it show in its original size rather then stretch it out to fit the whole screen? Any tip, suggestion or answer is greatly appreciated!
Also I am new to this site so could you please tip me or help me improve this question as some people think it is not complete. Thank you everyone for your generous answers! :)
Initialize an UIImageView with an UIImage:
// Assuming MyImage.png is part of the project's resources.
UIImage *image = [UIImage imageNamed:#"MyImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
// Add imageView to a parent view here.
[UIView animateWithDuration:0.2f delay:3.0f options:0
animations:^{imageView.alpha = 0.0;}
completion:^{[imageView removeFromSuperview];}];
Here is the code for showing image for the few seconds on button press:
in your button action add following code:
imageView.image=yourImage;
[self performSelector:#selector(waitAndGo) withObject:nil afterDelay:5];
here is the implementation for the waitAndGo:
-(void)waitAndGo
{
imageView.hidden=YES;
}
NSArray *animationArray = [NSArray arrayWithObjects:[UIImage imageNamed:#"myImage.png"], nil];
[NSTimer scheduledTimerWithTimeInterval:.75 target:self selector:#selector(crossfade) userInfo:nil repeats:YES];
mainImageView.animationImages = animationArray;
mainImageView.animationDuration = 4.5; //mainImageView is instance of UIImageView
mainImageView.animationRepeatCount = 0;
[mainImageView startAnimating];
CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:#"contents"];
crossFade.autoreverses = YES;
crossFade.repeatCount = 1;
crossFade.duration = 1.0;
and the target method:
- (void) crossfade {
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut]; // user dependent transition acn be set here
mainImageView.alpha = !mainImageView.alpha;
[UIView commitAnimations];
}

Animation not working when view presented with an UIModalTransitionStyleFlipHorizontal

I try to make an animation with an image in my view but it doesn't work: my image is at the final position without animation.
UIImage *myImg = [UIImage imageNamed : #"Img72.png"];
UIImageView *myImgView =[ [UIImageView alloc] initWithImage: myImg ];
myImgView.frame= CGRectMake(250,50,72,72);
[self.view addSubview:myImgView];
[UIView animateWithDuration:0.5
delay: 0.0
options: UIViewAnimationOptionCurveEaseInOut
animations:^{
[UIView setAnimationRepeatCount:100.0];
[UIView setAnimationRepeatAutoreverses:YES];
myImgView.frame= CGRectMake(50,250,72,72);
}
completion:NULL];
[myImgView release];
The same animation code work perfectly in another view. I finally find that it's come from the way I display the view with this code:
FlipsideViewController *controller = [[[FlipsideViewController alloc] initWithNibName:#"FlipsideViewController" bundle:nil] autorelease];
controller.delegate = self;
controller.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal; //KO
[self presentModalViewController:controller animated:YES];
The problem is the modalTransitionStyle. When I comment the line (with //KO) it finally works. I test the other transition style and all the other works (UIModalTransitionStyleCoverVertical, UIModalTransitionStyleCrossDissolve, UIModalTransitionStylePartialCurl)
I made an viewDidLoadProject (Utility App) and just add the animation code in the two view in viewDidLoad method.
Where is the problem? Is it an Apple bug? How can I have a flip transition AND my animation working in the second view?
Here is my example project: http://dl.dropbox.com/u/9204589/testFlipAnimation.zip
That seems more natural to start to play with the interface when all the system stuff is done, didAppear must be used for that purpose i believe (yes, it works :))
FlipsideViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
-(void)viewDidAppear:(BOOL)animated
{
UIImage *myImg = [UIImage imageNamed : #"Img72.png"];
UIImageView *myImgView =[ [UIImageView alloc] initWithImage: myImg ];
myImgView.frame= CGRectMake(250,50,72,72);
[self.view addSubview:myImgView];
[UIView animateWithDuration:0.5
delay: 0.0
options: UIViewAnimationOptionCurveEaseInOut
animations:^{
[UIView setAnimationRepeatCount:100.0];
[UIView setAnimationRepeatAutoreverses:YES];
myImgView.frame= CGRectMake(50,250,72,72);
}
completion:NULL];
[myImgView release];
[super viewDidAppear:animated];
}