Cannot change navigation bar item height in iOS 11

Question

After customizing the navigation bar height bigger than the default value (44pt), I want to change the height of my right side navigation bar item button, but it's limited in 44pt. How can I make it taller? I know that in iOS 11, the button now is inside a UIBarButtonStackView, it seems we cannot change the stack view frame?

I use this code to change the width and height of the button:

button.widthAnchor.constraint(equalToConstant: 40).isActive = true
button.heightAnchor.constraint(equalToConstant: 60).isActive = true
button.translatesAutoresizingMaskIntoConstraints = false
button.setImage(image, for: .normal)

let barButton = UIBarButtonItem(customView: button)
self.navigationItem.rightBarButtonItem = barButton

Thank you!

see this once may be it helps you https://stackoverflow.com/questions/31940352/how-to-increase-the-height-of-navigation-bar-in-xcode/31940514#31940514 — Anbu.Karthik, Apr 11 '18 at 04:11
@Anbu.karthik I want to change the navigation bar item button, not the navigation bar, your answer is about the navigation bar. — Lucy, Apr 11 '18 at 04:20
Did you set any image in your bar button item or just the custom icon? — Rashed, Apr 11 '18 at 04:23
@MdRashedPervez I did set image for the bar button, I have updated the question. — Lucy, Apr 11 '18 at 04:27
ok.. now i see.. you can only change the width of the item not height. height will change automatically according with the height of nav bar. i will provide you the code below. — Rashed, Apr 11 '18 at 04:28
@Lucy - UIBarButtonItem only has a width property that can be set but unfortunately not a height property.based on your navigation bar height it will be increase — Anbu.Karthik, Apr 11 '18 at 04:36
@Anbu.karthik I have changed the height of navigation bar, but in iOS 11, the bar button doesn't increase follow it. — Lucy, Apr 11 '18 at 04:40

score 1 · Accepted Answer · answered Apr 11 '18 at 04:50

1

You can change the width of navigation bar button item by using this code -

override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
            var frame: CGRect? = navigationItem.leftBarButtonItem?.customView?.frame
            frame?.size.width = 5  // change the width of your item bar button
            self.navigationItem.leftBarButtonItem?.customView?.frame = frame!
        }
        override var prefersStatusBarHidden : Bool {
            return true
        }

Or from storyboard -

Make sure your Assets.xcassets image is set as Render As - Original Image Just like -

answered Apr 11 '18 at 04:50

Rashed

2,349
11
26

Thank you. I'm able to change the bar button height now, work beautifully, however when I set frame.origin.y = -20 to move the button down, it doesn't work. Do you have any idea about it? – Lucy Apr 11 '18 at 07:35
button will take the center position proportionally. by the way -20 will move the button up not down. – Rashed Apr 11 '18 at 07:44
In my case, it isn't centered. It always stick to the top – Lucy Apr 11 '18 at 08:34
if you use image view instead of bar button item then it will be very easy for your development. You should try it. – Rashed Apr 11 '18 at 08:51
I haven't try it before, you mean use the imageView as custom view for UIBarButtonItem right? Or just the image view? How to add image view to navigation bar? – Lucy Apr 11 '18 at 09:03
just take a imageView or a button replace with an image. on where you put the bar button item. then you can relocate it any where in navigation bar. – Rashed Apr 11 '18 at 09:06
I don't really get it, do you mean add the image into the navigation bar or add it into the view controller and locate it in the position I want to? – Lucy Apr 11 '18 at 09:20
the same way you put the bar button item on top of the navigation bar. if u set imageView you should know how to chnage that image after putting it there. – Rashed Apr 11 '18 at 09:23
By your way, I have to remove the image manually whenever app move to another view. And do the same job if the navigation bar in other view controllers have different bar buttons too. It not cool as all. – Lucy Apr 11 '18 at 09:50
Customization was never cool. but it creates cool things. :) – Rashed Apr 11 '18 at 09:56

score 0 · Answer 2 · answered Apr 11 '18 at 07:11

Using subclass of UInavigationcontroller class and NavigationBar class you can achieve this. I am sharing some code of snipt:

class ARVNavigationController { 
 init(rootViewController: UIViewController) {
 super.init(navigationBarClass: AVNavigationBar.self, toolbarClass: nil)

viewControllers = [rootViewController] }}



class AVNavigationBar { 

 let AVNavigationBarHeight: CGFloat = 80.0


 init?(coder aDecoder: NSCoder) {
 super.init(coder: aDecoder)
 initialize()
}



init(frame: CGRect) {
super.init(frame: frame ?? CGRect.zero)
initialize()
}

func initialize() {
   transform = CGAffineTransform(translationX: 0, y: +AVNavigationBarHeight)
}

func layoutSubviews() {
   super.layoutSubviews()
   let classNamesToReposition = ["_UINavigationBarBackground", "UINavigationItemView", "UINavigationButton"]
   for view: UIView? in subviews() {
       if classNamesToReposition.contains(NSStringFromClass(view.self)) {
         let bounds: CGRect = self.bounds()
         let frame: CGRect? = view?.frame
         frame?.origin.y = bounds.origin.y + CGFloat(AVNavigationBarHeight)
         frame?.size.height = bounds.size.height - 20.0
         view?.frame = frame ?? CGRect.zero
       }
   }
}

 func position(for bar: UIBarPositioning) -> UIBarPosition {
    return .topAttached
 }

}

That if condition is used to check what elements in UINavigationController you want to change like _UINavigationBarBackground UINavigationItemView — Arvind, Apr 11 '18 at 08:42
I tried to print out the subview class name, but there is no UINavigationItemView or UINavigationButton. — Lucy, Apr 11 '18 at 08:43

Cannot change navigation bar item height in iOS 11

2 Answers2