Activity indicator for button

Question

I have a grid view with images downloaded from internet . When i clicked to one button to get in that view it's take time and the first screen is frozen ,the second view is displayed only when all the images are downloaded. How can i put an activity indicator on the time in which I have to waiting ?

Answer 1

Add the activity view to your cell/view like so:

UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
spinner.frame = CGRectMake(0, 0, 24, 24);
[self.view addSubview:spinner];
[spinner startAnimating];

Call [spinner stopAnimating]; and remove it from it's superView when the NSURLConnection delegate methods inform you they are finished.

Also ensure you only call the above code (which interacts with the UI) on the main thread.

Answer 2

First you don't need to put activity indicator and wait to statically download all images .. just imagine if there is 1000 pictures and the user must wait till download is done to became start using your application.

I'll assume this gridView is tableView because in mobile design world gridView doesn't exits.

View Did Load

- (void)viewDidLoad {

    [super viewDidLoad];

    array = [[NSMutableArray alloc]initWithObjects:@"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg", @"http://1hdwallpapers.com/wallpapers/creativity_water_spray_drops_flower_rose_desktop_images.jpg" , @"http://i.telegraph.co.uk/multimedia/archive/02848/wellcome-photo-13__2848386k.jpg" ,@"http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" , @"http://www.hdwallpapersimages.com/wp-content/uploads/images/Frozen-Logo-Symbol-HD-Images.jpg" , @"http://images.visitcanberra.com.au/images/canberra_hero_image.jpg" , @"http://www.desktopwallpaperhd.net/wallpapers/21/7/wallpaper-sunset-images-back-217159.jpg" ,    nil];

    tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20) style:UITableViewStylePlain];

// DO NOT FORGET UITableViewDelegate, UITableViewDataSource protocols
    [tableView setDelegate:self];
    [tableView setDataSource:self];

    [self.view addSubview:tableView];
}

Rows count:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [array count];
}

Cell configuration

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

//You need a global declaration for cell

    cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"CellID"];

        [self getImagesAsyncFor:indexPath];
    return cell;
}

Now getImagesAsync method

-(void)getImagesAsyncFor:(NSIndexPath *)indexPath_ {

    // Fetch using GCD
    dispatch_queue_t downloadThumbnailQueue = dispatch_queue_create("Get Photo Thumbnail", NULL);

    dispatch_async(downloadThumbnailQueue, ^{

        UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:[array objectAtIndex:indexPath_.row]]]];

        dispatch_async(dispatch_get_main_queue(), ^{
            cell = [self->tableView cellForRowAtIndexPath:indexPath_]; // create a copy of the cell to avoid keeping a strong pointer to "cell" since that one may have been reused by the time the block is ready to update it.
            if (cell != nil) {

                [cell.imageView setImage:image];
                [cell setNeedsLayout];

            }
        });
    });

}

Now when you open the application you should see how images download one after one async and you still can interact with the application. After the download is finish the UI of your tableView will be updated automatically with this method: [cell setNeedsLayout];

This is the way all modern applications are build it like, facebook, twitter, google+ etc.