Adding Separator to UINavigationBar - iOS

Question

I noticed the apple clock app has a thin bar on its header that separates it nicely from the content and makes the interface look slightly 3D. I wanted to replicate this on my own navigation bar but can't see a way to do so? How would I achieve this

you can put UIView(height constraint is equal to 1 and width constraint is equal to super view width) under UINavigation Bar. — Ioan Moldovan, Nov 21 '16 at 16:41
Take a look at this http://stackoverflow.com/questions/26390072/remove-border-in-navigationbar-in-swift — José Neto, Nov 21 '16 at 17:03

score 7 · Answer 1 · edited Feb 21 '21 at 02:14

I've created an Extension on UINavigationBar to show or hide that separator line. By default I've noticed UINavigationBar has a separator by default.

extension UINavigationBar {

    func hideNavBarSeparator() {
        let image = UIImage()
        shadowImage = image
        setBackgroundImage(image, for: UIBarMetrics.default)
    }

    func showNavBarSeparator() {
        let img = UIImage.pixelImageWithColor(color: UIColor.red)
        shadowImage = img
    }
}

extension UIImage {
    class func pixelImageWithColor(color: UIColor) -> UIImage? {
        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        context.setFillColor(color.cgColor)
        context.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image
    }
}

Here is how to use it:

yourNavigationBar.hideNavBarSeparator()

yourNavigationBar.showNavBarSeparator()

Adding Separator to UINavigationBar - iOS

1 Answers1