How can I center the image in the UIBarButtonItem?

Question

I have an @2x image with a {50, 50} square, as shown as the blue rectangle below. Now, I need to make this image center in the button of UIBarButtonItem which has a larger rectangle (as the red rectangle below). The red arrows indicates the stretchable region.

I've tried the -imageWithAlignmentRectInsets: and -resizableImageWithCapInsets:, but it shows wrong drawing.

How can I center the image in the button of the custom bar button item?

---

Update:

Now, I have a modified image which has 1 transparent pixel around the original image (@1x). But still have no idea how to achieve my goal.

The icon has been scaled in the horizontal and vertical orientation (as below) to fill the button.

I want to center the icon in the button, not fill.

I've tried the following method but not useful:

// (1) use content mode
button.imageView.contentMode = UIViewContentModeCenter;

// (2) alignment
resizedImage = [image imageWithAlignmentRectInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

// (3) resize
resizedImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(1, 1, 1, 1)];

// After all, assign the image to the background image for the button
[button setBackgroundImage:resizedImage forState:UIControlStateNormal];

Answer 1

Make sure the size of the image is exactly 20*20 pixel. The document on bar item says:

The images displayed on the bar are derived from this image. If this image is too large to fit on the bar, it is scaled to fit. Typically, the size of a toolbar and navigation bar image is 20 x 20 points.

Hope this helps .. :)