Transparent/translucent navigation bar with button items in Swift - ios

I'm trying to get an almost transparent navigation bar. But I don't want the buttons on it to be transparent.
This is my code:
navigationController?.navigationBar.backgroundColor = UIColor.blackColor()
navigationController?.navigationBar.barTintColor = UIColor.blackColor()
navigationController?.navigationBar.translucent = true
navigationController?.navigationBar.alpha = 0.3
This does make it translucent but it also makes the buttons translucent/faded. How can I have a translucent bar but still have the buttons opaque?

Try this:
navigationController?.navigationBar.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.3)

navigationController?.navigationBar.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.3)
navigationController?.navigationBar.barTintColor = UIColor.blackColor()
navigationController?.navigationBar.translucent = true

Related

Black box when transitioning from custom large title nav bar to regular nav bar

There is a strange thing that occurs when I transition from one view with a large title navigation bar that has been customized with a different shadow to another view that has a regular height navigation bar. You can see the black box in this gif
Here is the related code that lives in both the main view and detail view
Main view:
func setupNavBar() {
// Set the nav bar to have large titles. This is on a per instance basis
navigationController?.navigationBar.prefersLargeTitles = true
navigationController?.navigationBar.isTranslucent = false
navigationController?.navigationBar.barTintColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.layer.shadowColor = UIColor(red:0.87, green:0.87, blue:0.87, alpha: 0.3).cgColor
navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
navigationController?.navigationBar.layer.shadowRadius = 6.0
navigationController?.navigationBar.layer.shadowOpacity = 1.0
navigationController?.navigationBar.layer.masksToBounds = false
}
Detail view:
func setupNavBar() {
self.title = colorPalette?.title
navigationController?.navigationBar.prefersLargeTitles = false
navigationController?.navigationBar.isTranslucent = false
navigationController?.navigationBar.barTintColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black
navigationController?.navigationBar.shadowImage = UIImage()
navigationController?.navigationBar.layer.shadowColor = UIColor(red:0.87, green:0.87, blue:0.87, alpha: 0.3).cgColor
navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0.0, height: 3.0)
navigationController?.navigationBar.layer.shadowRadius = 6.0
navigationController?.navigationBar.layer.shadowOpacity = 1.0
navigationController?.navigationBar.layer.masksToBounds = false
}
There is no view that has a black background in interface builder either. I'm not sure why this is happening.
Instad of
navigationController?.navigationBar.isTranslucent = false
use
navigationController?.navigationBar.isTranslucent = true
Check ✓ Extended Edges Under Opaque Bars on storyboard, or set
extendedLayoutIncludesOpaqueBars = true
Or set the navigationBar's translucent to true.
navigationController?.navigationBar.isTranslucent = true

UINavigationItem Transparency iOS

I am using Navigation controller in my app. For my view controller, I used UINavigationItem and added UIBarButton items and title views.
I need to implement transparency to my Navigation Bar.
I have added the below code.
self.navigationController?.navigationBar.isTranslucent = true
let navAlpha = 0.7// Your appropriate calculation
let image = UIImage.imageFromColor(color: UIColor.red.withAlphaComponent(CGFloat(navAlpha)))
self.navigationController?.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)
self.navigationController?.navigationBar.barStyle = .default
The output of this is:
How do I make whole navigation bar including UINavigationItem transparent?
Add this code in first view Controller.
var navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.isTranslucent = true
let navAlpha = 0.7// Your appropriate calculation
let image = UIImage.imageFromColor(color:
UIColor.red.withAlphaComponent(CGFloat(navAlpha)))
navigationBarAppearace.setBackgroundImage(image, for: UIBarMetrics.default)
navigationBarAppearace.barStyle = .default
I think you could do this in storyboard. Set your Top Bar to be inferred navigation controller. and do this for navigation bar.
Try this
AppDelegate
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().barTintColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
UINavigationBar.appearance().titleTextAttributes = [
NSForegroundColorAttributeName: WHITE_COLOR]
UINavigationBar.appearance().tintColor = WHITE_COLOR
UINavigationBar.appearance().isTranslucent = true
To make the navigation bar completely transparent:
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor.clear
I don't understand why did you add red image as the navigation bar's backgroundImage if you want to make it transparent.

Navigation Controller Black when trying to make transparent

