UIBarButtonItem customView action

[jchoi1009]

Hello,

I have a UIToolbar filled with 5 UIBarButtonItems.
For the UIBarButtonItems, I am using a custom view like this:

button = [[UIBarButtonItem alloc] initWithCustomView:[[UIImageView alloc] initWithImage:image]];
button.action = @selector(myaction);
button.target = self;

The problem is, clicking on this button doesn't trigger myaction.
How do you use a custom view for UIBarButtonItem and make action work?

Or yet even better, is there a way to do initWithImage for UIBarButtonItem without losing original colors?

[indiantroy]

I am not sure but you may want to check one thing.
button.action = @selector(myaction:);
Are you missing the colon at the end of myaction or it's just a typo? I think whenever you specify a function which will be called, you should have at least one argument that is sender of type id in the signature of the event handling method. Target-action pattern to be precise.

Hope this helps..

[jchoi1009]

Originally Posted by indiantroy

I am not sure but you may want to check one thing.
button.action = @selector(myaction:);
Are you missing the colon at the end of myaction or it's just a typo? I think whenever you specify a function which will be called, you should have at least one argument that is sender of type id in the signature of the event handling method. Target-action pattern to be precise.

Hope this helps..

I don't have the colon but it is not necessary. Using button image or title instead of customView works fine.

[Janek2004]

Originally Posted by jchoi1009

I don't have the colon but it is not necessary. Using button image or title instead of customView works fine.

Hey Anybody solve that problem?
I am struggling with that for last 3 hours...

[Janek2004]

Originally Posted by Janek2004

Hey Anybody solve that problem?
I am struggling with that for last 3 hours...

Ok I gave up with adding the actions to the UIBarButtonItems in that way. Instead of that I am adding buttons (UIButton) than calling [buttonMenu addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];
and finally adding it to the toolbar and everything works great.
Except:
I was trying to automate the process. I have four buttons that have the same size and they will have the same selector. So I have created two arrays, first storing the buttons and the second one storing the images. Than I wanted to set up all buttons inside a for loop:

NSArray*buttonsArray=[[NSArray alloc]initWithObjects:buttonBack, buttonMenu, buttonNext, buttonHome, nil];
NSArray*imagesArray=[[NSArray alloc]initWithObjects:back.image, menu.image, next.image, home.image, nil];

for (int i=0;i<buttonsArray.count;i++)
{
[[buttonsArray objectAtIndex:i] setBounds:CGRectMake(0,0,65.0,30.0)];
[[buttonsArray objectAtIndex:i] addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];
[[buttonsArray objectAtIndex:i] setImage:[imagesArray objectAtIndex:i] forState:UIControlEventTouchUpInside];
}


//Creating custom bar buttons

/* I tried also to pull the button from the array
backItem = [[UIBarButtonItem alloc] initWithCustomView:[buttonArray objectAtIndex:0]];
*/

backItem = [[UIBarButtonItem alloc] initWithCustomView:buttonBack];
homeItem = [[UIBarButtonItem alloc] initWithCustomView:buttonHome];
menuItem = [[UIBarButtonItem alloc] initWithCustomView: buttonMenu];
nextItem = [[UIBarButtonItem alloc] initWithCustomView:buttonNext];

UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemF lexibleSpace target:nil action:nil];
//Adding the items to the array:

tabBarItems=[[NSArray alloc]initWithObjects:backItem, flexItem,homeItem, menuItem, flexItem, nextItem, nil];
[self.toolBar setItems:tabBarItems animated:YES];

and ... it doesn't work. Any ideas why?

It works when I don't use for loop and write everything step by step like:
UIButton * buttonNext = [UIButton buttonWithType:UIButtonTypeCustom];
buttonNext.bounds = CGRectMake(0, 0, 65.0, 30.0);
[buttonNext setImage:next.image forState:UIControlStateNormal];
[buttonNext addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];

Regards,
Janek

[fiftysixty]

Originally Posted by Janek2004

