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];

Choriocarcinoma

I was never able to get it to work with the toolbar. I just couldn't figure out how to get rid of the mysterious spaces. I ended up switching over to using a UITabBar instead and it has met my needs so far. – Choriocarcinoma

Answer 1

If you're looking for is to layout UIBarButtonItems with less than the default or even 0 vertical spacing(like me) that's automaticall done for you buy UIToolBar; Here's what I would recommend:

UIToolBar layouts it's items privately. Apple engineers will never really expect developers to overwrite that. Using a fixed spaces to overwrite the default 10Point horizontal spacing is not enough. Since UIToolbar layout its items at least 10 point apart, you set the width of these UIBarButtonItems to -10 in order to get no spacing as the following code shows:

CGFloat toolbarHeight = 44.0;
CGRect toolbarFrame = CGRectMake(0,0, self.view.bounds.size.width, toolbarHeight);
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:toolbarFrame];

UIBarButtonItem* noSpace = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil] autorelease];
UIBarButtonItem* noSpace1 = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil] autorelease];

noSpace.width = -10.0;
noSpace1.width = -10.0;

[toolbar setItems:[NSArray arrayWithObjects:
                   [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:nil action:nil] autorelease],
                   noSpace,
                   [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemTrash target:nil action:nil] autorelease],
                   noSpace1,
                   [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCompose target:nil action:nil] autorelease]
                   , nil]];

Yasui

Frustrating that Apple doesn't provide a way to do this in a more elegant way – Protonema

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.

Flaunch

Answer 3

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.

Flaring

This doesn't with the spacing on the left and right, only inter-button spacing. – Ledesma

Answer 4

Well, this is a really old question, but I just ran into the same issue and managed to solve it.

The magic password is setting the UIBarButtonItem style to be UIBarButtonItemStyleBordered.

UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:aView];
item.style = UIBarButtonItemStyleBordered;

Thats it...

Ledesma

Note, if you set customview for UIBarButtonItem then you'll lose call to its target and action. In that case to add target and action, use UIButton as custom view and add target and action on it, or if you're using an UIImageView then add UITapGestureRecognizer on it. – Kwok

Answer 5

It is possible to add a fixed space item with a negative width between the items to compensate the spacing.

UIBarButtonItem *fixedSpace = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil] autorelease];
fixedSpace.width = -12.0f;

Ragouzis

Answer 6

In between two bar button you can take the  UIBarButtonSystemItemFixedSpace. And adjust the width.It has worked for me.

Tildatilde

Answer 7

I met the same issue. Finally, I solved this by subclassing UIToolbar and override the layout subviews method.

- (void)layoutSubviews {

  [super layoutSubviews];

  if (leftItem_ && leftItem_.customView
      && [leftItem_.customView isKindOfClass:[UIButton class]]) {
    CGRect newFrame = leftItem_.customView.frame;
    newFrame.origin.x = 0;   // reset the original point x to 0; default is 12, wired number
    leftItem_.customView.frame = newFrame;    
  }

  if (rightItem_ && rightItem_.customView
      && [rightItem_.customView isKindOfClass:[UIButton class]]) {
    CGRect newFrame = rightItem_.customView.frame;
    newFrame.origin.x = self.frame.size.width - CGRectGetWidth(newFrame);
    rightItem_.customView.frame = newFrame;
  }

}

Palmy

Answer 8

I was able to solve this in Xcode4 by putting a flexible space as the left most item, and then another one as the right most item.

Nally

This question is still relevant, and this is the answer as of now (3 years later!) – Agitation

Answer 9

I faced the same problem today and solved it with an easy way , So sharing.

You can take a new UIView having the same no. of button on the toolbar you want to show . and then just set the size according to the toolbar.

In short the normal buttons ABOVE the toolbar will look like toolbar buttons.

Sop

Answer 10

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.

Renvoi

Thanks for your quick reply. Unfortunately this didn't work for me. The images appear as white boxes (whereas they appear correctly with the above method) and the gaps are still there, even when I change the UIBarButtonItem width property. I checked again to make sure I'm not doing anything else with the toolbar that could be messing things up and I'm not. – Choriocarcinoma

I edited this a bit later, make sure you're using the [UIImage imageNamed:@"]; Even if you're still having a problem, the way this should be done is like I showed you, not with a UIButton. If you have two barbuttonitems, I think they will go on either end of the toolbar, I think they automatically space themselves out. You might want to try using an IB file to get your interface all laid out and then code it, making sure to set all the properties as they are in the nib. – Renvoi

Yep, I'm using [UIImage imageNamed...]. The problem is that this method takes only the alpha of the image and I want to use color images. The second issue is that the gaps still occur even when I add five items, causing the 5th to end up partly off the right side of the toolbar. Is there any way to remove these gaps altogether? – Choriocarcinoma

Its hard to answer when I don't really see what you're talking about.. could you show me a picture of what it looks like? – Renvoi

It is written on the documentations that the buttons just considers the alpha channel, not the colors. – Meliamelic