Make a colored line under the navigation bar

I want to make a colored line under the navigation bar in my Xcode project (swift 5). I was inspired by this code. But I can't get it right.

Here is my code and a picture.


import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.navigationController?.addCustomBottomLine(color: UIColor.black, height: 20)
}
override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}
}
extension UINavigationController
{
    func addCustomBottomLine(color:UIColor,height:Double)
    {
        //Hiding Default Line and Shadow
        navigationBar.setValue(true, forKey: "hidesShadow")
        //Creating New line
        let lineView = UIView(frame: CGRect(x: 0, y: 0, width:0, height: height))
        lineView.backgroundColor = color
        navigationBar.addSubview(lineView)

        lineView.translatesAutoresizingMaskIntoConstraints = false
        lineView.widthAnchor.constraint(equalTo: navigationBar.widthAnchor).isActive = true
        lineView.heightAnchor.constraint(equalToConstant: CGFloat(height)).isActive = true
        lineView.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
        lineView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true
    }
}
Post not yet marked as solved Up vote post of fstork Down vote post of fstork
4k views

Replies

Images do not show on the forum.


But I can't get it right.

What do you get ?


Are you sure this anchor is correct ?

        lineView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true

That put the line beyong the parent view


Shouldn't it be

        lineView.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true

Nothing happens. I dont know if i have to link the navigation bar in the Storyborad to the ViewController.

Nothing happens


Do you see the navBar but not the line below ?


Did you test changing the anchor ?


For testing, I would change as follows:


extension UINavigationController
{
    func addCustomBottomLine(color:UIColor,height:Double)
    {
        //Hiding Default Line and Shadow
        navigationBar.setValue(true, forKey: "hidesShadow")
        //Creating New line
        let lineView = UIView(frame: CGRect(x: 0, y: 0, width:200, height: height))      // HAVE SOME WIDTH TO START
        lineView.backgroundColor = color
        navigationBar.addSubview(lineView)

        print(lineView)

        lineView.translatesAutoresizingMaskIntoConstraints = false
        lineView.widthAnchor.constraint(equalTo: navigationBar.widthAnchor).isActive = true
        lineView.heightAnchor.constraint(equalToConstant: CGFloat(height)).isActive = true
        lineView.centerXAnchor.constraint(equalTo: navigationBar.centerXAnchor).isActive = true
       //   lineView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true // REPLACE BY
        lineView.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor).isActive = true 
    }
}

Yes i did. But nothing happens. Its still a navigation bar with a 1 pixel grey line instead of a colored line.

What do you get from the print ?

My suggestion is to add a (transparent?) background that has a thin lower colored border along the bottom. Don't fight the bar's native appearance otherwise.


see: https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar?language=objc