I currently have a project set up where for during sign up I am using a UINavigationController to manage the view controllers, and as part of the design I set the UINavigationBar to be transparent with the following code:
let navBar: UINavigationBar! = self.navigationController?.navigationBar
navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
navBar.shadowImage = UIImage()
navBar.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
navBar.tintColor = UIColor.white
navBar.barTintColor = UIColor.clear
This allows me to use the navigation controller's heirarchy to manage the backwards/forwards movement, and works fine, except that when I show a view controller, any view that I have (set up through Autolayout) does a "jumping" motion to get into its correct position (just like this question's video https://vid.me/9kB5). Some searching led me to try the following 2 solutions
1.) Uncheck Extend Edges - Under Top Bars in my storyboard view controller
2.) Set translucency for the nav bar to false
navBar.isTranslucent = false
This solves the jumping motion and causes the views to be in place when they load, but the problem with this is that the navigation bar now becomes the barTintColor (which for UIColor.clear ends up being black). It seems I am unable to keep both transparency and translucency at the same time. A lot of similar questions on Stack have navigation bars with set colors and not transparent.
The next approach I thought of would be that I would have to get rid of the UINavigationController, and instead implement back buttons on each of my sign up view controllers, but I was hoping to try and tackle this with the navigation controller.
Is it possible to have a UINavigationBar have translucency set to false but maintain transparency?
EDIT: Here's a picture of what the nav bar looks like with the isTransluscent = false code:
Try changing "alpha" property. Make sure that everything you do with navigation bar you do on the main thread.
Solution 2: you can set specific UIImage for your navigation bar background.
Related
I have a navigation bar which includes a UISearchController, and I cannot find a way to get rid of the 1px bottom border below the navigation bar:
I am already using the tricks for removing the navigation bar bottom border as suggested in this answer and many others:
navigationBar.isTranslucent = false
navigationBar.setBackgroundImage(aTransparentImage, for: .default)
navigationBar.shadowImage = nil
If I don't set the searchController on the navigationItem of my view controller it's fine, there is no bottom border, but as soon as I set the searchController it appears.
Even the dirty hacks that look for a 1px UIImageView in the nav bar view hierarchy don't work, as it seems this view is in a separate tree of the hierarchy. It's the UIImageView highlighted in blue below:
I'm out of ideas 😕
Ok, a colleague of mine provided a solution. In viewWillAppear in the view controller which is showing the search bar do:
if let imageView = navigationItem.searchController?
.searchBar.superview?
.subviews.first?
.subviews.last as? UIImageView,
imageView.frame.height * UIScreen.main.scale == 1.0 {
imageView.isHidden = true
}
This is obviously highly dependent on the exact view hierarchy that UIKit is using for the search bar, and could stop working with any future release of iOS (it works on iOS 12). You could make it more resilient by searching the superview subviews for a 1px height UIImageView, but still, it's quite a hack.
But so far, it's the only solution I have found that works.
Try to add
self.extendedLayoutIncludesOpaqueBars = true
or
self.automaticallyAdjustsScrollViewInsets = false;
self.extendedLayoutIncludesOpaqueBars = true
in ViewDidLoad Method. It worked for me
I want a blue color for my navigation bar and status bar backgrounds while a white color background for the rest of the view controller. I want this for all my view controllers in the app. Naturally, I have in my BaseViewContrller for statusbar:
self.view.backgroundColor = UIColor.blue
But this causes the whole view controller to go blue. Is adding a white UIView and constraining it to safe areas the only option or there is an easy way to accomplish this?
Yes, because you're setting ViewController's view background color and not navigationBar background color. Instead set background color of navigation bar
navigationController?.navigationBar.backgroundColor = .blue
I have a simple view controller with a view (map) pinned to its superview. The view is embedded on a navigation controller, but the navigation bar starts under the safe area (below status bar) on iPhone X. Ideally, I would like the bar to be under the status bar (not below it), when rendered on an iPhone X. How can I go about doing this?
This is how the bar is being set up to make it semi transparent:
//Design Set Up
let navBar = UINavigationBar.appearance()
navBar.setBackgroundImage(UIImage(), for: .default)
navBar.backgroundColor = UIColor(displayP3Red: 0, green: 0, blue: 0, alpha: 0.5)
You should embed the view controller in a UINavigationController, not use just a UINavigationBar. That way you will automatically get a navigation bar with the navigation controller and it will extend fully to the top of the screen.
https://developer.apple.com/documentation/uikit/uinavigationcontroller
You can add it in a Storyboard or if you're using code, something like:
let mapViewController = UINavigationController(rootViewController: MapViewController())
(assuming your map is called MapViewController)
I am trying to achieve a transparent navigation bar such that the background image is shown clearly. Currently i have used a base controller class where i have put a code for transparent navigation bar:
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear
But currently i am getting the clear navigation bar only on first page. If i push and go to the second controller i can see a empty white space.
See the below images:
First page with cleared navigation bar
Second page with empty white space at the top
Why the navigation bar is not getting transparent? Any ideas?
As Your navigation bar is transparent, it will show your viewcontroller's view background color.
I think, your second page view controller's view background color is White. Thats the reason you are getting white color.
Add Top Constraint to SuperView, Not to TopLayout Guide
change the view background
self.navigationController?.navigationBar.isTranslucent = true
For more detail about isTranslucent read this doc
https://developer.apple.com/documentation/uikit/uinavigationbar/1624928-translucent
In my app I have this kind of bug:
When I scroll down, the content of table is seen above the search bar. What can be the reason?
override func viewDidLoad() {
super.viewDidLoad()
self.resultSearchController = ({
let controller = UISearchController(searchResultsController: nil)
controller.searchResultsUpdater = self
controller.dimsBackgroundDuringPresentation = false
controller.searchBar.sizeToFit()
controller.searchBar.barTintColor = UIColor(red: 52.0/255.0, green: 73.0/255.0, blue: 94.0/255.0, alpha: 1.0)
self.tableView.tableHeaderView = controller.searchBar
return controller
})()
self.tableView.reloadData()
}
The iOS Human Interface Guidelines list 3 methods to prevent content from showing through the status bar.
Use a navigation controller to display content. A navigation controller automatically displays a status bar background and it
ensures that its content views don’t appear behind the status bar. (To
learn more about navigation controllers, see Navigation Controllers.)
Create a nondistracting custom image—such as a gradient—and display it behind the status bar. To ensure that the image stays
behind the status bar, you could use a view controller to keep the
image above a scrolling view or you could use a scrolling view to keep
it pinned to the top.
Position content to avoid the status bar area (that is, the area defined by the app’s statusBarFrame property). If you do this, you
should use the window’s background color to provide a solid color
behind the status bar.
You should make the status bar not translucent.
The status bar's color is a property of UIApplication. You need to set it to a valid UIStatusBarStyle.
The new UISearchController has been designed to work with a UITableView and a UINavigationBar. Its functionality depends on your navigation bar being present. when the search bar has content in its text field, it will be latched on top of the page under the navigation bar. well, you don't have any navigation bar, it will latch to the top view guide and it always takes into account the status bar (if present) I guess the only way you can resolve your problem without an actual navigation bar is to add a view under status bar and make it opaque just like your search bar. it's a bit hacky but it's alright in my book.