Ok I gave up with adding the actions to the UIBarButtonItems in that way. Instead of that I am adding buttons (UIButton) than calling [buttonMenu addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];
and finally adding it to the toolbar and everything works great.
Except:
I was trying to automate the process. I have four buttons that have the same size and they will have the same selector. So I have created two arrays, first storing the buttons and the second one storing the images. Than I wanted to set up all buttons inside a for loop:

NSArray*buttonsArray=[[NSArray alloc]initWithObjects:buttonBack, buttonMenu, buttonNext, buttonHome, nil];
NSArray*imagesArray=[[NSArray alloc]initWithObjects:back.image, menu.image, next.image, home.image, nil];

for (int i=0;i<buttonsArray.count;i++)
{
[[buttonsArray objectAtIndex:i] setBounds:CGRectMake(0,0,65.0,30.0)];
[[buttonsArray objectAtIndex:i] addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];
[[buttonsArray objectAtIndex:i] setImage:[imagesArray objectAtIndex:i] forState:UIControlEventTouchUpInside];
}


//Creating custom bar buttons

/* I tried also to pull the button from the array
backItem = [[UIBarButtonItem alloc] initWithCustomView:[buttonArray objectAtIndex:0]];
*/

backItem = [[UIBarButtonItem alloc] initWithCustomView:buttonBack];
homeItem = [[UIBarButtonItem alloc] initWithCustomView:buttonHome];
menuItem = [[UIBarButtonItem alloc] initWithCustomView: buttonMenu];
nextItem = [[UIBarButtonItem alloc] initWithCustomView:buttonNext];

UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemF lexibleSpace target:nil action:nil];
//Adding the items to the array:

tabBarItems=[[NSArray alloc]initWithObjects:backItem, flexItem,homeItem, menuItem, flexItem, nextItem, nil];
[self.toolBar setItems:tabBarItems animated:YES];

and ... it doesn't work. Any ideas why?

It works when I don't use for loop and write everything step by step like:
UIButton * buttonNext = [UIButton buttonWithType:UIButtonTypeCustom];
buttonNext.bounds = CGRectMake(0, 0, 65.0, 30.0);
[buttonNext setImage:next.image forState:UIControlStateNormal];
[buttonNext addTarget:self action:@selector(navigateTo forControlEvents:UIControlEventTouchUpInside];

Regards,
Janek

I struggled with this problem too once, and the solution I found was to make a UISegmentedControl with the custom image you want, and then setting the properties of the segmented control and creating a UIBarButtonItem with the segmented control as the custom view. The problem is still that it doesn't look like UIBarButtonItem with a string title, the background color is not the same, but it's better than using UIButton I think. Anyway, here is the code:

UIImage *customIcon = [UIImage imageNamed:@"yourImagepng"];
UISegmentedControl *customButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:customIcon, nil]];
customButton.segmentedControlStyle = UISegmentedControlStyleBar;
customButton.momentary = YES;
[customButton addTarget:self action:@selector(myAction:) forControlEvents:UIControlEventAllEvents];
customBarButton = [[UIBarButtonItem alloc] initWithCustomView:customButton];

For some reason you have to use UIControlEventAllEvents for the segmented control, using UIControlEventTouchUpInside doesn't work.

[officevalentin]

Originally Posted by fiftysixty

I struggled with this problem too once, and the solution I found was to make a UISegmentedControl with the custom image you want, and then setting the properties of the segmented control and creating a UIBarButtonItem with the segmented control as the custom view. The problem is still that it doesn't look like UIBarButtonItem with a string title, the background color is not the same, but it's better than using UIButton I think. Anyway, here is the code:

UIImage *customIcon = [UIImage imageNamed:@"yourImagepng"];
UISegmentedControl *customButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:customIcon, nil]];
customButton.segmentedControlStyle = UISegmentedControlStyleBar;
customButton.momentary = YES;
[customButton addTarget:self action:@selector(myAction:) forControlEvents:UIControlEventAllEvents];
customBarButton = [[UIBarButtonItem alloc] initWithCustomView:customButton];

For some reason you have to use UIControlEventAllEvents for the segmented control, using UIControlEventTouchUpInside doesn't work.

