XCode Custom Activity Indicator - Hide after UIWeb

Question

I'm using the code found here http://blog.blackwhale.at/?p=336 to create a custom activityIndicator in the current version of xCode. This code uses a series of .png images in an array and then displays them at the set interval to create an animated loading image that you can then place on the screen (and assuming you can somehow remove it) whenever you want.

In my main ViewController.m file I have the following code in my viewDidLoad section :

/* --- START CUSTOM ACTIVITY INDICATOR */
    //Create the first status image and the indicator view
    UIImage *statusImage = [UIImage imageNamed:@"activity1.png"];
    UIImageView *activityImageView = [[UIImageView alloc] 
                                      initWithImage:statusImage];


    //Add more images which will be used for the animation
    activityImageView.animationImages = [NSArray arrayWithObjects:
                                         [UIImage imageNamed:@"activity1.png"],
                                         [UIImage imageNamed:@"activity2.png"],
                                         [UIImage imageNamed:@"activity3.png"],
                                         [UIImage imageNamed:@"activity4.png"],
                                         [UIImage imageNamed:@"activity5.png"],
                                         [UIImage imageNamed:@"activity6.png"],
                                         [UIImage imageNamed:@"activity7.png"],
                                         [UIImage imageNamed:@"activity8.png"],
                                         [UIImage imageNamed:@"activity9.png"],
                                         [UIImage imageNamed:@"activity10.png"],
                                         [UIImage imageNamed:@"activity11.png"],
                                         [UIImage imageNamed:@"activity12.png"],
                                         nil];


    //Set the duration of the animation (play with it
    //until it looks nice for you)
    activityImageView.animationDuration = 0.6;


    //Position the activity image view somewhere in 
    //the middle of your current view
    activityImageView.frame = CGRectMake(
                                         self.view.frame.size.width/2
                                         -statusImage.size.width/2, 
                                         self.view.frame.size.height/1.2
                                         -statusImage.size.height/1.2, 
                                         statusImage.size.width, 
                                         statusImage.size.height);

    //Start the animation
    [activityImageView startAnimating];


    //Add your custom activity indicator to your current view
    [self.view addSubview:activityImageView];


   /*  --- END CUSTOM ACTIVITY INDICATOR */

I would like to CLEAR/DELETE/HIDE the activityImageView element, as I only want it to show when the app first launches until the UIWebView finishes loading.

I would like to call this and have the gif appear while webViewDidStartLoad and then clear when webViewDidFinishLoad. Someone help??

Answer 1

Okay, so the reason that you cannot access activityImageView is because its declared in your viewDidLoad function. Add it as a property to your ViewController class and you should be able to do what you want. Make sure that you remove the declaration of activityImageView from viewDidLoad, and just initialize it there.

Also, where is your webview that you want to show the activity indicator? Does it have a separate view controller or is it included in your main view controller? It sounds like your scope for activityImageView is incorrect, though without knowing how you have everything set up its a little hard for me to tell you where to put it.

After you use your activity indicator in these two places, do you plan on using it again during the applications run time, or will it only ever be visible if you reload the application? Depending on the answer to that you will either want to just hide it, or remove it from you main view.

UIImageView.hidden is what controls visibility.

EDIT, Code as requested:

ViewController.h

@interface ViewController : UIViewController
{
    UIWebView *_webView;
}

@property(nonatomic, strong) UIWebView *webView;
@property(nonatomic, strong) UIImageView *activityImageView;

ViewController.m

@implementation ViewController
@synthesize activityImageView;
@synthesize webView = _webView;

-(void)viewDidLoad {

    //all your previous stuff with the change that you just alloc activityImageView instead of declare it
    activityImageView = [[UIImageView alloc] initWithImage:statusImage];
    //The above is the initialization, below is where your old code should go
}

Answer 2

Declare your activityImageView as a property in your header file and configure it in your viewDidLoad: method

You should add your activityImageView in UIWebViewDelegate method

- (void)webViewDidStartLoad:(UIWebView *)webView

And then stopAnimating and removeFromSuperview in the UIWebViewDelegate methods

- (void)webViewDidFinishLoad:(UIWebView *)webView
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error

