How can I replace UIBarButton image with custom image?

Question

I tried setting it to custom and put image onto it, but it only changes middle icons, how can I change the whole button appearance?

I want to put this icon: http://cl.ly/image/3B2P0p0p1e1a

But all I get is this: http://cl.ly/image/3M2j2Y292l2K

Answer 1

use this bellow code..

- (void)viewDidLoad
{
        UIImage *menuButtonImage = [UIImage imageNamed:@"list.png"];// set your image Name here 
        UIButton *btnToggle = [UIButton buttonWithType:UIButtonTypeCustom];
        [btnToggle setImage:menuButtonImage forState:UIControlStateNormal];
        btnToggle.frame = CGRectMake(0, 0, menuButtonImage.size.width, menuButtonImage.size.height);
        UIBarButtonItem *menuBarButton = [[UIBarButtonItem alloc] initWithCustomView:btnToggle];
        [btnToggle addTarget:self action:@selector(toggleCalendar) forControlEvents:UIControlEventTouchUpInside];
        self.navigationItem.leftBarButtonItem = menuBarButton;
}

Answer 2

Use this below code its very simple to make custom UIBarButtonItem

- (void)viewDidLoad{
[super viewDidLoad];
    UIBarButtonItem *backButton = [[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"nav-arrow.png"] style:UIBarButtonItemStylePlain target:self action:@selector(backTabBtnPressed:)];
    self.navigationItem.leftBarButtonItem = backButton;
}

after that create backbutton method.

-(IBAction)backTabBtnPressed:(id)sender{
    //do backbutton coding
}`

Answer 3

What you could do is to make an image with the same size of the UIBar (now your UIbar is customised) and then you put custom buttons over it. It is that simple. Just go to your xib or storyboard and load the UIImage you made as the UIBar and set it on your view, then drag the custom buttons over it and Voila!