Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Color image on a UIBarButtonItem on a UIToolBar?

60day60day Posts: 6New Users
edited April 2011 in iPhone SDK Development
Is there anyway to put a color image on a UIBarButtonItem that is on a UIToolBar? Normally if you put a color image it just creates a white mask.

My end goal is to have a button on a UIToolBar with a color image on it. Would love to know if there is a way to do it with a UIBarButtonItem, some other type of button, or a work around.

Thanks.
Post edited by 60day on

Replies

  • sindhutiwarisindhutiwari Posts: 547Registered Users
    edited November 2009
    put the tool bar .. take a normal button not the tool bar button .. assign the image .. place it on tool bar ..

    its the worst solution ..

    experts will help u out in this ..
    60day wrote: »
    Is there anyway to put a color image on a UIBarButtonItem that is on a UIToolBar? Normally if you put a color image it just creates a white mask.

    My end goal is to have a button on a UIToolBar with a color image on it. Would love to know if there is a way to do it with a UIBarButtonItem, some other type of button, or a work around.

    Thanks.
    <font face="Trebuchet MS">In order to succeed, your desire for success has to be greater than your fear for failure </font>
  • Green SnailGreen Snail Posts: 1New Users
    edited November 2009
    put the tool bar .. take a normal button not the tool bar button .. assign the image .. place it on tool bar ..

    its the worst solution ..

    experts will help u out in this ..


    I used the same ugly workaround... It works but I will be very interrested for a "real" & clean solution.
  • ChrisLChrisL Posts: 580Registered Users @ @ @
    edited November 2009
    put the tool bar .. take a normal button not the tool bar button .. assign the image .. place it on tool bar ..

    its the worst solution ..

    experts will help u out in this ..

    Unfortunately, there isn't a really good way around this problem. One minor improvement/clarification to the above is that instead of adding the UIButton directly as a subview to the toolbar, you could create a UIBarButtonItem using initWithCustomView:, with the UIButton as the custom view. This way, you don't have to try and manually position the button around the existing toolbar items. You'll still need to make your button image mimic the look and feel of the toolbar buttons, though, which is annoying.

    One other point about this approach: if you do this, be sure to set the frame of the UIButton to the size of the image. Otherwise, you can run into the weird issue of being able to see the button, but not being able to tap on it, because the bounds of the button is actually initialized to (0, 0, 0, 0). I've been burned by this before.
  • 60day60day Posts: 6New Users
    edited November 2009
    Thanks guys. I was hoping there was a clean way to do this but it doesn't sound like it.

    ChrisL, I'm a little unfamiliar with custom views and setting the frame of the button to the size of the image. Understand what you're saying though. It seems to make sense. Any chance you could post sample code on how you did this? Avoiding having to manually position the button would be a big, big help.

    Think I'm going to submit this as a feature request to Apple.
  • ChrisLChrisL Posts: 580Registered Users @ @ @
    edited November 2009
    60day wrote: »
    ChrisL, I'm a little unfamiliar with custom views and setting the frame of the button to the size of the image. Understand what you're saying though. It seems to make sense. Any chance you could post sample code on how you did this? Avoiding having to manually position the button would be a big, big help.

    Sure, no problem. UIBarButtonItem is a weird class it that it can behave in different roles depending on what properties you set. It's kind of poorly named in that while it usually behaves like a button, it can also be other things, like fixed space, etc. It can also act as a container for an arbitrary UIView, which is what we want to do here; it just happens that our custom UIView is actually a UIButton.

    The code would go something like this:
    //load the image
    UIImage *buttonImage = [UIImage imageNamed:@"someImage.png"];
    	
    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    	
    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    	
    //create a UIBarButtonItem with the button as a custom view
    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    Here, I'm loading the image and creating the button programmatically (in, for example, the loadView method of the view controller), but it wouldn't make much difference if you did this part in interface builder. The important line is
    UIBarButtonItem *barItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    which creates a bar button item that acts as a container for a custom view; in this case, the custom view is button. (I'm not sure whether its possible to create a bar button item with a custom view in interface builder; I've never seen this option, but then I've never really looked for it).

    Once this is done, you'd add it to the toolbar items array, just as you would any other bar button item. If you've never done this in code, it would go something like this
    //Create an array to hold the list of bar button items
    NSMutableArray *items = [[NSMutableArray alloc] init];
    
    //add the items, including our custom button
    ...
    [items addObject:customBarItem];
    ...
    //set the items on the current toolbar
    toolbar.items = items;
    [items release];
    
    (Here, I'm assuming you have a UIToolbar called toolbar; if your toolbar is the standard toolbar that's part of a view controller, you can replace "toolbar.items" with "self.toolbarItems")

    The one catch, which I mentioned in my last post, is that you have to be sure to set the frame of the button to match the size of the image:
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    
    This is necessary because the button will only respond to UIEvents within its bounds, and if we don't set the frame, it will default to (0, 0, 0, 0). The reason I mentioned this is because even if you forget to set the frame, the button image is still drawn at its full size. This can be pretty confusing, because the rectangle in which you see the button being drawn on the screen doesn't actually match the button's frame, which means you can't interact with it even though you can see it (try it-- comment out the line that sets the frame, and you won't be able to tap the button even though it's still drawn).

    Hope that makes things more clear. Post back if anything's confusing. :)
  • 60day60day Posts: 6New Users
    edited November 2009
    ChrisL wrote: »
    Sure, no problem. UIBarButtonItem is a weird class it that it can behave in different roles depending on what properties you set. It's kind of poorly named in that while it usually behaves like a button, it can also be other things, like fixed space, etc. It can also act as a container for an arbitrary UIView, which is what we want to do here; it just happens that our custom UIView is actually a UIButton.

    The code would go something like this:
    //load the image
    UIImage *buttonImage = [UIImage imageNamed:@"someImage.png"];
    	
    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    	
    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    	
    //create a UIBarButtonItem with the button as a custom view
    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    Here, I'm loading the image and creating the button programmatically (in, for example, the loadView method of the view controller), but it wouldn't make much difference if you did this part in interface builder. The important line is
    UIBarButtonItem *barItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    which creates a bar button item that acts as a container for a custom view; in this case, the custom view is button. (I'm not sure whether its possible to create a bar button item with a custom view in interface builder; I've never seen this option, but then I've never really looked for it).

    Once this is done, you'd add it to the toolbar items array, just as you would any other bar button item. If you've never done this in code, it would go something like this
    //Create an array to hold the list of bar button items
    NSMutableArray *items = [[NSMutableArray alloc] init];
    
    //add the items, including our custom button
    ...
    [items addObject:customBarItem];
    ...
    //set the items on the current toolbar
    toolbar.items = items;
    [items release];
    
    (Here, I'm assuming you have a UIToolbar called toolbar; if your toolbar is the standard toolbar that's part of a view controller, you can replace "toolbar.items" with "self.toolbarItems")

    The one catch, which I mentioned in my last post, is that you have to be sure to set the frame of the button to match the size of the image:
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    
    This is necessary because the button will only respond to UIEvents within its bounds, and if we don't set the frame, it will default to (0, 0, 0, 0). The reason I mentioned this is because even if you forget to set the frame, the button image is still drawn at its full size. This can be pretty confusing, because the rectangle in which you see the button being drawn on the screen doesn't actually match the button's frame, which means you can't interact with it even though you can see it (try it-- comment out the line that sets the frame, and you won't be able to tap the button even though it's still drawn).

    Hope that makes things more clear. Post back if anything's confusing. :)

    Thanks. That makes sense and really helps me out. I think it will also help solve another issue I'm dealing with. Specifically I'm trying to make the titleView of the supplied self.navigationItem clickable / touchable. I think this will help me with that as well.
  • ghanalupoghanalupo Posts: 133Registered Users
    edited December 2009
  • ashish_panditaashish_pandita Posts: 9New Users
    edited January 2010
    great works perfectly.

    One thing was missing in that is adding a target for button?

    [button addTarget:self action:@selector(testar) forControlEvents:UIControlEventTouchUpInside];
  • ChrisLChrisL Posts: 580Registered Users @ @ @
    edited January 2010
    great works perfectly.

    One thing was missing in that is adding a target for button?

    [button addTarget:self action:@selector(testar) forControlEvents:UIControlEventTouchUpInside];

    You're correct -- the code above is just showing how to create the button and make it appear on the toolbar. You'll obviously need to set other properties as needed and add targets for the button to actually do anything useful.
  • ali.m.habibali.m.habib Posts: 174Registered Users
    edited January 2011
    ChrisL wrote: »
    Sure, no problem. UIBarButtonItem is a weird class it that it can behave in different roles depending on what properties you set. It's kind of poorly named in that while it usually behaves like a button, it can also be other things, like fixed space, etc. It can also act as a container for an arbitrary UIView, which is what we want to do here; it just happens that our custom UIView is actually a UIButton.

    The code would go something like this:
    //load the image
    UIImage *buttonImage = [UIImage imageNamed:@"someImage.png"];
    	
    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    	
    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    	
    //create a UIBarButtonItem with the button as a custom view
    UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    Here, I'm loading the image and creating the button programmatically (in, for example, the loadView method of the view controller), but it wouldn't make much difference if you did this part in interface builder. The important line is
    UIBarButtonItem *barItem = [[UIBarButtonItem alloc] initWithCustomView:button];
    
    which creates a bar button item that acts as a container for a custom view; in this case, the custom view is button. (I'm not sure whether its possible to create a bar button item with a custom view in interface builder; I've never seen this option, but then I've never really looked for it).

    Once this is done, you'd add it to the toolbar items array, just as you would any other bar button item. If you've never done this in code, it would go something like this
    //Create an array to hold the list of bar button items
    NSMutableArray *items = [[NSMutableArray alloc] init];
    
    //add the items, including our custom button
    ...
    [items addObject:customBarItem];
    ...
    //set the items on the current toolbar
    toolbar.items = items;
    [items release];
    
    (Here, I'm assuming you have a UIToolbar called toolbar; if your toolbar is the standard toolbar that's part of a view controller, you can replace "toolbar.items" with "self.toolbarItems")

    The one catch, which I mentioned in my last post, is that you have to be sure to set the frame of the button to match the size of the image:
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    
    This is necessary because the button will only respond to UIEvents within its bounds, and if we don't set the frame, it will default to (0, 0, 0, 0). The reason I mentioned this is because even if you forget to set the frame, the button image is still drawn at its full size. This can be pretty confusing, because the rectangle in which you see the button being drawn on the screen doesn't actually match the button's frame, which means you can't interact with it even though you can see it (try it-- comment out the line that sets the frame, and you won't be able to tap the button even though it's still drawn).

    Hope that makes things more clear. Post back if anything's confusing. :)
    I used the following code t oadd a new toolbar at the buttom but it cause system crach

    any suggestion to fix it
    	@try {
    		//create bottom toolbar using new
    		toolbar = [UIToolbar new];
    		toolbar.barStyle = UIBarStyleDefault;
    		[toolbar sizeToFit];
    		
    		//Create an array to hold the list of bar button items
    		NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:2];
    		
    		
    		//Add buttons
    		
    		//load the image
    		UIImage *buttonImage = [UIImage imageNamed:@"pan.png"];
    		//create the button and assign the image
    		UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    		[button setImage:buttonImage forState:UIControlStateNormal];
    		//set the frame of the button to the size of the image (see note below)
    		button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    		//create a UIBarButtonItem with the button as a custom view
    		WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button];
    		[items addObject:WindowWidthZoom ];
    		
    		
    		UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
    																				  target:nil
    																				  action:nil];
    		[items addObject:flexItem];
    		
    		toolbar.items = items;
    		[items release];
    		
    		
    		//release buttons
    		[WindowWidthZoom release];
    		
    		//[SendMail release];
    		
    		[flexItem release];
    		
    		//add array of buttons to toolbar
    		//[toolbar setItems:items ];
    		
    		/* let it be visible  */
    		[self setToolbarItems:items];
    		[[self navigationController] setToolbarHidden:NO animated:NO]; // application crach here give messege EXC_BAD_ACCESS
    		
    		
    	}
    	@catch (NSException * e) {
    		
    		
    		 
    	}
    	@finally {
    		 
    	}
    

    application crach here give messege EXC_BAD_ACCESS
  • BalakrishnanBalakrishnan Posts: 2New Users
    edited April 2011
    @try { //create bottom toolbar using new toolbar = [UIToolbar new]; toolbar.barStyle = UIBarStyleDefault; [toolbar sizeToFit]; //Create an array to hold the list of bar button items NSMutableArray *items = [[NSMutableArray alloc] init]; //Add buttons //load the image UIImage *buttonImage = [UIImage imageNamed:@"pan.png"]; //create the button and assign the image UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setImage:buttonImage forState:UIControlStateNormal]; //set the frame of the button to the size of the image (see note below) button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height); //create a UIBarButtonItem with the button as a custom view WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button]; [items addObject:WindowWidthZoom ]; UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; [items addObject:flexItem]; toolbar.items = items; [items release]; //release buttons [WindowWidthZoom release]; //[SendMail release]; [flexItem release]; //add array of buttons to toolbar //[toolbar setItems:items ]; /* let it be visible */ [self setToolbarItems:items]; [[self navigationController] setToolbarHidden:NO animated:NO]; // application crach here give messege EXC_BAD_ACCESS } @catch (NSException * e) { } @finally { } Its simple You given array length 2 and try to add more than 2 items in NSMutableArray[code]
    @try {
    //create bottom toolbar using new
    toolbar = [UIToolbar new];
    toolbar.barStyle = UIBarStyleDefault;
    [toolbar sizeToFit];

    //Create an array to hold the list of bar button items
    NSMutableArray *items = [[NSMutableArray alloc] init];


    //Add buttons

    //load the image
    UIImage *buttonImage = [UIImage imageNamed:@"pan.png"];
    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    //create a UIBarButtonItem with the button as a custom view
    WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button];
    [items addObject:WindowWidthZoom ];


    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
    target:nil
    action:nil];
    [items addObject:flexItem];

    toolbar.items = items;
    [items release];


    //release buttons
    [WindowWidthZoom release];

    //[SendMail release];

    [flexItem release];

    //add array of buttons to toolbar
    //[toolbar setItems:items ];

    /* let it be visible */
    [self setToolbarItems:items];
    [[self navigationController] setToolbarHidden:NO animated:NO]; // application crach here give messege EXC_BAD_ACCESS


    }
    @catch (NSException * e) {



    }
    @finally {

    }
    Its simple You given array length 2 and try to add more than 2 items in NSMutableArray
  • BalakrishnanBalakrishnan Posts: 2New Users
    edited April 2011
    [code] @try { //create bottom toolbar using new UIToolbar* toolbar = [[UIToolbar alloc] init]; toolbar.barStyle = UIBarStyleDefault; [toolbar sizeToFit]; //Create an array to hold the list of bar button items NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:10]; //Add buttons //load the image UIImage *buttonImage = [UIImage imageNamed:@"pan.png"]; //create the button and assign the image UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setImage:buttonImage forState:UIControlStateNormal]; //set the frame of the button to the size of the image (see note below) button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height); //create a UIBarButtonItem with the button as a custom view UIBarButtonItem* WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button]; [items addObject:WindowWidthZoom ]; UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; [items addObject:flexItem]; UIBarButtonItem* WindowWidthZoom1 = [[UIBarButtonItem alloc] initWithCustomView:button]; [items addObject:WindowWidthZoom1 ]; //toolbar.items = items; [toolbar setItems:items animated:NO]; [items release]; //release buttons [WindowWidthZoom release]; //[SendMail release]; [flexItem release]; //add array of buttons to toolbar /* let it be visible */ [self.window addSubview:toolbar]; } @catch (NSException * e) { } @finally { } Its simple You given array length 2 and try to add more than 2 items in NSMutableArray [self setToolbarItems:items]; is invalid function it used for adding array to toolbar not to view directly and the method also wrong the correct method is - (void)setItems:(NSArray *)items animated:(BOOL)animated ie. [toolbar setItems:items animated:NO]; [self.window addSubview:toolbar]; or [[self navigationController] addSubview:toolbar]; is added then it works fine[code]
    @try { //create bottom toolbar using new UIToolbar* toolbar = [[UIToolbar alloc] init]; toolbar.barStyle = UIBarStyleDefault; [toolbar sizeToFit]; //Create an array to hold the list of bar button items NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:10]; //Add buttons //load the image UIImage *buttonImage = [UIImage imageNamed:@"pan.png"]; //create the button and assign the image UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; [button setImage:buttonImage forState:UIControlStateNormal]; //set the frame of the button to the size of the image (see note below) button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height); //create a UIBarButtonItem with the button as a custom view UIBarButtonItem* WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button]; [items addObject:WindowWidthZoom ]; UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; [items addObject:flexItem]; UIBarButtonItem* WindowWidthZoom1 = [[UIBarButtonItem alloc] initWithCustomView:button]; [items addObject:WindowWidthZoom1 ]; //toolbar.items = items; [toolbar setItems:items animated:NO]; [items release]; //release buttons [WindowWidthZoom release]; //[SendMail release]; [flexItem release]; //add array of buttons to toolbar /* let it be visible */ [self.window addSubview:toolbar]; } @catch (NSException * e) { } @finally { } Its simple You given array length 2 and try to add more than 2 items in NSMutableArray [self setToolbarItems:items]; is invalid function it used for adding array to toolbar not to view directly and the method also wrong the correct method is - (void)setItems:(NSArray *)items animated:(BOOL)animated ie. [toolbar setItems:items animated:NO]; [self.window addSubview:toolbar]; or [[self navigationController] addSubview:toolbar]; is added then it works fine[code]
    @try {
    //create bottom toolbar using new
    UIToolbar* toolbar = [[UIToolbar alloc] init];
    toolbar.barStyle = UIBarStyleDefault;
    [toolbar sizeToFit];

    //Create an array to hold the list of bar button items
    NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:10];


    //Add buttons

    //load the image
    UIImage *buttonImage = [UIImage imageNamed:@"pan.png"];
    //create the button and assign the image
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button setImage:buttonImage forState:UIControlStateNormal];
    //set the frame of the button to the size of the image (see note below)
    button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
    //create a UIBarButtonItem with the button as a custom view
    UIBarButtonItem* WindowWidthZoom = [[UIBarButtonItem alloc] initWithCustomView:button];
    [items addObject:WindowWidthZoom ];


    UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
    target:nil
    action:nil];
    [items addObject:flexItem];
    UIBarButtonItem* WindowWidthZoom1 = [[UIBarButtonItem alloc] initWithCustomView:button];
    [items addObject:WindowWidthZoom1 ];
    //toolbar.items = items;
    [toolbar setItems:items animated:NO];
    [items release];


    //release buttons
    [WindowWidthZoom release];

    //[SendMail release];

    [flexItem release];

    //add array of buttons to toolbar


    /* let it be visible */
    [self.window addSubview:toolbar];

    }
    @catch (NSException * e) {



    }
    @finally {

    }
    Its simple You given array length 2 and try to add more than 2 items in NSMutableArray
    [self setToolbarItems:items]; is invalid function it used for adding array to toolbar not to view directly and the method also wrong the correct method is - (void)setItems:(NSArray *)items animated:(BOOL)animated ie. [toolbar setItems:items animated:NO];


    [self.window addSubview:toolbar]; or [[self navigationController] addSubview:toolbar]; is added then it works fine
Sign In or Register to comment.