10

I am working on an application and I just upgraded to Xcode 9 / Swift 4 and also upgraded my iPhone to iOS 11. The application was installed when I installed iOS 11 and all seemed OK until I run it from Xcode. Now I am stuck with the default NavBar height.

The code I was using to change the height is no longer working:

class CustomNavControllerVC: UINavigationController
{
    let navBarHeight : CGFloat = 64.0
    let navbarBackButtonColor = UIColor(red: 247/255, green: 179/255, blue: 20/255, alpha: 1)

    override func viewDidLoad()
    {
        super.viewDidLoad()

        print("CustomNavControllerVC > viewDidLoad")
    }

    override func viewDidLayoutSubviews()
    {
        print("CustomNavControllerVC > viewDidLayoutSubviews")

        super.viewDidLayoutSubviews()

        navigationBar.frame.size.height = navBarHeight
        navigationBar.tintColor = navbarBackButtonColor
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}


// In my VCs

override func viewDidLoad()
{
    customizeNavBar()
}


func customizeNavBar()
{
    let navbarBackItem = UIBarButtonItem()
    navbarBackItem.title = "Înapoi"
    navigationItem.backBarButtonItem = navbarBackItem

    let navbarImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 55, height: 20))
    navbarImageView.contentMode = .scaleToFill

    let navbarLogo = UIImage(named: "NavBarLogo.png")
    navbarImageView.image = navbarLogo

    navigationItem.titleView = navbarImageView
}

So far the only thing I could find on this issue is this:

iOS 11 navigation bar height customizing

iOS11 customize navigation bar height

How to correctly set UINavigationBar height in iOS 11

But the info provided does not help, unfortunately.

Any ideas / suggestions?

daydr3am3r
  • 920
  • 4
  • 12
  • 31
  • Why can't go with Custom View instead of `UINavigationBar` ? – Mukesh Lokare Sep 20 '17 at 15:27
  • 2
    https://openradar.appspot.com/32912789 It appears that the UIKit team never intended for `UINavigationBar`'s to support custom heights. If you want to expand the size of the navigation bar I would use the techniques apple promotes here: https://developer.apple.com/library/content/samplecode/NavBar/Introduction/Intro.html – beyowulf Sep 20 '17 at 18:24
  • @mukesh_lokare - Initially the NavBar was supposed to have standard height with the logo image in the middle so I decided to use the standard NavBarController. 30 screens and lots of classes later, someone decided it must have custom height so I decided to use that method. – daydr3am3r Sep 25 '17 at 07:36
  • @beyowulf - I saw that but I was hoping for a solution. I'll use the provided techniques, see what happens. – daydr3am3r Sep 25 '17 at 07:37
  • So sad that we are hobbled by Apple's inept developers. Looks like the only thing to do is forget NavController and once again just DIY. – amergin Nov 10 '17 at 13:27

1 Answers1

-5

Updated 2017.10.6

I had the same problem. Below is my solution. I assume that height size is 66.

My solution is working fine iOS 10, 11.

Please choose my answer if it helps you.

Create NavgationBar.swift

import UIKit

class NavigationBar: UINavigationBar {

    //set NavigationBar's height
    var customHeight : CGFloat = 66

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

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

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        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)

                subview.backgroundColor = UIColor(red: 20/255, green: 20/255, blue: 20/255, alpha: 0.4)

            }
        }
    }


}

Set Storyboard

enter image description here

Set NavigationBar class

Set Custom NavigationBar class

Add TestView

enter image description here

Add TestView + Set SafeArea

ViewController.swift

import UIKit

class ViewController: UIViewController {

    var navbar : UINavigationBar!

    @IBOutlet weak var testView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        //update NavigationBar's frame
        self.navigationController?.navigationBar.sizeToFit()
        print("NavigationBar Frame : \(String(describing: self.navigationController!.navigationBar.frame))")

    }

    //Hide Statusbar
    override var prefersStatusBarHidden: Bool {

        return true
    }

    override func viewDidAppear(_ animated: Bool) {

        super.viewDidAppear(false)

        //Important!
        if #available(iOS 11.0, *) {

            //Default NavigationBar Height is 44. Custom NavigationBar Height is 66. So We should set additionalSafeAreaInsets to 66-44 = 22
            self.additionalSafeAreaInsets.top = 22

        }

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

SecondViewController.swift

import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.


        // Create BackButton
        var backButton: UIBarButtonItem!
        let backImage = imageFromText("Back", font: UIFont.systemFont(ofSize: 16), maxWidth: 1000, color:UIColor.white)
        backButton = UIBarButtonItem(image: backImage, style: UIBarButtonItemStyle.plain, target: self, action: #selector(SecondViewController.back(_:)))

        self.navigationItem.leftBarButtonItem = backButton
        self.navigationItem.leftBarButtonItem?.setBackgroundVerticalPositionAdjustment(-10, for: UIBarMetrics.default)


    }
    override var prefersStatusBarHidden: Bool {

        return true
    }
    @objc func back(_ sender: UITabBarItem){

        self.navigationController?.popViewController(animated: true)

    }


    //Helper Function : Get String CGSize
    func sizeOfAttributeString(_ str: NSAttributedString, maxWidth: CGFloat) -> CGSize {
        let size = str.boundingRect(with: CGSize(width: maxWidth, height: 1000), options:(NSStringDrawingOptions.usesLineFragmentOrigin), context:nil).size
        return size
    }


    //Helper Function : Convert String to UIImage
    func imageFromText(_ text:NSString, font:UIFont, maxWidth:CGFloat, color:UIColor) -> UIImage
    {
        let paragraph = NSMutableParagraphStyle()
        paragraph.lineBreakMode = NSLineBreakMode.byWordWrapping
        paragraph.alignment = .center // potentially this can be an input param too, but i guess in most use cases we want center align

        let attributedString = NSAttributedString(string: text as String, attributes: [NSAttributedStringKey.font: font, NSAttributedStringKey.foregroundColor: color, NSAttributedStringKey.paragraphStyle:paragraph])

        let size = sizeOfAttributeString(attributedString, maxWidth: maxWidth)
        UIGraphicsBeginImageContextWithOptions(size, false , 0.0)
        attributedString.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height))
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }




    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }



}

enter image description here enter image description here

Yellow is barbackgroundView. Black opacity is BarContentView.

And I removed BarContentView's backgroundColor.

enter image description here

That's It.

Shawn Baek
  • 1,928
  • 3
  • 20
  • 34
  • Thanks. I'll give it a try. – daydr3am3r Sep 25 '17 at 07:47
  • Thanks. But Safe Area's top is not updated. Safe Area's top is still 44px. Do you have a solution? I don't know how to update Safe Area's top after set navigation bar height. – Shawn Baek Oct 02 '17 at 10:08
  • @VictorRay Could you share your code? I use this code in my project. I wish to help you – Shawn Baek Dec 09 '17 at 12:01
  • ios 11.2 breaks this – dubbeat Dec 11 '17 at 10:26
  • In my case the visual appearance works fine, but any control that I put in those extra 22 pixels are not reacting to touch inputs. I have a big button which spans over the "border", say starts at top 25px and ends at bottom 60px. I try to click it and only the clicks which are within top 44px (the default bar height) are going through and are received. – frangulyan Dec 21 '17 at 00:49
  • didn't work. it actually look worse by moving the view up for iPhone X. – CodeOverRide Dec 22 '17 at 23:55
  • setting `frame = newValue` in `layoutSubviews()' will cause an endless loop as of iOS 11.2 unfortunately – Bersaelor Jan 06 '18 at 20:34