UIBarButton with CustomView and a Border

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

It is not possible to do what you are trying to do as UIBarButtonItems (created with -initWithImage:style:target:action: or -initWithTitle:style:target:action:) don't support arbitrary views inside the button.

You could try placing the the UIActivityIndicatorView on top of a image that simulates the border of a button. You could then use initWithCustomView: to add the view to your button.

Hope this helps.

Answer 2

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.

Answer 3

To accomplish this using UIActivityIndicatorView, rather than your replacement for it, you have to render the button border yourself. What I do is set the UIBarButtonItem's customView to a UIImageView containing the border, and add the activity view as a subview of that image.

That leaves you with the problem of getting the border image. If you only need it on one bar color, then you can just crop it out of a simulator screenshot; if you need it on multiple bar colors, then you'll want to get not just border pixels, but also border transparency, for which I wrote a Python script.