Customize navigation bar button in iOS6

Question

Update - One Possible Solution

Based on answer given by Alexander Merchi in this post (UIBarButtonItem Custom view in UINavigationBar), a solution is found. But still don't know how to change the position of the image properly.

UIButton *btn =  [UIButton buttonWithType:UIButtonTypeCustom];
        [btn setFrame:CGRectMake(0, 0, 28.0f, 28.0f)]; // 28 points is the width or height of the button image
        [btn setBackgroundImage:[UIImage imageNamed:@"button.png"] forState:UIControlStateNormal];
        [btn addTarget:self action:@selector(onClickMenuButton) forControlEvents:UIControlEventTouchUpInside];
        btnMenu = [[UIBarButtonItem alloc] initWithCustomView:btn];

Original Post

In iOS 6, the goal is like this:

while current result is like this:

My code is

btnMenu = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"button.png"]
                                           style:UIBarButtonItemStylePlain
                                          target:self 
                                          action:@selector(onClickMenuButton)];

button.png is this the white circle with white three bars inside and a tranparent background.

Answer 1

UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeCustom];
rightButton.frame = CGRectMake(0, 0, 30, 30);
[rightButton setImage:[UIImage imageNamed:@"Button-normal"] forState:UIControlStateNormal];
[rightButton setImage:[UIImage imageNamed:@"logout-hover"] forState:UIControlStateHighlighted];
[rightButton addTarget:self action:@selector(logOut) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *rightBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:rightButton];
self.navigationItem.leftBarButtonItem = rightBarButtonItem;