How can I create a custom UIToolbar like component in a UITableViewController?

Question

I have a UITableViewController. I want a "toolbar-ish" component at the bottom.

I started by using a background image and a button. In interface builder, I added them to the bottom of the iPhone screen. The problem I ran into was that the background image and button scrolled with the table. I obviously need this fixed at the bottom.

Not finding too much direction online, I decided to customize a UIToolbar to look how I want since the position is fixed by default. In my initWithNibName for my UITableViewController, I have:

UIImage *shuffleButtonImage = [UIImage imageNamed:@"shuffle_button.png"];
        NSArray* toolbarItems = [NSArray arrayWithObjects:
                                 [[UIBarButtonItem alloc]   initWithImage:shuffleButtonImage  
                                                            style:UIBarButtonItemStylePlain
                                                            target:self
                                                            action:@selector(push:)],
                                 nil];
        [toolbarItems makeObjectsPerformSelector:@selector(release)];
        self.toolbarItems = toolbarItems;

The problem I am running into now is that the "shuffleButtonImage" is not showing up properly. The shape of the button shows up fine but it is colored white and therefore does not look like the image.

Does anyone know why a "white image" would be showing instead of the actual image?

Also does it sound like a good idea to customize a UIToolbar or is there a simple way to ensure a fixed position "toolbar-ish" component.

To reiterate - my "toolbar-ish" component only needs to be one button at the button of my UITableView. The single button has a gradient color background that I create with an image.

Answer 1

Your image may be showing up blank because it's not being found in your resources. Put a breakpoint after your definition of shuffleButtonImage and check it's not nil.

Answer 2

From the description of the "image" parameter in the documentation for the initWithImage:style:target:action: method of the UIBarButtonItem class:

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points. The alpha values in the source image are used to create the images—opaque values are ignored.

Basically, the image you provide is used as a mask to create an outline/shadow for the actual button image. I do not believe you can change this behavior for a UIBarButtonItem.

As an alternative, you can create a UIButton (with your color image) and then set it as the custom view for your UIBarButtonItem, as suggested here. If you go that route, setting the bounds of the UIButton to match the bounds of the UIBarButtonItem might also be necessary (see this discussion).