CODEWITHSUNDEEP
iphoneuser-interfaceuitoolbar
greg
greg

Reputation:

How do I remove spaces in UIToolbar between custom views?

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

Upvotes: 12

Views: 10745

Answers (10)

Puru
Puru

Reputation: 32

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.

Upvotes: 0

kumar123
kumar123

Reputation: 889

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

Upvotes: 2

Onedayitwillmake
Onedayitwillmake

Reputation: 711

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.

enter image description here
enter image description here

Upvotes: 1

amosel
amosel

Reputation: 680

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

Upvotes: 17

Fourj
Fourj

Reputation: 1897

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

}

Upvotes: 1

Stephan Michels
Stephan Michels

Reputation: 1072

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;

Upvotes: 2

Joshua Weinberg
Joshua Weinberg

Reputation: 28688

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...

Upvotes: 2

Zyrich
Zyrich

Reputation: 21

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.

Upvotes: 2

imnk
imnk

Reputation: 4372

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.

Upvotes: 5

mk12
mk12

Reputation: 26374

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.

Upvotes: 0

Related Questions