navigation bar item icon colour blue or single colour. Not able to render the original image in the navigation bar. already tried the option render as original from the Assets.xcassets attributes inspector
want to use thisimage
but sadly when tried selecting through storyboard it shows it in only one single colour square i.e only blue , white or any other colour. how can i use the original image for bar button item.
As per my understanding, you want to set image on navigation bar right ?
Hope below code will wok for you,
UIImage *myImage = [UIImage imageNamed:#"myImageName.png"];
myImage = [myImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *searchButton = [[UIBarButtonItem alloc] initWithImage:myImage style:UIBarButtonItemStylePlain target:self action:#selector(menuObject:)];
self.navigationItem.leftBarButtonItem = searchButton;
Try this ...
This one works for me...
UIButton *btnChat = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 30, 30)];
[btnChat setBackgroundImage:[UIImage imageNamed:#"chat_icon.png"] forState:UIControlStateNormal];
[btnChat addTarget:self action:#selector(chatButtonClicked) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc]initWithCustomView:btnChat];
Related
I am making an iPhone app and I have a UINavigationController as my root view and then UIVIewControllers from this. My Register button segues to the registration screen which automatically creates a Navigation Bar for me with the back button on the top left.
I have replaced the standard back button with my own image with the code below:
UIImage *backImage = [UIImage imageNamed:#"customBackButton.png"];
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
backButton.frame = CGRectMake(0, 0, 100, 70);
[backButton setImage:backImage forState:UIControlStateNormal];
[backButton addTarget:self action:#selector(popNavigationController:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:backButton] ;
self.navigationItem.leftBarButtonItem = backBarButtonItem;
I have also added a rightBarButtonItem to test but my issue is however that both these buttons arent in the corners of the screen as can be seen here.
Most other apps have the navigation bar buttons right in the corners as can be seen here from another app I found online as reference
I have tried to change the values here but that does nothing - the buttons stay where they are.
// Changing frames x-coordinate
backButton.frame = CGRectMake(-220, 0, 100, 70);
What do I need to do to set the buttons right in the corners of the navigation bar?
EDIT: If I use [backButton sizeToFit]; my image is displayed as below (the top grey bar is the navigation bar). Do I need to make the image the correct size?
If you want to change position of UIBarButtonItem you should use fake bar items as spacers
UIBarButtonItem *negativeSpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
negativeSpacer.width = -10;
Now you can set the array of bar items to achieve result needed
self.navigationItem.leftBarButtonItems = #[negativeSpacer, backBarButtonItem];
The width of the buttons is too large. Remove this line:
backButton.frame = CGRectMake(0, 0, 100, 70);
and then call
[backButton sizeToFit];
after
[backButton setImage:backImage forState:UIControlStateNormal];
If this doesn't work, it's possible that there is white space baked into the PNG images themselves.
Have you tried cropping the image you're using (customBackButton.png) to get rid of any transparent margins? It looks like the image might be a little wide. Then you could decrease the width from 100px to something smaller and things should fit better.
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'm having a problem with my UIBackbutton not appearing and i'm not sure what is causing it.
This is my code for making the back button image, it is in my first ViewController :
UIImage *backButtonHomeImage = [[UIImage imageNamed:#"backButtonImage"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
[[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonHomeImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
When you first enter the next view (done by a segue from a button) the button isn't visible but the text to go back is visible. Once i've hit the back button the image appears and it stays appeared on the next time i click it.
I'm not sure if this is an issue to do with my code, or the file it's in or if it's and iOS 7 problem.
You may have more luck using a UIBarButtonItem and setting the back button background explicitly.
The appearance proxy has been unreliable in my own attempts to get a back button working with iOS 7. I experienced the same issue with the background not showing up properly first time showing the button.
If you just need to change the colour, try this[[UINavigationBar appearance] setTintColor:[UIColor redColor]];
If you want to change back button image you just need to write this 2 lines of code:
[self.navigationBar setBackIndicatorImage:[UIImage imageNamed:#"icon-back"]];
[self.navigationBar setBackIndicatorTransitionMaskImage:[UIImage imageNamed:#"icon-back"]];
And if you create sub class of UINavigationController it makes easy to customize you navigationbar and push & pop controllers
Try this:
self.navigationItem.hidesBackButton = NO;
if you're trying to add it to the Navigation bar then:
UIImage* image4 = [UIImage imageNamed:#".....png"];
button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 26, 26)];
[button setBackgroundImage:....png forState:UIControlStateNormal];
[button addTarget:self action:#selector(Selector)
forControlEvents:UIControlEventTouchUpInside];
[button setShowsTouchWhenHighlighted:YES];
UIBarButtonItem *action = [[UIBarButtonItem alloc] initWithCustomView:button];
NSArray *arr =[[NSArray alloc]initWithObjects:action, nil];
self.navigationItem.rightBarButtonItems = arr;
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 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];