Search code examples
iphoneobjective-cuiviewcore-animationuiviewanimation

iPhone loading view "slide effect"


I would to achieve that when you request something in my app (like a button pressed or whatever) I would like it to appear a small rectangle that says "loading.." and when the loading is completed it disappear with a "slide up effect". I've made a simple mockups for describing well what I'm trying to achieve. Do you have any hint for me? Thanks.

enter image description here

NOTE: I don't want pull to refresh effect (the loading view appears without the screen scrolling, it appears for example when you send a comment)

UPDATE:

I've tried the Cirrostratus code:

- (IBAction)displayLoadingScreen:(id)sender
{
    NSLog(@"pressed");
    UIView *loadingView = [[UIView alloc] init];
    loadingView.frame = CGRectMake(0,-40,320,40);
    [loadingView setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:loadingView];
    //animate in within some method called when loading starts
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,0,320,40);
                     } 
                     completion:^(BOOL finished) {
                     }];
    for (int i = 0; i < 10000; i++) {
        NSLog(@"%d", i);
    }
    //animate out within some method called when loading ends
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,-40,320,40);
                     } 
                     completion:^(BOOL finished){


                     }];
}

Why the loading view slide in after the for loop? If you try it, before it prints the for loop and after executes the two animations. Ideas?

UPDATE 2

- (void)stopLoading {
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,-40,320,40);
                     } 
                     completion:^(BOOL finished){
                     }];
}

- (void)startLoading {
    loadingView.frame = CGRectMake(0,-40,320,40);
    [loadingView setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:loadingView];
    //animate in within some method called when loading starts
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,0,320,40);
                     } 
                     completion:^(BOOL finished) {
                     }];
    sleep(5);
    [self stopLoading];
}

- (IBAction)displayLoadingScreen:(id)sender
{
    NSLog(@"button pressed");
    [self startLoading];
}

Solution

  • loadingView.frame = CGRectMake(0,-40,320,40);
    [loadingView setBackgroundColor:[UIColor blueColor]];
    [self.view addSubview:loadingView];
    //animate in within some method called when loading starts
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,0,320,40);
                     } 
                     completion:^(BOOL finished){
    
    
                     }];
    //animate out within some method called when loading ends
    [UIView animateWithDuration:1.0
                     animations:^{ 
                         loadingView.frame = CGRectMake(0,-40,320,40);
                     } 
                     completion:^(BOOL finished){
    
    
                     }];