How to add custom image in navigation bar button item? - objective-c

UIBarButtonItem *doneitem=[[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(donePressed:)]autorelease];
self.navigationItem.rightBarButtonItem=doneitem;
This is the code of my app, I need to add a image on this button ?
Please help me.

Try this code:
UIImage* image3 = [UIImage imageNamed:#"mail-48_24.png"];
CGRect frameimg = CGRectMake(0, 0, image3.size.width, image3.size.height);
UIButton *someButton = [[UIButton alloc] initWithFrame:frameimg];
[someButton setBackgroundImage:image3 forState:UIControlStateNormal];
[someButton addTarget:self action:#selector(sendmail)
forControlEvents:UIControlEventTouchUpInside];
[someButton setShowsTouchWhenHighlighted:YES];
UIBarButtonItem *mailbutton =[[UIBarButtonItem alloc] initWithCustomView:someButton];
self.navigationItem.rightBarButtonItem=mailbutton;
[someButton release];

UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"XXXXXXX.png"]
style:UIBarButtonItemStylePlain
target:self
action:#selector(yourMethod)];
self.navigationItem.rightBarButtonItem=_btn;

Please try this code :
UIButton *btnNext1 =[[UIButton alloc] init];
[btnNext1 setBackgroundImage:[UIImage imageNamed:#"btnNext.png"] forState:UIControlStateNormal];
btnNext1.frame = CGRectMake(100, 100, 50, 30);
UIBarButtonItem *btnNext =[[UIBarButtonItem alloc] initWithCustomView:btnNext1];
[btnNext1 addTarget:self action:#selector(nextButtonClicked) forControlEvents:UIControlEventTouchUpInside];
self.navigationItem.rightBarButtonItem = btnNext;

UIButton *urButton = [UIButton buttonWithType:UIButtonTypeCustom];
urButton.frame = urRequiredFrame;
[urButton setImage:urImage forState:UIControlStateNormal];
[urButton addTarget:self action:#selector(donePressed:)
forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *doneButton =[[UIBarButtonItem alloc] initWithCustomView:urButton];
self.navigationItem.rightBarButtonItem=doneButton;

In case anyone needs Swift code for accepted answer:
let infoImage = UIImage(named: "my-icon-32.png")
let imgWidth = infoImage?.size.width
let imgHeight = infoImage?.size.height
let button:UIButton = UIButton(frame: CGRect(x: 0,y: 0,width: imgWidth!, height: imgHeight!))
button.setBackgroundImage(infoImage, forState: .Normal)
button.addTarget(self, action: Selector("openInfo"), forControlEvents: UIControlEvents.TouchUpInside)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
P.S. Gurpreet Singh answer is working only for transparent PNG also I have to set button tintcolor other than clearColor.

In Swift
Other solution using withRenderingMode(UIImage.RenderingMode.alwaysOriginal) method below:
let img = UIImage(named: "picture")!.withRenderingMode(UIImage.RenderingMode.alwaysOriginal)
let leftBarButtonItem = UIBarButtonItem(image: img, style: UIBarButtonItem.Style.plain, target: self, action: nil)
self.navigationItem.leftBarButtonItem = leftBarButtonItem

Here's what works for me. I found 30x30 to be a good size for the button in the nav bar. The UIImage scales to the button size automatically.
UIImage *image = [UIImage imageNamed:#"XXXXXXXXXX"];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
[button setBackgroundImage:image forState:UIControlStateNormal];
[button addTarget:self action:#selector(someAction) forControlEvents:UIControlEventTouchUpInside];
button.adjustsImageWhenHighlighted = NO;
UIBarButtonItem *rightButton =[[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = rightButton;

[doneItem setImage:[UIImage imageNamed:#"yourImage.png"] forState:UIControlStateNormal];

One simple way :
UIImage* customImg = [UIImage imageNamed:#"custom-img.png"];
UIBarButtonItem *_customButton = [[UIBarButtonItem alloc] initWithImage:customImg style:UIBarButtonItemStyleDone target:nil action:nil];
self.navigationItem.rightBarButtonItems = [[NSArray alloc] initWithObjects:_customButton, nil];
Then if you need more than one button you can just and an other UIBarButtonItem to initWithObjects.

Do this. It's way more simple.
Put the image file in your project directory
Add the file into Xcode (Right click on the Xcode project, add files to "Project Name")
Select your UIBarButtonItem in Storyboard
Click on "Image" and find your image (See Screenshot)
Celebrate, because it will work perfectly and it requires no unnecessary code.

To pick up on the answer by Gurpreet Singh. To keep the current status of an already existing button re-use the target and action.
SEL selector = self.navigationItem.rightBarButtonItem.action;
id target = self.navigationItem.rightBarButtonItem.target;
UIBarButtonItem *_btn=[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:#"icon_close.png"]
style:UIBarButtonItemStylePlain
target:target
action:selector];
self.navigationItem.rightBarButtonItem = _btn;

let sliderImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 30))
sliderImageView.contentMode = .ScaleAspectFit
sliderImageView.image = UIImage(named: "sliderMenu")
OR
var sliderImage = UIImage(named: "sliderMenu")
navigationItem.leftBarButtonItem?.image = sliderImage

Related

How to make a custom UIBarButton for Left Bar Button for BackBarButton

I am trying to customize UI of an application for iOS 7. I want exactly BackBarButton of iOS 7 but with different color for both arrow and title and different font for title. This is iOS 7 back button.
I tried to customize it with following code
UIImage *backButtonImage = [UIImage imageNamed:#"back.png"];
UIButton *customBackButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customBackButton addTarget:self action:#selector(backButtonPressed) forControlEvents:UIControlEventTouchUpInside];
[customBackButton setBackgroundImage:backButtonImage forState:UIControlStateNormal];
[customBackButton setFrame:CGRectMake(0, 0, 30, 30)];
backButton = [[UIBarButtonItem alloc] initWithCustomView:customBackButton];
[backButton setAction:#selector(backButtonPressed)];
UIBarButtonItem * backButton = [[UIBarButtonItem alloc] initWithCustomView:customBackButton];
It seemed like this:
There is two problem with above Image.
First it is not aligned to left(iOS back button sticked to the left).
Second it doesn't have title of previous page.
I just added title attribute to custom button.
[customBackButton setTitle:#"title" forState:UIControlStateNormal];
But it was like this:
How can I fix the problems(stick to left and title)?
For this, you need to have a custom image with arrow & title.
if you want to customise the title, you can just use below code>
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"My Title" style:UIBarButtonItemStylePlain target:nil action:nil];
But if you want it to set for an image, you need an image with having the back button to the left of the image.
Image:
2x Image:
See the images in editor, you can notice that image size is 70x32 and the arrow is more towards left end. You can have image with text also & use it.
Hope that helps.
I just found out how It is possible
I wrote following code and it perfectly worked!
UIBarButtonItem * backButton = [UIBarButtonItem new];
UIView * backButtonView = [UIView new];
[backButtonView setFrame:CGRectMake(0, 0, 90, 32)];
UIImageView *backButtonImage = [UIImageView new];
[backButtonImage setImage:[UIImage imageNamed:#"Setting/back.png"]];
[backButtonImage setFrame:CGRectMake(-15, 0, 30, 30)];
UILabel * backButtonLabel = [UILabel new];
[backButtonLabel setFrame:CGRectMake(8, 0, backButtonView.frame.size.width, 30)];
[backButtonLabel setBackgroundColor:[UIColor clearColor]];
[backButtonLabel setTextColor:[UIColor whiteColor]];
[backButtonLabel setTextAlignment:NSTextAlignmentLeft];
[backButtonLabel setFont:[UIFont fontWithName:#"HelveticaNeue" size:18]];
[backButtonLabel setText:title];
UIButton *customBackButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customBackButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
[customBackButton setFrame:CGRectMake(0, 0, 90, 30)];
[backButtonView addSubview:customBackButton];
[backButtonView addSubview:backButtonImage];
[backButtonView addSubview:backButtonLabel];
backButton = [[UIBarButtonItem alloc] initWithCustomView:backButtonView];
[backButton setAction:action];
[self.navigationItem setLeftBarButtonItem:backButton animated:YES];

picture appears as white space in button

I downloaded from a free icon DB a thumb up icon, its size is too large for a button and it had white background.I decided to open it in pixelmator resized the icon and removed the background. when opening it with preview it looks great but when its set to be the button's image in xcode it appears as a white circle.
here is the icon after edit (30x30 png)
and this is how it looks on the button
what should I do to fix this?
edit/ upadte:
I tried #yunas code and it works in the navigation bar not for the toolbar (didn't even show the button).
Trying this code:
UIImage* image = [UIImage imageNamed:#"imageName"];
UIBarButtonItem *likeBtn = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:#selector(action_clicked:)];
NSArray* toolbarItems = [NSArray arrayWithObjects:likeBtn,nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
resulted again in a button with the white drawing
So I was wondering: Is it even possible to have colored buttons in the toolbar? maybe i'm trying the imposible...
edit/ upadte II - the solution: wrapping a UIButton inside a UIBarButtonItem
#interface StatusUIBarButtonItem : UIBarButtonItem
- (id) initWithStatus: (enum StatusEnum)p_statusEnum;
#end
#implementation StatusUIBarButtonItem
- (instancetype)initWithStatus:(enum StatusEnum)p_statusEnum
{
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[self getStatusImage] forState:UIControlStateNormal];
[button addTarget:self action:#selector(status_Clicked:) forControlEvents:UIControlEventTouchUpInside];
[button setFrame:CGRectMake(0, 0, 20, 20)];
self = [super initWithCustomView:button];
if (self)
{
self.statusButton = button;
}
return self;
}
#end
then in the ViewController class:
-(void) viewDidLoad
{
StatusUIBarButtonItem* stausBtn = [[StatusUIBarButtonItem alloc] initWithStatus:self.status];
NSArray* toolbarItems = [NSArray arrayWithObjects: stausBtn, nil];
self.toolbarItems = toolbarItems;
self.navigationController.toolbarHidden = NO;
}
I hope this will help others that like me want colored images in the toolbar
UIImage *buttonImage = [UIImage imageNamed:#"imageName.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
button.adjustsImageWhenDisabled = NO;
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
[button addTarget:self action:#selector(action:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
self.navigationItem.rightBarButtonItem = customBarItem;

UIBarButtonItem target-action does not invoke

- (void)viewDidLoad
{
[super viewDidLoad];
//Load the image
UIImage *buttonImage = [UIImage imageNamed:#"1.png"];
//create the button and assign the image
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
//sets the frame of the button to the size of the image
button.frame = CGRectMake(0, 0, buttonImage.size.width, buttonImage.size.height);
//creates a UIBarButtonItem with the button as a custom view
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];
customBarItem.target = self;
customBarItem.action = #selector(click:);
self.toolbarItems = [NSArray arrayWithObjects:customBarItem, nil];
}
- (void)click:(id)sender {
NSLog(#"action");
}
I think my console will print "action" when I push down the barItem.
However "action" is not printed.
Did I miss anything?
Thanks for advance!
Try this
UIBarButtonItem *btn = [[UIBarButtonItem alloc] initWithTitle:#"Click ME!" style:UIBarButtonItemStyleBordered target:self action:#selector(click)];
.
.
.
-(void)click{
NSLog("hello");
}
I believe the problem is that you are using a UIButton for the [[UIBarButtonItem alloc] initWithCustomView when you should simply pass a UIView, the action is probably going to the UIButton and not the UIBarButtonItem.
Instead do this:
UIImageView *myImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"1.png"];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:myImageView];
I think you're trying to do something more like this:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:buttonImage forState:UIControlStateNormal];
[button setFrame:CGRectMake(0.0f, 0.0f, 25.0f, 25.0f)];
[button addTarget:self action:#selector(click) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *customBarItem = [[UIBarButtonItem alloc] initWithCustomView:button];

Show UIBarButtonItem just like Apple's iPad Mail App

Apple's iPad Mail app has a few icons that appear embedded in the setRightBarButtonItems area of the navigationItem of the detail view of the split view controller:
How can I add icons to the navigationItem bar like this (I have the icons already).
My issue is that the UIBarButtonItem class reference doesn't seem to have an appropriate UIBarButtonItemStyle that allows for no border around the button. I've tried configuring the UIBarButtonItem via initWithCustomView yet tapping the button doesn't work.
Thanks in advance for any suggestions
Cheers
EDIT: I could use UIBarButtonItemStylePlain however it doesn't look 'embedded' like the apple buttons, which is the look I am after.
I've worked it out and can produce the following result:
Here is the code I use. It could be optimised however is nice and repetitive for demonstration purposes:
- (void)setupNavigationItemButtons {
float buttonWidth = 60;
float buttonHeight = 40;
UIImage *imageA = [UIImage imageNamed:#"212-action2.png"];
UIImage *imageB = [UIImage imageNamed:#"111-user.png"];
UIImage *imageC = [UIImage imageNamed:#"122-stats.png"];
UIButton *buttonA = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
UIButton *buttonB = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
UIButton *buttonC = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, buttonWidth, buttonHeight)];
[buttonA addTarget:self action:#selector(doSomething:) forControlEvents:UIControlEventTouchUpInside];
[buttonB addTarget:self action:#selector(doSomethingElse:) forControlEvents:UIControlEventTouchUpInside];
[buttonC addTarget:self action:#selector(doSomethingRandom:)forControlEvents:UIControlEventTouchUpInside];
[buttonA setImage:imageA forState:UIControlStateNormal];
[buttonB setImage:imageB forState:UIControlStateNormal];
[buttonC setImage:imageC forState:UIControlStateNormal];
UIBarButtonItem *buttonItemA = [[UIBarButtonItem alloc] initWithCustomView:buttonA];
UIBarButtonItem *buttonItemB = [[UIBarButtonItem alloc] initWithCustomView:buttonB];
UIBarButtonItem *buttonItemC = [[UIBarButtonItem alloc] initWithCustomView:buttonC];
[self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects:buttonItemA, buttonItemB, buttonItemC,nil]];
}

How to add an image to UIBarButtonItem?

I created a custom button and applied it to the UIbarbuttonitem.
There is no error but nothing is shown on the navigation bar:(
This is my code-
//create a custom button
UIImage *image = [UIImage imageNamed:#"TESTButton.png"];
UIButton *myCustomButton = [UIButton buttonWithType:UIButtonTypeCustom];
myCustomButton.bounds = CGRectMake( 0, 0, image.size.width, image.size.height );
[myCustomButton setImage:image forState:UIControlStateNormal];
[myCustomButton addTarget:nil action:#selector(goBack:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithCustomView:myCustomButton];
self.navigationItem.leftBarButtonItem = button;
self.navigationController.navigationBar.barStyle = UIBarStyleDefault;
[button release];
[myCustomButton release];
[image release];
[navID release];
Anybody who can fix my code? :)
From the docs:
initWithImage:style:target:action:
Try that.
To set ANY image with right coloring, use UIButton, set "image for state" and then create UIBarButtonItem with customView
UIImage *btnImage = [UIImage imageNamed:#"button"];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.bounds = CGRectMake( 0, 0, btnImage.size.width, btnImage.size.height );
[btn addTarget:self action:#selector(action:) forControlEvents:UIControlEventTouchDown];
[btn setImage:btnImage forState:UIControlStateNormal];
_buttonItem = [[UIBarButtonItem alloc] initWithCustomView:btn];
One of the Simplest Way is :
UIBarButtonItem *button2 = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:#"backk.png"] style:UIBarButtonItemStylePlain target:self action:#selector(backBtn:)];
self.navigationItem.leftBarButtonItem = button2;
Action Method:
- (IBAction)backBtn:(id)sender
{
[self.navigationController popViewControllerAnimated:YES];
}