Completely stumped. I've looked all over and implemented every solution I could find. I can't seem to get the navigation bar to become transparent.
When trying to set the background color, I just get a black bar at the top. Same as if I try to set the background images. I've tried all of these and all of there many variations.
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor.clear
I'm using it in
viewWillAppear() and in an animation when scrolling. The navigation bar is transparent, and then as you scroll navigation bar gets a white background with gray text.
func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.navigationController?.navigationBar.barStyle = .default
let offset = self.tableView.contentOffset.y
if offset > 250.0 {
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.darkGray]
self.navigationController?.navigationBar.topItem?.title = spot!.Name
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.tintColor = UIColor.darkGray
self.navigationController?.isNavigationBarHidden = false
self.navigationController?.navigationBar.barTintColor = UIColor.white
}
else {
self.navigationController?.navigationBar.topItem?.title = nil
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.isNavigationBarHidden = false
self.navigationController?.navigationBar.tintColor = UIColor.white
self.navigationController?.navigationBar.barTintColor = UIColor.white
self.navigationController?.navigationBar.shadowImage = UIImage()
}
}
I've also tried setting the background color to white, and changing the alpha = 0, but that doesn't work either.
Any help greatly appreciated.
This is because the window's background color is black and
You should set window?.backgroundColor = UIColor.white
in the AppDelegate application didFinishLauchingWithOptions method

Navigation Bar change color when running

When I switch to another screen, the navigation bar (white) turns gray (if I put another color took a darker shade of the same color)
This is my code to choose the color
self.navigationController!.navigationBar.barTintColor = UIColor.whiteColor()
self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blackColor()]
self.navigationController!.navigationBar.translucent = false
Any idea to prevent this from happening and keep the color I want
Try below, it will surely works.
self.navigationController!.navigationBar.translucent = false;
self.navigationController!.navigationBar.barTintColor = UIColor.whiteColor()
self.navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blackColor()]
while going to other screen your navigation bar turns gray because, On iOS7 and later, translucent property of UINavigationBar is true by default.
Try this :
1)
var controller= UINavigationController(rootViewController:YourViewController)
controller.navigationBar.tintColor = [UIColor whiteColor];
2)
var navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor.whiteColor()
navigationBarAppearace.barTintColor = UIColor.whiteColor()

Changing the Color of Navigation Bar in Swift

I have a MKMap in my ViewController and I allow my users to switch map types between "Standard", "Hybrid", and "Satellite" - much like in the Maps app. Like in the maps app I have a bottom bar, and then I have a navigation bar at the top. When the user switches between map types, the bars should change to a black background with white buttons for "Hybrid" and "Satellite", and a white background with blue buttons for "Standard.
I have the bottom bar changing colors correctly but am unable to get the navigation bar to change at all. Here is my function for when a user changes map types:
func changeMapType(sender:UISegmentedControl){
if mapType.selectedSegmentIndex == 0{
mapView.mapType = MKMapType.Standard
toolbar.barTintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
toolbar.tintColor = UIColor(red:0.0, green:122.0/255.0, blue:1.0, alpha:1.0)
self.navigationController?.navigationBar.translucent = false
self.navigationController?.navigationBar.barTintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
self.navigationController?.navigationBar.tintColor = UIColor(red:0.0, green:122.0/255.0, blue:1.0, alpha:1.0)
defaults.setValue("Standard", forKey: "initialMapType")
}
else if mapType.selectedSegmentIndex == 1{
mapView.mapType = MKMapType.Hybrid
toolbar.barTintColor = UIColor.blackColor()
toolbar.tintColor = UIColor.whiteColor()
self.navigationController?.navigationBar.translucent = false
self.navigationController?.navigationBar.barTintColor = UIColor.blackColor()
self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()
defaults.setValue("Hybrid", forKey: "initialMapType")
}
else if mapType.selectedSegmentIndex == 2{
mapView.mapType = MKMapType.Satellite
toolbar.barTintColor = UIColor.blackColor()
toolbar.tintColor = UIColor.whiteColor()
self.navigationController?.navigationBar.translucent = false
self.navigationController?.navigationBar.barTintColor = UIColor.blackColor()
self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()
defaults.setValue("Satellite", forKey: "initialMapType")
}
}
Does anyone know what I must do differently to get my nav bar to change colors?
It is very probably because your self.navigationController is empty. Try that first! It is o-so-very common problem. Maybe you are calling it from wrong view controller that in fact does not have NC. You can go around that problem by using .appearance() interface, like this:
To change bar tint color (background of navigation bar):
UINavigationBar.appearance().barTintColor = UIColor.whiteColor()
To change color of the texts:
UINavigationBar.appearance().titleTextAttributes = [UITextAttributeTextColor: UIColor.whiteColor()]
Be aware that this changes navigation bar for entire application (basically, appearance is the way how to change default setting), so it might not be appropriate. If you are interested, here you can read more about appearance.
Hope it helps!
Edit: Easy way how to check for empty navigation controller would be force-unwrapping the variable, self.navigationController!.navigationBar instead of ?, if your app crashes, your problem lies here (but don't tell to anyone I suggested that as it is not very slick solution how to find the problem, though fast)
Updated for Swift 3, 4, 4.2, 5+
// setup navBar.....
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
Swift 4
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
Swift 4.2, 5+
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
Also can check here : https://github.com/hasnine/iOSUtilitiesSource

Resources