CODEWITHSUNDEEP
iosswiftuinavigationcontrolleruinavigationbar
TIMEX
TIMEX

Reputation: 271774

How to change the color of the bottom border of UINavigationBar?

I read many threads, but none solved this question in a clear, consistent answer for the latest version of Swift.

For example, this question's top answer suggests UINavigationBar.appearance().setShadowImage(). However, such a method does not exist in the latest version of swift.

I don't want to hide the bottom border. I just want to change the color.

Additionally, it'd be great to be able to change the height, but I know I'm asking too much in one question.

Edit: I created a 2x1 pixel image and set it to the shadowImage, but the border remains unchanged:

UINavigationBar.appearance().barTintColor = UIColor.whiteColor()
UINavigationBar.appearance().shadowImage = UIImage(named: "border.jpg") //in my AppDelegate, for global appearance

Here's the image; it's really small: border image

Upvotes: 13

Views: 9928

Answers (3)

Shalugin
Shalugin

Reputation: 1204

A bit tricky solution, but it works with no coding and extensions needed. Just add in StoryBoard under your navigationBar a Progress View and set its color and height to whatever you like. If you want full border also set progress to 1.

enter image description here

So you will get a proper border for your navigation bar and an option to add progressView at any time as extra bonus. I know, I know... it's kinda tricky, but programmers should be lazy, no?

Upvotes: 0

ZGski
ZGski

Reputation: 2538

SWIFT 2.x :

Out of convenience, I've extended UIImage() to allow me to essentially use it as a color with the code immediately below.

extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRectMake(0, 0, 1.0, 0.5)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0)
        color.setFill()
        UIRectFill(rect)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

Next, you'll want to add the following lines to your code to adjust the viewController's UINavigationBar's shadow image, or color in this instance.

// Sets Bar's Background Image (Color) //
self.navigationController?.navigationBar.setBackgroundImage(UIImage.imageWithColor(UIColor.blueColor()), forBarMetrics: .Default)
// Sets Bar's Shadow Image (Color) //
self.navigationController?.navigationBar.shadowImage = UIImage.imageWithColor(UIColor.redColor())

SWIFT 3.x / 4.x :

Extension code:

extension UIImage {
    class func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5)
        UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
        color.setFill()
        UIRectFill(rect)
        let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}

NavigationBar code:

// Sets Bar's Background Image (Color) //
navigationController?.navigationBar.setBackgroundImage(UIImage.imageWithColor(color: .blue), for: .default)
// Sets Bar's Shadow Image (Color) //
navigationController?.navigationBar.shadowImage = UIImage.imageWithColor(color: .red)

Edit 1:

Updated extension code so you can adjust rect size without changing UIImage color opacity.

Edit 2:

Added Swift 3 + Swift 4 code.

Upvotes: 23

catalandres
catalandres

Reputation: 1159

Old UIKit setter methods like UISomeClass.setSomething(whatIWantToSet) have been reformulated so that you can directly set them with an = sign. So, in my example you would have to use UISomeClass.something = whatIWantToSet.

In your case, it's UINavigationBar.appearance().shadowImage = whatYouWantToSet.

Upvotes: 2

Related Questions