UINavigationController Toolbar - Adding status text with UIActivityIndicatorView

10,930

Instead of adding the activityindicator and the label as separate views, create a single composite view that contains both of them and add that composite view to your toolbar.

Create a class that derives from UIView, override initWithFrame and add this code:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        [self configureView];
    }
    return self;
}

-(void)configureView{

    self.backgroundColor = [UIColor clearColor];

    UIActivityIndicatorView* activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];        
    activityIndicator.frame = CGRectMake(0, 0, self.frame.size.height, self.frame.size.height );
    activityIndicator.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    activityIndicator.backgroundColor = [UIColor clearColor];

    [self addSubview:activityIndicator];

    CGFloat labelX = activityIndicator.bounds.size.width + 2;

    UILabel* label = [[UILabel alloc] initWithFrame:CGRectMake(labelX, 0.0f, self.bounds.size.width - (labelX + 2), self.frame.size.height)];
    label.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    label.font = [UIFont boldSystemFontOfSize:12.0f];
    label.numberOfLines = 1;

    label.backgroundColor = [UIColor clearColor];
    label.textColor = [UIColor whiteColor];
    label.text = @"Loading..";

    [self addSubview:label];
}

You'll also have to expose methods for startAnimating, stopAnimating and one to set the text of the label, but hopefully you get the idea.

To add it to your toolbar, initialize with the following:

UIProgressViewWithLabel * pv = [[UIProgressViewWithLabel alloc] initWithFrame:CGRectMake(0,0,150,25)];

Play around with the width to make it fit..

Share:
10,930
Lee
Author by

Lee

Hello!

Updated on June 05, 2022

Comments

  • Lee
    Lee almost 2 years

    I would like to add a loading activity indicator to my app similar to the one in the mail app with status text to the right. I am using a UINavigationController, so I know I need to set the toolbarItems array on each view where I want it to be displayed. I can add the activity indicator and it does show up, but when I try to add the text field using the code below the text does not show. Is there a way to create a container programmatically that has both the status text and the UIActivityIndicatorView that will show up if added to the toolbarItems array.

    UIBarButtonItem *textFieldItem = [[[UIBarButtonItem alloc] initWithCustomView:textField] autorelease];
    self.toolbarItems = [NSArray arrayWithObject:textFieldItem];
    

    UPDATE: I created a class derived from UIView based on the code from pdriegen.
    I also added this code to viewDidLoad in my controller

    UIProgressViewWithLabel * pv = [[UIProgressViewWithLabel alloc] init];
    
    UIBarButtonItem * pvItem = [[UIBarButtonItem alloc] initWithCustomView:pv];
    
    [self setToolbarItems:[NSMutableArray arrayWithObject:pvItem]];
    

    Currently nothing shows up in the toolbar. What am I missing?

  • Lee
    Lee almost 12 years
    Thanks, this looks like exactly what I need but I still can't get it to show up. I updated my question based on your response.
  • Lee
    Lee almost 12 years
    If I start animation on the progress view it shows up, but still no label.
  • pdriegen
    pdriegen almost 12 years
    @Lee I've edited my answer by adding an additional code line at the end that should help you.
  • Lee
    Lee almost 12 years
    Perfect! No idea how long that would have take me to figure out on my own. Thanks.