Question

I’ve subclassed UIBarButtonItem and am trying to make a button which dispays a refresh image normally, but an activity spinner when loading. The problem I have is I can’t get the bordered style to display a custom view inside. It just doesn’t appear.

This is my code (from my UIBarButtonItem subclass’s constructor):

self = [super initWithTitle:@"" style:UIBarButtonItemStyleBordered target:self action:nil];
UIView *viwInner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 24,24)];
[self.customView addSubview:viwInner];

self.btnStandard = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btnStandard setFrame:CGRectMake(0, 0, 24,24)];
UIImage *initialImage = [[UIImage imageNamed:@"refresh_24.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateNormal];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateHighlighted];
[self.btnStandard setBackgroundImage:initialImage forState:UIControlStateSelected];
[self.btnStandard addTarget:self action:@selector(didTapInitialButton:) forControlEvents:UIControlEventTouchUpInside];
[viwInner addSubview:self.btnStandard];

self.btnLoading = [UIButton buttonWithType:UIButtonTypeCustom];
[self.btnLoading setFrame:CGRectMake(0, 0, 24,24)];
self.loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActionSheetStyleBlackOpaque];
[self.loadingView setHidesWhenStopped:true];
[self.loadingView stopAnimating];
[self.btnLoading addSubview:self.loadingView];
[self.btnLoading addTarget:self action:@selector(didTapAbortButton:) forControlEvents:UIControlEventTouchUpInside];
[viwInner addSubview:self.btnLoading];

return self;

Is there a reason this isn’t working?

Answer 1

In iOS5, there is a trick to get an animated image into a UIBarButtonItem and maintain the UIBarButtonItemStyleBordered:

UIImage *image = [UIImage animatedImageNamed:@"refresh-" duration:1.f];
self.button = [[UIBarButtonItem alloc] initWithImage:image
                                               style:UIBarButtonItemStyleBordered 
                                              target:self
                                              action:@selector(doSomething:)];

Then, create a set of images, one image for each frame of the animation, and name then “refresh-0.png”, “refresh-1.png” and so forth:

When you want to stop the animation, replace the image of the button with a static version:

self.button.image = [UIImage imageNamed:@"refresh-0.png"];

It’s still a significant hassle having to create all these images yourself, but it’s probably more consistent than creating your own Button-border background.