UIImage *customIcon = [UIImage imageNamed:imgName];
UISegmentedControl *customButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:customIcon, nil]];
customButton.segmentedControlStyle = UISegmentedControlStyleBar;
customButton.momentary = YES;
[customButton addTarget:self action:@selector(buttonHint forControlEvents:UIControlEventAllEvents];
UIBarButtonItem *customBarButton = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.rightBarButtonItem = customBarButton;
//change the button frame
customBarButton.customView.frame = CGRectMake(0,0,40,0);
[customButton release];
[customBarButton release];

[sreichert]

Guys,
No need for work-arounds here, the answer is right in the property name, "customview".

Just do the following:

1. Create a UIView with the required frame parameters, i.e 40x40
2. Create a UIImageView initialized with the desired UIImage
3. Create a blank UIButton, but set its frame to that of the UIView. set the action and target on the button - the action should be the desired function call.
4. Add The imageview and UIButton to the UIView
5. Set the UIView to the customview property of the nav button, and you should be all set.

[risma]

Originally Posted by sreichert

Guys,
No need for work-arounds here, the answer is right in the property name, "customview".

Just do the following:

1. Create a UIView with the required frame parameters, i.e 40x40
2. Create a UIImageView initialized with the desired UIImage
3. Create a blank UIButton, but set its frame to that of the UIView. set the action and target on the button - the action should be the desired function call.
4. Add The imageview and UIButton to the UIView
5. Set the UIView to the customview property of the nav button, and you should be all set.

can you show me the code, cause i try your advice, but the nav button is not show anymore...

[ali.m.habib]

Originally Posted by officevalentin

UIImage *customIcon = [UIImage imageNamed:imgName];
UISegmentedControl *customButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:customIcon, nil]];
customButton.segmentedControlStyle = UISegmentedControlStyleBar;
customButton.momentary = YES;
[customButton addTarget:self action:@selector(buttonHint forControlEvents:UIControlEventAllEvents];
UIBarButtonItem *customBarButton = [[UIBarButtonItem alloc] initWithCustomView:customButton];
self.navigationItem.rightBarButtonItem = customBarButton;
//change the button frame
customBarButton.customView.frame = CGRectMake(0,0,40,0);
[customButton release];
[customBarButton release];

how change the image of this uibarbutton bar on click, because the evenet will be fire with UISegmentedControl

[jazztpt]

Originally Posted by sreichert

Guys,
No need for work-arounds here, the answer is right in the property name, "customview".

Just do the following:

1. Create a UIView with the required frame parameters, i.e 40x40
2. Create a UIImageView initialized with the desired UIImage
3. Create a blank UIButton, but set its frame to that of the UIView. set the action and target on the button - the action should be the desired function call.
4. Add The imageview and UIButton to the UIView
5. Set the UIView to the customview property of the nav button, and you should be all set.

Even simpler: UIButton is a subclass of UIView. Create your button, add your action and target, and use that button as the custom view.

You can also do this in Interface Builder -- drag a button onto the main object window (not a subview to any of your views), drag the Touch UpInside event to the appropriate selector in your File's Owner, and then in viewDidLoad:

self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:myButton] autorelease];

[Meredi86]

slight side issue, but this is for an ipad right? im pretty sure the docs say that there is a max limit for the toolbar on both iOS devices and, i could be wrong, but i believe that 5 is to many for the iPhone, or is it just on the max?

[roocell]

Originally Posted by jazztpt

Even simpler: UIButton is a subclass of UIView. Create your button, add your action and target, and use that button as the custom view.

You can also do this in Interface Builder -- drag a button onto the main object window (not a subview to any of your views), drag the Touch UpInside event to the appropriate selector in your File's Owner, and then in viewDidLoad:

self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloc] initWithCustomView:myButton] autorelease];

Thanks so much. I've been doing this for a while now and this is the first time I've come across the method to use IB to create an object, but not put it in any views. This is *way* easier than doing things programmatically!

I've used IB a lot, but always for things in my views. Other things like UIActivityIndicators I've created programtically, which is a PITA. This method is a snap!