Add UIActivityIndicatorView into UIBarButton

Question

How do I add a UIActivityIndicatorView spinner circle into a UIBarButton, so that when a user taps on one of those buttons on the navigation bar, they see a spinner while the loading takes place?

score 49 · Accepted Answer · edited Oct 08 '15 at 11:22

49

If you're trying to show the activity wheel in a navigation bar button (e.g. you might have a refresh button on your navbar) - you can create a new UIBarButtonItem with a custom view being the UIActivityIndicatorView:

Objective-C

uiBusy = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
uiBusy.hidesWhenStopped = YES;
[uiBusy startAnimating];
[self.navigationItem.rightBarButtonItem initWithCustomView:uiBusy];

Swift

let uiBusy = UIActivityIndicatorView(activityIndicatorStyle: .White)
uiBusy.hidesWhenStopped = true
uiBusy.startAnimating()
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: uiBusy)

This overwrites your rightBarButtonItem with the spinning wheel. When you're done, just recreate the rightBarButtonItem.

edited Oct 08 '15 at 11:22

Drenmi

8,492
4
42
51

answered Feb 01 '11 at 20:22

ferdil

1,259
11
24

7

`[self.navigationItem.rightBarButtonItem initWithCustomView:uiBusy];` seems dodgy to me. I would expect `self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:uiBusy];` as per @emotality’s answer. – Zev Eisenberg Sep 01 '15 at 19:40
1

For the record: You usually want to set `uiBusy.activityIndicatorViewStyle = .gray` – Jeremy Sep 06 '17 at 11:25
I use a computed property to access uiBusy: `private var uiBusy: UIActivityIndicatorView { if let busyView = self.navigationItem.rightBarButtonItem?.customView as? UIActivityIndicatorView { return busyView } else { let uiBusy = UIActivityIndicatorView(activityIndicatorStyle: .white) uiBusy.hidesWhenStopped = true uiBusy.activityIndicatorViewStyle = .gray self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: uiBusy) return uiBusy } }` – Jeremy Sep 06 '17 at 11:26

score 6 · Answer 2 · answered Feb 21 '13 at 08:00

activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
activityIndicator.hidesWhenStopped = YES;
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:activityIndicator];

Place the following where ever is needed:

[activityIndicator startAnimating];
[activityIndicator stopAnimating];

score 2 · Answer 3 · answered Nov 12 '09 at 07:59

2

Actually activity indicator is not added as toolbar item. It's a subview of current view.


    UIActivityIndicatorView *act = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    [act setCenter:CGPointMake(20, 20)];
    [act startAnimating];
    [self.view addSubview:act];

Remember to release it in -(void)dealloc.

answered Nov 12 '09 at 07:59

Chilly Zhong

16,763
23
77
103

More information about how to use activity indicator is here: http://stackoverflow.com/questions/593234/how-to-use-activity-indicator-view-on-iphone – Chilly Zhong Nov 12 '09 at 08:03

score 0 · Answer 4 · answered Apr 26 '14 at 05:54

Use this Methods

-(void)startAniatingActivityIndicator{
@try {
    activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
    activityIndicator.frame = CGRectMake(self.window.frame.size.width-30, 32.5, activityIndicator.bounds.size.width, activityIndicator.bounds.size.height);
    [self.window addSubview:activityIndicator];
    [activityIndicator startAnimating];
    [self.window bringSubviewToFront:activityIndicator];
}
@catch (NSException *exception) {

}
@finally {

}

}

-(void)stopAniatingActivityIndicator{
[activityIndicator stopAnimating];
[activityIndicator removeFromSuperview];
activityIndicator = nil;

}

mahboudz · Answer 5 · 2009-11-12T06:17:51.720

-1

UIActivityIndicatorView is a type of view. Set its frame to be within your button and use -addSubview to add it to the view hierarchy of the UIBarButton.

I'm oversimplifying, since you have to try to make it fit the space (possibly by scaling) and center it...

edited Nov 12 '09 at 06:17

answered Nov 12 '09 at 05:38

mahboudz

39,196
16
97
124

score -2 · Answer 6 · answered Nov 12 '09 at 05:41

-2

pseudocode, i'm not going to check this in Xcode, but something like this should work:

UIActivityIndicatorView *act = [[UIActivityIndicatorView alloc] init];
act.frame = CGMakeRect(3,3,25,25);
[myBarButton addSubview:act];
[act release];

answered Nov 12 '09 at 05:41

Kenny Winker

11,919
7
56
78

`UIBarButtonItem` isn't a `UIView` subclass and doesn't have `addSubview:`. You should do something like `UIBarButtonItem *myBarButton = [[UIBarButtonItem alloc] initWithCustomView:act];` instead or `myBarButton.customView = act;`. – Sam Soffes Feb 23 '10 at 16:40

Add UIActivityIndicatorView into UIBarButton

6 Answers6

Linked