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.
Related
Here's Apple's document of scrollEdgeAppearance for UINavigationBar:
When a navigation controller contains a navigation bar and a scroll
view, part of the scroll view’s content appears underneath the
navigation bar. If the edge of the scrolled content reaches that bar,
UIKit applies the appearance settings in this property.
If the value of this property is nil, UIKit uses the settings found in the
standardAppearance property, modified to use a transparent background.
If no navigation controller manages your navigation bar, UIKit ignores
this property and uses the standard appearance of the navigation bar.
When running on apps that use iOS 14 or earlier, this property applies
to navigation bars with large titles. In iOS 15, this property applies
to all navigation bars.
Here's my demo. I embed ViewController into a UINavigationController, then drag a UITableView and set it as the subview of ViewController's view. I set the following appearance properties to UINavigationBar:
class ViewController: UIViewController {
#IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let redAppearance = UINavigationBarAppearance()
redAppearance.backgroundColor = .red
navigationController?.navigationBar.standardAppearance = redAppearance
let greenAppearance = UINavigationBarAppearance()
greenAppearance.backgroundColor = .green
navigationController?.navigationBar.scrollEdgeAppearance = greenAppearance
}
}
I thought the initial navigation bar should be red, and it should turn green when I scroll the table view. But the truth is it's the other way around.
I did some search and most people just set standardAppearance and scrollEdgeAppearance to the same instance, or set one of them to be nil, so I'm quite confused about these two properties in iOS 15.
You have understood perfectly but backward.
navigationController?.navigationBar.scrollEdgeAppearance = greenAppearance
means the nav bar will be green only when the scrollable view is scrolled all the way down. That is what you see in your first screen shot.
As soon as you scroll up a little bit, the nav bar starts adopting its standard appearance, which is red. That is what you see in your second screen shot.
scrollEdgeAppearance is applied when the edge of the scrollable content reaches the nav bar so what you're seeing is correct. Many people set both scrollEdgeAppearance and standardAppearance to the same since they want the behavior to be no different when the user scrolls but your implementation is certainly a valid use case.
A tableview controller is embedded into a navigation controller.
I programmatically added a search bar to the tableview controller's navigation bar. I only changed the navigation bar Background color into something different than Default (purple) - all the rest I left default.
class TableViewController: UITableViewController {
let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.hidesSearchBarWhenScrolling = true
navigationItem.searchController = searchController
}
}
Code above is reduced to bare minimum for demonstration purpose.
All done with Xcode 11 (11A420a).
I ran the project in iOS 12.0 and 13.0 simulators and devices.
iOS 13.0
The search bar shows upon start.
Navigation bar background color is correctly presented.
While scrolling, navigation bar background color remains correct.
With iOS 13.0, all works as expected!
iOS 12.0
The search bar doesn't show upon start.
Navigation bar background color is correctly presented.
While scrolling, navigation bar background color goes white as soon search bar is visible.
I tried to change all kind of color setting in storyboard as well as properties programmatically. I didn't succeed in changing the navigation bar background color when search bar is visible.
It seems (?!) that the navigation bar foreground looses transparency when search bar becomes visible.
If I use a Bar Tint color of the navigation bar (!= Default), all works as expected (and as with iOS 13.0), but I loose the gradient effect, which I would like to keep.
What did I miss?
How can I avoid this?
Bug?
I had some luck with the navigationItem.scrollEdgeAppearance property when facing a similar problem. For example:
vc.navigationItem.scrollEdgeAppearance?.backgroundColor = .red
This is only available on iOS 13 though.
Here's what I ended up doing to get correct colors in the navigation bar while allowing the search controller's scroll bar to hide during scroll:
if #available(iOS 13.0, *) {
let blurEffect = UIBlurEffect(style: .systemUltraThinMaterial)
navbar.standardAppearance.backgroundEffect = blurEffect
navbar.standardAppearance.backgroundColor = appMainColor.withAlphaComponent(0.75)
navbar.standardAppearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navbar.compactAppearance = nil
navbar.scrollEdgeAppearance = navbar.standardAppearance.copy()
navitem.standardAppearance = nil
navitem.compactAppearance = nil
navitem.scrollEdgeAppearance = nil
}
I don't know if it is the look you're going for but I found if you disable hideSearchBarWhenScrolling the background stops changing color. However, the search bar is always there.
Add this to viewDidLoad():
navigationItem.hidesSearchBarWhenScrolling = false
I want to dismiss/hide UISearchController from navigation bar when I switch tabs, I tried many things, if I set it to nil a black layer is shown in the search space. The settings view controller should not present the UISearch any thoughts?
Without seeing your code, this is what I would do if I wanted to hide my search bar. Use the following code to hide searchBar:
searchBar.isHidden = true
view.backgroundColor = .orange
//.clear? Or whatever colour you want to be there in the background.
//In viewDidLoad put
searchBar.isHidden = false
I was adding only one Navigation Controller to all tabs, I changed it, now for each tab I have an independent navigation controller, so it is solved.
So the way I understand navigation bar (navigation item) is that it has three locations you can modify, which is left (leftBarButtomItem), middle (titleView), and right (rightBarButtonItem).
Now what I'm going to achieve is that I want to just add a simple progress bar line at the very bottom of navigation bar, but still inside navigation bar. I want to make this like an extension of navigation bar that I can reuse on other screens. But I want that left, middle, and right "views" are still working like usual. e.g. I don't want that if I change the title view content manually in other view controller, then the line disappears / stops working for that other view controller. So this will feel like an independent overlay added on top of navigation bar as subview, separated from leftBarButtonItem, titleView, and rightBarButtonView, sort to speak.
Is it possible to do that in navigation item?
This is a example of how to add a Image instead of a Title String
fileprivate func setupTitle(){
let logo = UIImage(named: "my_incredible_logo")
let imageView = UIImageView(image:logo)
imageView.contentMode = .scaleAspectFit
self.navigationItem.titleView = imageView
self.navigationController?.navigationBar.prefersLargeTitles = false
}
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