i know there are a lot of question/answers about this topic, but can't find a fitting answer.
I building a UIBar programmatically. My own buttons (png with transparancy) are having a back fill instead of showing the background trough.
The system UIBarButton's are working perfect, but not my own.
works:
UIBarButtonItem *exportButton = [[UIBarButtonItem alloc]
initWithBarButtonSystemItem:UIBarButtonSystemItemAction
target:self
action:#selector(tapExportButton:)];
not works:
UIBarButtonItem *favButton = [[UIBarButtonItem alloc]
initWithImage:[UIImage
imageNamed:#"FavoriteStar"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(toggleFavorite:)];
the inner part of the png is transparent in my gfx editor
the inner part is black when i use it as a UIBarButtonItem, but not the background picture...
What can i do to make it transparent?
Regards,
Jeroen Wolff
I am revising your code for better understanding
UIBarButtonItem *favButton = [[UIBarButtonItem alloc]
initWithImage:[UIImage
imageNamed:#"FavoriteStar"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(toggleFavorite:)];
below are some points that needs to be taken care of:
1. Your navigation bar should be transparent.
2. Use a PNG file (for better quality) with its transparent background.
3. You can also use the below code for reference
UIButton *btnBack=[UIButton buttonWithType:UIButtonTypeCustom];
btnBack.frame=CGRectMake(0, 29.5, 38, 25);
[btnBack setBackgroundImage:[UIImage imageNamed:#"btn_back.png"] forState:UIControlStateNormal];
[btnBack setBackgroundImage:[UIImage imageNamed:#"btn_backSelected.png"] forState:UIControlStateHighlighted];
[btnBack addTarget:self action:#selector(btnbackClicked:) forControlEvents:UIControlEventTouchDown];
UIBarButtonItem *barbutton=[[UIBarButtonItem alloc]initWithCustomView:btnBack];
[barbutton setStyle:UIBarButtonItemStyleBordered];
self.navigationItem.leftBarButtonItem=barbutton;
I have used a custom button as bar button.
I am really want to hear from you. Please let me know if it works.
Related
I am creating navigation bar button using xib but when i going to set image to bar button then image colour is different as original image.
Here is my orignal image.
And after adding that image on navigation bar button item than it look like this
First, I agree with #Desdenova's comment.
The two images do not look the same, one has hard right angle edges for each line, and the other rounded.
Make sure you are using the correct image file.
If this is the case, awesome, problem solved without deviating from your xib implementation. If not, just do it programmatically (as per #shankars code).
But another thing to note, I've run into problems setting custom image files to buttons, where the image gets tweaked... make sure to use UIImageRenderingModeAlwaysOriginal when setting the image to the button:
Objective-C:
[button setImage:[[UIImage imageNamed:#"imageName.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] forState:UIControlStateNormal];
Swift:
someBarButtonItem.image = UIImage(named: "yourPictureName")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
Swift 3:
someBarButtonItem.image = UIImage(named:"myImage")?.withRenderingMode(.alwaysOriginal)
This is sample working code
UIImage *myImage = [UIImage imageNamed:#"myImageFile.png"];
myImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *menuButton = [[UIBarButtonItem alloc] initWithImage:myImage style:UIBarButtonItemStylePlain target:self action:#selector(menuObject:)];
self.navigationItem.leftBarButtonItem = menuButton;
Hopefully I am not too late to add an answer of my own, but within Assets.xcassets, you can click on your image and in the attributes inspector, under Rendar As set it to Original Image
Because ios7 storyboard have issue i faced to fix like below.
set your tint color as image color it works
You can create navigation bar button programmatically instead of direct storyboard, this will not affect original image color
self.navigationItem.leftBarButtonItem=[self backButton];
- (UIBarButtonItem *)backButton
{
UIImage *image = [UIImage imageNamed:#"image.png"];
CGRect buttonFrame = CGRectMake(0, 0, image.size.width, image.size.height);
UIButton *button = [[UIButton alloc] initWithFrame:buttonFrame];
//[button addTarget:self action:#selector(backButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[button setImage:image forState:UIControlStateNormal];
UIBarButtonItem *item= [[UIBarButtonItem alloc] initWithCustomView:button];
return item;
}
You need to set tint color as well - which worked for me -
You can generate UIBarButtonItem via code as follows:
#define setTurqoiseColor [UIColor colorWithRed:68.0f/255.0f green:181.0f/255.0f blue:223.0f/255.0f alpha:1.0]
UIBarButtonItem *menuButton = [[UIBarButtonItem alloc] initWithImage:buttonImage style:UIBarButtonItemStyleBordered target:self action:#selector(toggleMenu)];
menuButton.tintColor = setTurqoiseColor;
I have setup a Navigation Bar in a storyboard with an UIBarButton for the right.
This is the code I use to update the image for this:
// Setup the right navigation bar item
[self.addGameButton setBackgroundImage:[UIImage imageNamed:#"addGameButton"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[self.addGameButton setTitle:#""];
The image is here, it is 76x58 (at 2x). It is 38x29 (at normal).
When run on the device the image is stretching and I do not know why?
The backgroundImage property is meant to draw a stretchable image for the background of the button. If you want the image inside the button, you could try initializing the UIBarButtonItem with this:
UIImage *image = [UIImage imageNamed:#"images/global/add"];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStyleBordered target:nil action:nil];
[self.navigationItem setRightBarButtonItem:barButtonItem];
For you, it looks like you have an image that you want to replace the whole button with. You could also try this code, which will create a custom button as the view for your UIBarButtonItem:
UIImage *addImage = [UIImage imageNamed:#"images/global/add"];
UIButton *addButton = [UIButton buttonWithType:UIButtonTypeCustom];
[addButton setFrame:CGRectMake(0, 0, addImage.size.width, addImage.size.height)];
[addButton setBackgroundImage:addImage forState:UIControlStateNormal];
UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:addButton];
[self.navigationItem setRightBarButtonItem:barButtonItem];
In storyboard you can dragg a UIButton over the UIBarButtonItem and you can customise the UIButton as you like.
Try setting the frame of the button to the size you want.
Stuart, since you have setTitle:#"" the nav bar button will not display the text "add" but instead take up the space that was allocated to the text.. I am also yet to find a proper solution but a workaround for your problem is to set the font size to 0.1f. This will resolve your issue..
you need to set the navigation bar appearance in the "application:didFinishLaunchingWithOptions” method of AppDelegate.m, try adding the following code:
UIImage *buttonback = [[UIImage imageNamed:#"nav_back"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 22, 0, 0)];
[[UIBarButtonItem appearance]
setBackButtonBackgroundImage:buttonback forState:UIControlStateNormal
barMetrics:UIBarMetricsDefault];
[[UIBarButtonItem appearance] setTitleTextAttributes:[NSDictionary
dictionaryWithObjectsAndKeys:[UIColor whiteColor],
UITextAttributeTextColor, [UIFont fontWithName:#"verdana" size:0.1f],
UITextAttributeFont, nil] forState:UIControlStateNormal];
Also Note that this will work with iOS 6, looking for a solution for compatibility in iOS 5
I have a custom png I set as the back button for the UINavigationBar like this:
UIImage *navBackgroundPortait = [[UIImage imageNamed:#"nav_bg_portrait.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UINavigationBar appearance] setBackgroundImage:navBackgroundPortait forBarMetrics:UIBarMetricsDefault];
In my view controller in the viewDidLoad method I use this hack to display the back button with no title/text:
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#" " style:UIBarButtonItemStyleBordered target:nil action:nil];
But my back button png gets stretched in width, and I really would like it to not do that at all. I simply want to display a static png image as my back button on all view's with no text on it, and never ever have it stretched. Can I do this, and how do I do it?
Best regards
Søren
Use this:
UIButton *backButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 50, 30)];
[backButton setImage:[UIImage imageNamed:#"nav_bg_portrait.png"] forState:UIControlStateNormal];
[backButton addTarget:self action:#selector(popNavigationControllerFunction) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton];
Because you tell image to get stretched with resizableImageWithCapInsets:
If you want to display image as it is, just do:
UIImage *navBackgroundPortait = [UIImage imageNamed:#"nav_bg_portrait.png"];
I need to use a simple UIBarButtonItem in a UIToolBar.
I used this code to add the button with my custom image to the navigation bar:
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
NSArray *rightItems = [NSArray arrayWithObject:cloneButton];
self.navigationItem.rightBarButtonItems = rightItems;
The result is what I want and it looks like this
navigation bar http://img207.imageshack.us/img207/3383/navigationbara.jpg
When doing the same thing in a UIToolBar that I'm adding to a UITableViewCell's contentView
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"image_sheep.png"] style:UIBarButtonItemStylePlain target:self action:#selector(clone)];
UIBarButtonItem *leftSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
toolbar.items = [NSArray arrayWithObjects:leftSpace, cloneButton, nil];
The problem is that I get something like this:
toolbar http://img209.imageshack.us/img209/1374/toolbary.jpg
This is surely due to the fact that UINavigationBar and UIToolBar are not drawn the same way...
Can someone please point out how to resolve this problem?
On your UIToolbar use UIBarButtonItemStyleBordered instead of UIBarButtonItemStylePlain.
UINavigationBar will not draw the button the same without the button look.
That's how UIToolbar is supposed to work. Per the documentation:
Toolbar images that represent normal and highlighted states of an item derive from the image you set using the inherited image property from the UIBarItem class. For example, the image is converted to white and then bevelled by adding a shadow for the normal state.
That said, you might be able to get the result you want by creating a UIBarButtonItem with a custom view instead of an image. Like so:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];
I haven't tested this, so I don't know if it will work.
I cannot see the images posted in the question anymore. But I am pretty sure that we're trying to mimic the UIBarButtonItemStylePlain of the UIToolBar in a UINavigationBar.
Benzado is pretty much spot on except for this line:
[sheepButton setImage:sheepImage forState:UIControlStateNormal];
This puts the image in front of the touch indicator. The UIToolBar shows the touch in front of the image. So to mimic the UIToolBar style in a UINavigationBar:
UIImage *sheepImage = [UIImage imageNamed:#"image_sheep.png"];
UIButton *sheepButton = [UIButton buttonWithType:UIButtonTypeCustom];
[sheepButton setBackgroundImage:sheepImage forState:UIControlStateNormal];
[sheepButton addTarget:self action:#selector(clone) forControlEvents:UIControlEventTouchUpInside];
[sheepButton setShowsTouchWhenHighlighted:YES];
[sheepButton sizeToFit];
UIBarButtonItem *cloneButton = [[UIBarButtonItem alloc] initWithCustomView:sheepButton];
I would like to create a UIBarButtonItem with an icon and text. I've seen this solution and this one but when you set the background image it doesn't draw a border.
I don't really want to draw a border (that looks like the "Plain" style one) with my icon on it. Is there another way around this?
If you look at the first solution you linked to you will notice the following line
UIBarButtonItem *barButton= [[[UIBarButtonItem alloc] initWithCustomView:chatButton] autorelease];
You can initialize a button with whatever view you would like. You can make a button with any (acceptable) view inside it.
eg.
// GRAPHICAL BUTTON FRAMEWORK
UIButton* btton = [UIButton buttonWithType:UIButtonTypeCustom];
[btton setFrame:CGRectMake(0, 0, 30, 30)];
[btton addTarget:self action:#selector(SOMEROUTINE) forControlEvents:UIControlEventTouchUpInside];
[btton setImage:[UIImage imageNamed:#"SOME IMAGE"] forState:UIControlStateNormal];
UIBarButtonItem* remix = [[[UIBarButtonItem alloc] initWithCustomView:btton] autorelease];
Hope that helps!