How do I remove spaces in UIToolbar between custom views?

Question

I'm trying to create a UIToolbar with 5 buttons using custom images. The way I'm doing this is by creating buttons of type UIButtonTypeCustom, then creating UIBarButtonItems from these, then adding these to the toolbar with setItems:animated:. However, this adds spaces between the images which cause the 5th image to end up half off the right side of the toolbar. How do I get rid of these spaces? I've tried everything I can think of.

Help is greatly appreciated.

Here's some example code as to how I'm going about this:

UIButton *button;
UIBarButtonItem *barButton1,*barButton2;

button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"image1.png"] forState:UIControlStateNormal];
button.bounds = CGRectMake(0,0,button.imageView.image.size.width, button.imageView.image.size.height);
[button addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
barButton1 = [[UIBarButtonItem alloc] initWithCustomView:button];


button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"bart_tb.png"] forState:UIControlStateNormal];
button.bounds = CGRectMake(0,0,button.imageView.image.size.width, button.imageView.image.size.height);
[button addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
barButton2 = [[UIBarButtonItem alloc] initWithCustomView:button];

NSArray *items = [NSArray arrayWithObjects: barButton1, barButton2, nil];
[self.toolbar setItems:items animated:NO];

Answer 1

UIBarButtonItem *barButton1,*barButton2;

barButton1 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"image1.png"] style:UIBarButtonItemStylePlain
    target:self action:@selector(action:)];

barButton2 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"bart_tb.png"] style:UIBarButtonItemStylePlain
    target:self action:@selector(action:)];

NSArray *items = [[NSArray alloc] initWithObjects: barButton1, barButton2, nil];
[barButton1 release];
[barButton2 release];
[self.toolbar setItems:items animated:NO];
[items release];

Do it like that.. and if you want to change the width of the buttons, set the width property of the UIBarButtonItem objects. The default value of width is 0, which makes it big enough exactly to fit its image/title.

Hope that helps.

Answer 2

If you add spacers in between each item, the spacing should work itself out. In your case you might like to put a spacer either side of the two buttons and one in between. You can do this like so:

UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

NSArray *items = [[NSArray alloc] initWithObjects: spacer, barButton1, spacer, barButton2, spacer, nil];

[spacer release];

Note that you can also use UIBarButtonSystemItemFixedSpace but you would need to specify it's 'width' property explicitly. Whereas UIBarButtonSystemItemFlexibleSpace works this out for you it would seem.

Answer 3

Hey Guys!

I have solved this problem, you should use flexible item before and after each button.

    UIBarButtonItem *flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];

Just add the flexibleSpace to your array of items which gonna be set in toolbar.

p.s. I have almost kill myself before get rid of this and have tried all type of solutions including using of other bars instead of UIToolBar.