You should read UIImageView documentation and the UIWebViewDelegate protocol reference

UPDATE

In your header:

@property(nonatomic, retain) UIImageView *activityImageView;

In your implementation

@synthesize activityImageView;

-(void)viewDidLoad{
  activityImageView = [[UIImageView alloc] 
                                      initWithImage:statusImage];


    //Add more images which will be used for the animation
    activityImageView.animationImages = [NSArray arrayWithObjects:
                                         [UIImage imageNamed:@"activity1.png"],
                                         [UIImage imageNamed:@"activity2.png"],
                                         [UIImage imageNamed:@"activity3.png"],
                                         [UIImage imageNamed:@"activity4.png"],
                                         [UIImage imageNamed:@"activity5.png"],
                                         [UIImage imageNamed:@"activity6.png"],
                                         [UIImage imageNamed:@"activity7.png"],
                                         [UIImage imageNamed:@"activity8.png"],
                                         [UIImage imageNamed:@"activity9.png"],
                                         [UIImage imageNamed:@"activity10.png"],
                                         [UIImage imageNamed:@"activity11.png"],
                                         [UIImage imageNamed:@"activity12.png"],
                                         nil];


    //Set the duration of the animation (play with it
    //until it looks nice for you)
    activityImageView.animationDuration = 0.6;


    //Position the activity image view somewhere in 
    //the middle of your current view
    activityImageView.frame = CGRectMake(
                                         self.view.frame.size.width/2
                                         -statusImage.size.width/2, 
                                         self.view.frame.size.height/1.2
                                         -statusImage.size.height/1.2, 
                                         statusImage.size.width, 
                                         statusImage.size.height);
}

- (void)webViewDidStartLoad:(UIWebView *)webView{
[self.activityImageView startAnimating];
[self.view addSubview:activityImageView];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView{
[activityImageView stopAnimating];
[activityImageView removeFromSuperview];
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
[activityImageView stopAnimating];
[activityImageView removeFromSuperview];
}

Answer 3

You should go like this:

- (void)viewDidLoad {
    [super viewDidLoad];

    //Create the first status image and the indicator view
    UIImage *statusImage = [UIImage imageNamed:@"activity1.png"];
    UIImageView *activityImageView = [[UIImageView alloc] 
                                  initWithImage:statusImage];


    //Add more images which will be used for the animation
    activityImageView.animationImages = [NSArray arrayWithObjects:
                                     [UIImage imageNamed:@"activity1.png"],
                                     [UIImage imageNamed:@"activity2.png"],
                                     [UIImage imageNamed:@"activity3.png"],
                                     [UIImage imageNamed:@"activity4.png"],
                                     [UIImage imageNamed:@"activity5.png"],
                                     [UIImage imageNamed:@"activity6.png"],
                                     [UIImage imageNamed:@"activity7.png"],
                                     [UIImage imageNamed:@"activity8.png"],
                                     [UIImage imageNamed:@"activity9.png"],
                                     [UIImage imageNamed:@"activity10.png"],
                                     [UIImage imageNamed:@"activity11.png"],
                                     [UIImage imageNamed:@"activity12.png"],
                                     nil];


    //Set the duration of the animation (play with it
    //until it looks nice for you)
    activityImageView.animationDuration = 0.6;


    //Position the activity image view somewhere in 
    //the middle of your current view
    activityImageView.frame = CGRectMake(
                                     self.view.frame.size.width/2
                                     -statusImage.size.width/2, 
                                     self.view.frame.size.height/1.2
                                     -statusImage.size.height/1.2, 
                                     statusImage.size.width, 
                                     statusImage.size.height);

    //Start the animation
    [activityImageView startAnimating];


    //Add your custom activity indicator to your current view
    [self.view addSubview:activityImageView];

    self.timer = [NSTimer scheduledTimerWithTimeInterval:(1.0/2.0)
                                                  target:self
                                                selector:@selector(loading)
                                                userInfo:nil
                                                 repeats:YES];

}

- (void)loading {

    if (!self.webView.loading) {
        [activityImageView stopAnimating];
        activityImageView.hidden = 1;
    } else {
        [activityImageView startAnimating];
    }

}