How to Increase Navigation Bar Height

Viewed 2573

1. How can I increase the hight of my navigation bar just like Apple did for the iMessage app:

enter image description here

2. How do they make the navigation bar expand when the titleView is clicked to look like this:

enter image description here

I've tried creating a larger titleView, but it just gets clipped to the bounds of the default navigation bar height. How are they able to achieve this? Also, my view controllers are embedded in a navigation controller programmatically.

3 Answers

Unsure if you've just embedded Navigation into the app... or set this up programatically.

You'll need to add your navBar as a sort of "IBOulet", and then modify it's height based on an function/action/etc.

Say when you click "name button"; then something akin to "mainNavBar.heightAnchor.constant = 400" (where 400 is the new height).

Or if you've set this up manually, and have a auto layout constraint on the height of your nav bar, then you could set that up as a IBOutlet; and access it easier.

It would help if you posted some of your code, or atleast how you've set this up.

Use navigation view instead of navigation bar or use custom view on viewDidLoad function hide navigation bar and show your custom view

Use this class for navigation bar height :

   import Foundation
    import UIKit

    class NavigationBar: UINavigationBar {

        //set NavigationBar's height
        //For iphonex, I recommended to set the minimum height to 88 or higher.
        var customHeight : CGFloat = 100

        required init?(coder aDecoder: NSCoder) {
            super.init(coder: aDecoder)


            translatesAutoresizingMaskIntoConstraints = false


        }

        override func sizeThatFits(_ size: CGSize) -> CGSize {

            return CGSize(width: UIScreen.main.bounds.width, height: customHeight)

        }

        override func layoutSubviews() {
            super.layoutSubviews()

            self.tintColor = .black

            frame = CGRect(x: frame.origin.x, y:  0, width: frame.size.width, height: customHeight)

            // title position (statusbar height / 2)
            setTitleVerticalPositionAdjustment(-10, for: UIBarMetrics.default)

            for subview in self.subviews {
                var stringFromClass = NSStringFromClass(subview.classForCoder)
                if stringFromClass.contains("BarBackground") {
                    subview.frame = CGRect(x: 0, y: 0, width: self.frame.width, height: customHeight)
                    subview.backgroundColor = .yellow

                }

                stringFromClass = NSStringFromClass(subview.classForCoder)
                if stringFromClass.contains("BarContent") {

                    subview.frame = CGRect(x: subview.frame.origin.x, y: 20, width: subview.frame.width, height: customHeight - 20)


                }
            }
        }


    }
Related