4

I want to use my own image for the Action Button in my app. I have the image sized at 30px X 30px. In my app I use the code:

UIBarButtonItem *heart = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"action@2x.png"] style:UIBarButtonItemStyleDone target:self action:@selector(theactionbutton)];
self.navigationItem.rightBarButtonItem = the action;

However, the button seems too far to the left. I have attached two images to this, the first shows the original action button, and the second shows my custom image one, for comparison. Any thoughts why it is moved to the left?

enter image description here enter image description here

user717452
  • 33
  • 14
  • 73
  • 149

2 Answers2

3

You can use a buttons image insets, like

barButtonItem.imageInsets = .init(top: 0, left: 10, bottom: 0, right: 10)

bbjay
  • 1,728
  • 3
  • 19
  • 35
-1

  1. Create Image

    UIImage *image = [UIImage imageNamed:@"image"];

  2. Create button and set background image and target action.

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame= CGRectMake(0.0, 0.0, image.size.width, image.size.height); [button setBackgroundImage:image forState:UIControlStateNormal]; [button addTarget:self action:@selector(theactionbutton) forControlEvents:UIControlEventTouchUpInside];

  1. Create UIView and add button as subview

    UIView *view =[[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, image.size.width, image.size.height) ]; [view addSubview:button];

  2. Create bar button item with custom view and set it to navigation bar right item

    UIBarButtonItem *actionButton = [[UIBarButtonItem alloc] initWithCustomView:view]; self.navigationItem.rightBarButtonItem = actionButton;

Note: @2x image should be of double size. If your iamgeView is of 30x30 then your Image should of 60X60. If you have 30x30 image and name as @2x it will be used as 15x15 so, make your image of double size or use it without @2x

Adnan Aftab
  • 14,377
  • 4
  • 45
  • 54
  • Replace action@2x.png with action.png – Adnan Aftab Nov 22 '13 at 15:23
  • That moved it over, but also made it tiny. – user717452 Nov 22 '13 at 15:24
  • @2x image should be of double size. If your iamgeView is of 30x30 then your Image should of 60X60 – Adnan Aftab Nov 22 '13 at 15:27
  • Ok, I went back in on Photoshop and resized action.png to 30 x 30 and action@2x.png to 60 x 60. Now, it is right back to square one of being crammed next to the slider. – user717452 Nov 22 '13 at 15:30
  • I know it is a workaround, but I just went into my image, scrunched it in a bit, and scooted it to the right, leaving blank space on left hand side. – user717452 Nov 22 '13 at 15:44
  • 1
    this is not good idea... better set frame of the button, you can empty spaces in navigation bar, see this http://stackoverflow.com/questions/18914812/how-to-edit-empty-spaces-of-left-right-uibarbuttonitem-in-uinavigationbar-in-io/18918378#18918378 – Adnan Aftab Nov 22 '13 at 16:16
  • Thanks, had to adjust the negativeSpacer a bit, but that worked perfect. – user717452 Nov 22 '13 at 16:23