Next Button like Navigation's Back Button

Question

I want to display Next Button just like Back Button but the rightBarButton does not touch to end of the screen like the back barButton.

        let button = UIButton(type: .system)
        button.setImage(UIImage(named: "ic_next_button"), for: .normal) // 22x22 1x, 44x44 2x, 66x66 3x
        button.setTitle("Next", for: .normal)
        button.sizeToFit()
        button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
        self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)

What do you mean with "but the rightBarButton does not touch to end of the screen like the back barButton"? — Rashwan L, Jun 11 '17 at 13:03
@RashwanL check the Back button's arrow and leading space. I want the next button to looks similar. — Nitesh, Jun 11 '17 at 13:05
If what you are trying to achieve is a symmetric appearance you can use `navigationItem.setLeftBarButtonItems` method to set the left button as well. — Ayazmon, Jun 16 '17 at 08:33
If you want to get symmetric UI, you should set the leftBarButtonItem by your custom button. It's much easier than mimicking the Apple's back button ;) — Tony Nguyen, Jun 16 '17 at 08:46
I would try to look at the *contentEdgeInsets*, *imageEdgeInsets* and *titleEdgeInsets* of a button. Using these insets, one should be able to change the spacing of the image and title. But, before you do anything, read the following article that explains how to properly set insets: http://doing-it-wrong.mikeweller.com/2012/07/youre-doing-it-wrong-2-sizing-labels.html — Wolfgang Schreurs, Jun 16 '17 at 14:17
You can find [your solution here](https://stackoverflow.com/questions/33204457/add-additional-button-next-to-back-button-on-tab-embedded-in-navigation-controll) — Raksha Saini, Jun 21 '17 at 09:30

score 7 · Accepted Answer · answered Jun 21 '17 at 14:52

As the previous answer pointed out, all you need to do is to add a negative fixed space to the left of your nextButton and it will be pushed to the right.

This code creates a negative fixed width of 8 points (which seems enough in your case, but feel free to adapt as you need):

let negativeWidthButtonItem = UIBarButtonItem(barButtonSystemItem: .fixedSpace, 
                                              target: nil, 
                                              action: nil)
negativeWidthButtonItem.width = -8

After creating this button, add it to the rightBarButtonItems array:

self.navigationItem.rightBarButtonItems = [negativeWidthButtonItem, nextButton]

Some other answers on StackOverflow also refer to the same solution:

RajeshKumar R · Answer 2 · 2017-06-22T14:56:42.737

Create another UIBarButtonItem with type of .fixedSpace and some negative value as width. Then add both buttons as right bar button item.

      let button = UIButton(type: .system)
      button.setImage(UIImage(named: "right"), for: .normal) // 22x22 1x, 44x44 2x, 66x66 3x
      button.setTitle("Next", for: .normal)
      button.sizeToFit()
      button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
      let nextBtn = UIBarButtonItem(customView: button)
      let spaceBtn = UIBarButtonItem(barButtonSystemItem: .fixedSpace, target: nil, action: nil)
      spaceBtn.width = -8// Change this value as per your need
      self.navigationItem.rightBarButtonItems = [spaceBtn, nextBtn];

while the code may answer the question, It will be good to explain the code too — Sagar V, Jun 17 '17 at 14:13

score 0 · Answer 3 · answered Jun 22 '17 at 13:06

Adding UIBarButtonSystemItem.fixedSpace will occupy the extra space before the BarButtonItem.

    let button = UIButton(type: .system)
    button.setImage(UIImage(named: "ic_next_button"), for: .normal) // 22x22 1x, 44x44 2x, 66x66 3x
    button.setTitle("Next", for: .normal)
    button.sizeToFit()
    button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
    button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)

    let rightBarButton = UIBarButtonItem()
    rightBarButton.customView = button

    let negativeSpacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.fixedSpace, target: nil, action: nil)
    negativeSpacer.width = -25;

    self.navigationItem.setRightBarButtonItems([negativeSpacer, rightBarButton ], animated: false)

Next Button like Navigation's Back Button

3 Answers3