The problem is that color that I set for the UINavigationBar is different from the same color, which I have set for the layer. I want it to be the same! :) (see image)
AppDelegate.swift
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(UIImage.imageWithColor(primaryColor), forBarMetrics: .Default)
UINavigationBar.appearance().barTintColor = primaryColor
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName: UIFont.systemFontOfSize(17), NSForegroundColorAttributeName:UIColor.whiteColor()]
MyController.swift in viewDidLoad()
view.backgroundColor = primaryColor
Extensions.swift
let primaryColor = UIColor(red: 132/255, green: 205/255, blue: 93/255, alpha: 1)
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
UIGraphicsBeginImageContext(rect.size)
let context = UIGraphicsGetCurrentContext()
CGContextSetFillColorWithColor(context, color.CGColor)
CGContextFillRect(context, rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
I think the problem is in UIImage extension. Please help me to solve this problem.
Solved
UINavigationBar.appearance().translucent = false
Just uncheck the Translucent property of Navigation Bar. It's worked for me.
Related
I added a Gradient layer to my navigation bar and also having bar button item , just in iOS 13.0 + when I used this gradient layer my bar button items will hide and when I swipe the view to back to the previous page I will see them but when its full screen I can not see them although I can see them in old iOS versions without any problem and also in UI Debugging
extension UIImage {
static func getGradientImage(withColors colors: [UIColor], view: UIView) -> UIImage {
let gradient = CAGradientLayer(layer: colors)
gradient.frame = view.bounds
gradient.locations = [0.0, 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
return UIImage.image(from: gradient) ?? UIImage()
}
static func image(from layer: CALayer) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(layer.bounds.size,
layer.isOpaque, UIScreen.main.scale)
defer { UIGraphicsEndImageContext() }
guard let context = UIGraphicsGetCurrentContext() else {
return nil
}
layer.render(in: context)
return UIGraphicsGetImageFromCurrentImageContext()
}
}
so this one was set navigation gradient layer background and also after this
if #available(iOS 13.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .clear
appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
if let navBar = navigationController?.navigationBar {
appearance.backgroundImage = UIImage.getGradientImage(withColors: [#colorLiteral(red: 0.9258083701, green: 0.4127946496, blue: 0, alpha: 1),#colorLiteral(red: 0.7787303329, green: 0.01916297711, blue: 0.1483061314, alpha: 1)], view: navBar)
}
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
UINavigationBar.appearance().compactAppearance = appearance
} else {}
self.navigationBackButtonTitle(str.back)
let topTitle = UIBarButtonItem()
topTitle.title = "Top Title"
self.navigationItem.leftBarButtonItem = topTitle
so what the problem can be ?
Best practice of gradient navigation bar is setting gradient background image for iOS 13. Adding through layer will cause the problem you ask.
Basically first you need to create gradient image from the colors.
static func getGradientImage(withColors colors: [UIColor], view: UIView) -> UIImage {
let gradient = CAGradientLayer(colors: colors)
gradient.frame = view.bounds
gradient.locations = [0.0, 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
return UIImage.image(from: gradient) ?? UIImage()
}
static func image(from layer: CALayer) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(layer.bounds.size,
layer.isOpaque, UIScreen.main.scale)
defer { UIGraphicsEndImageContext() }
guard let context = UIGraphicsGetCurrentContext() else {
return nil
}
layer.render(in: context)
return UIGraphicsGetImageFromCurrentImageContext()
}
After that you need to set navigation bar background image with navigation bar appearance.
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundColor = .clear
if let navBar = navigationController?.navigationBar {
appearance.backgroundImage = UIImage.getGradientImage(withColors: colors, view: navBar)
}
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance
navigationController?.navigationBar.compactAppearance = appearance
I have a problem in making the NavigationBar transparent instead it shows the white as background color.
I wish to achieve this
But instead i am getting the following NavigationBar as background color.
It is showing white as background color. It is not getting transparent
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = UIColor.clear
self.navigationController?.navigationBar.setBackgroundImage(imageWithColor(color: color.withAlphaComponent(alpha)), for: .default)
self.navigationController?.navigationBar.shadowImage = imageWithColor(color: color.withAlphaComponent(alpha))
fileprivate func imageWithColor(color : UIColor) -> UIImage? {
let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
UIGraphicsBeginImageContext(rect.size)
let ctx = UIGraphicsGetCurrentContext()
ctx?.setFillColor(color.cgColor)
ctx?.fill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
call in func viewWillAppera . you will get
You also try below code.
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default);
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
self.navigationController?.navigationBar.isTranslucent = true
I have a navigation bar with an UIImage. I want to change the colour of it, but when I use my code, the default black colour is used. My code is below.
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 26, height: 26))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "pinpoint.png")
imageView.image = image
navigationItem.titleView = imageView
imageView.image = UIImage(named: "pinpoint.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal)
imageView.tintColor = UIColor(red: 22.0/255.0, green: 40.0/255.0, blue: 86.0/255.0, alpha: 1.0)
}
The colour I want to use is on the last line of the snippet.
You can try this way:
override func viewDidLoad() {
super.viewDidLoad()
let imageView = UIImageView(image: UIImage(named:"pinpoint.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate))
imageView.contentMode = .ScaleAspectFit
navigationItem.titleView = imageView
imageView.tintColor = UIColor(red: 22.0/255.0, green: 40.0/255.0, blue: 86.0/255.0, alpha: 1.0)
}
Hope this help. :)
This is what the project currently looks like
And this is the code that I use
func styleNavBar() {
let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
navigationBarAppearace.titleTextAttributes = [NSForegroundColorAttributeName:UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.0)]
navigationBarAppearace.translucent = true
navigationBarAppearace.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
navigationBarAppearace.setBackgroundImage(UIImage(), forBarMetrics: .Default)}
I have tried to remove the following code, but then it looks like this.
navigationBarAppearace.setBackgroundImage(UIImage(), forBarMetrics: .Default)
My question is, how do I get the navbar to fill up to the top? and still have the same look
First, create an extension for UIImage which create image with solid color of specified size.
Keep this extension in any ViewController at class label
extension UIImage {
class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
then use the below method to customise your navbar
func styleNavBar() {
let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
navigationBarAppearace.titleTextAttributes = [NSForegroundColorAttributeName:UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.0)]
navigationBarAppearace.isTranslucent = true
let colorImage = UIImage.imageWithColor(color: UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3), size: CGSize(width: UIScreen.main.bounds.width, height: 64))
navigationBarAppearace.setBackgroundImage(colorImage, for: .default)
}
Hope this will solve your problem.
I'm using this code on my UINavigationBar to make it transparent. You can adjust it to your needs. In the picture there's a searchController in the titleView
if let topBar = self.navigationController?.navigationBar {
topBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
topBar.shadowImage = UIImage()
topBar.barTintColor = UIColor.clearColor()
topBar.tintColor = UIColor.whiteColor()
topBar.translucent = true
}
Here's what it looks like:
I want to make my navigation bar have a tinge of a colour but not go completely translucent.
Here is the code I have and their results:
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = true
UINavigationBar.appearance().barTintColor = UIColor(red: 0, green: 107/255, blue: 178/255, alpha: 0.5)
But if I turn the 'translucent' to false i.e use this code:
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = false
UINavigationBar.appearance().barTintColor = UIColor(red: 0, green: 107/255, blue: 178/255, alpha: 0.5)
I get this result:
How do I make the bar have an alpha value of 0.5 or be 'part translucent'?
Thank you, any help will be appreciated.
I would set a translucent background image for the navigation bar.
Use this code:
UINavigationBar.appearance().setBackgroundImage(UIColor.green.toImage()?.imageWithAlpha(alpha: 0.5), for: .default)
Two extensions used:
Create an UIImage from UIColor:
extension UIColor {
func toImage() -> UIImage? {
return toImageWithSize(size: CGSize(width: 1, height: 1))
}
func toImageWithSize(size: CGSize) -> UIImage? {
UIGraphicsBeginImageContext(size)
if let ctx = UIGraphicsGetCurrentContext() {
let rectangle = CGRect(x: 0, y: 0, width: size.width, height: size.height)
ctx.setFillColor(self.cgColor)
ctx.addRect(rectangle)
ctx.drawPath(using: .fill)
let colorImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return colorImage
} else {
return nil
}
}
}
Create a new UIImage from an UIImage with a specified Alpha:
extension UIImage {
func imageWithAlpha(alpha: CGFloat) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, scale)
draw(at: CGPoint.zero, blendMode: .normal, alpha: alpha)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
}