Showing Activity Indicator (spinner) in Table Cells
Posted on May 3, 2010 by John Muchow in User Interface
Following are two ways to display UIActivityIndicatorViews in a cell of a table view (UITableView). The first will add a spinner as an accessory view, which will display the spinner on the right of the cell. The second approach will add a spinner as a subview in the cell. The primary advantage of using a custom view is that you can display the spinner wherever you like in the cell.
UIActivityIndicator as Accessory View
The example below will add an accessory view when a row is selected through the didSelectRowAtIndexPath method.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; [activityView startAnimating]; [cell setAccessoryView:activityView]; [activityView release]; [self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES]; }
The spinner in this case appears on the far right of the cell:
UIActivityIndicator as SubView
When using a subview we have more control over size and location of the spinner. In this example I center the spinner vertically and append it at the end of the cell text:
#define SPINNER_SIZE 25 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath]; UIActivityIndicatorView *spinner = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; // Get center of cell (vertically) int center = [cell frame].size.height / 2; // Size (width) of the text in the cell CGSize size = [[[cell textLabel] text] sizeWithFont:[[cell textLabel] font]]; // Locate spinner in the center of the cell at end of text [spinner setFrame:CGRectMake(size.width + SPINNER_SIZE, center - SPINNER_SIZE / 2, SPINNER_SIZE, SPINNER_SIZE)]; [[cell contentView] addSubview:spinner]; [spinner startAnimating]; [spinner release]; [self.tableView deselectRowAtIndexPath:[self.tableView indexPathForSelectedRow] animated:YES]; }
Related posts:
- Adding an Activity Indicator (Spinner) to Navigation Bar
- Creating Unique Looking Tables with Custom Cells
- Showing Network Activity When there Isn’t Any
Thanks for this John. You have once again saved me time and taught me something useful.
[Reply]
Thanks for the tutorial.. but i have a question… how do I STOP / Remove the activity indicator thereafter?
[Reply]
John Muchow Reply:
January 19th, 2011 at 7:54 am
[spinner stopAnimating] will stop the spinner.
[Reply]
Jesper Reply:
April 8th, 2012 at 7:21 am
You remove the activity indicator by calling [cell setAccessoryView:nil];
[Reply]
SPINNER_SIZE: How do i do this? Thanks in advance.
[Reply]
John Muchow Reply:
October 29th, 2011 at 8:41 am
There are three possible values for the indicator: UIActivityIndicatorViewStyleWhiteLarge, UIActivityIndicatorViewStyleWhite and UIActivityIndicatorViewStyleGray, which are defined in the UIActivityIndicatorView Class Reference.
[Reply]