CODEWITHSUNDEEP
iosswiftuinavigationbaruibarbuttonitem
Nitesh
Nitesh

Reputation: 2024

Next Button like Navigation's Back Button

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)

enter image description here

Upvotes: 7

Views: 1208

Answers (3)

RajeshKumar R
RajeshKumar R

Reputation: 15748

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];

Upvotes: 2

Bala
Bala

Reputation: 1294

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)

Upvotes: 0

Bruno Guerios
Bruno Guerios

Reputation: 308

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:

Upvotes: 7

Related Questions