Adding left and right UIBarButtonItem in navigation bar

Question

I'm trying to create a standard navigation bar programmatically using UINavigationItem setLeftBarButtonItem and setRightBarButtonItem

I want to have NavigationItem that looks like

[ < BACKTEXT     FWDTEXT > ]

I want to have a constant space between my images (arrow) and device edges. I would also want to have a constant space between images and texts.

I created a category over UIBarButtonItem and added two method backButtonWith and fwdButtonWith

I read @Split useful answer that explained how to solve the right button

button.titleEdgeInsets = UIEdgeInsetsMake(0, - button.imageView.frame.size.width, 0, button.imageView.frame.size.width);
button.imageEdgeInsets = UIEdgeInsetsMake(0, button.titleLabel.frame.size.width, 0, -button.titleLabel.frame.size.width);

But I'm having a hard time resolving the back button.

Here is my code

- (UIBarButtonItem *)buttonWith:(BOOL) directionLeft title:(NSString *)title image:(UIImage *) buttonImage tintColor:(UIColor *)color target:(id)target andAction:(SEL)action{
  UIButton *barButton;
  barButton = [UIButton buttonWithType:UIButtonTypeCustom];
  float buttonWidth = 130.0f;
  [barButton setFrame:CGRectMake(0, 0, buttonWidth, 20.5f)];
  [barButton setTitle:title forState:UIControlStateNormal];
  [barButton setTitleColor:color forState:UIControlStateNormal];
  const CGFloat* components = CGColorGetComponents(color.CGColor);
  [barButton setTitleColor:[UIColor colorWithRed:components[0] green:components[1] blue:components[2] alpha:0.3f] forState:UIControlStateHighlighted];

  UIEdgeInsets titleEdgeInsets;
  UIEdgeInsets imageEdgeInsets;
  UIImage *image = [self image:buttonImage tintedWithColor:color fraction:0.0];
  [barButton setImage:image forState:UIControlStateNormal];
  [barButton setImage:[self image:image byApplyingAlpha:0.3] forState:UIControlStateHighlighted];

  [barButton addTarget:target action:action forControlEvents:UIControlEventTouchUpInside];
  if(directionLeft == YES){
     titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);//THIS PARAMS SHOULD BE CONFIGURED
     imageEdgeInsets = UIEdgeInsetsMake(0,0,0,0);
  }else{
      titleEdgeInsets = UIEdgeInsetsMake(0, -barButton.imageView.frame.size.width, 0, barButton.imageView.frame.size.width);
      imageEdgeInsets = UIEdgeInsetsMake(0, barButton.titleLabel.frame.size.width, 0, -barButton.titleLabel.frame.size.width);
  }
  barButton.imageEdgeInsets = imageEdgeInsets;
  barButton.titleEdgeInsets = titleEdgeInsets;

  UIBarButtonItem *barButtonItem = [[UIBarButtonItem alloc] initWithCustomView:barButton];
  return barButtonItem;
}

score 0 · Answer 1 · edited May 23 '17 at 10:26

The back button which you set to UINavigationItem appears on the next navigation item which is pushed to the navigation bar. You won't see in on the current navigation item. Also, as I remember, back button is not able to contain custom view, it should be plain UIBarButtonItem.

You can customize the appearance of your back button with

[UIBarButtonItem appearanceWhenContainedIn:<YourNavigationBar.class>]

or with general appearance

[UIBarButtonItem appearance]

For details on back button item appearance customization, please check out this question

Adding left and right UIBarButtonItem in navigation bar

1 Answers1