So I'm having a weird issue with the new large titles in iOS 11. Instead of me trying to badly and confusingly explain the issue here is a 10-second screen recording of what is happening:
Screen recording of issue on YouTube
As you can see there is a weird black bar that appears when transitioning between a view controller that has
navigationItem.largeTitleDisplayMode = .never
And one that is set to .always
Thanks in advance!
Before the transition set this:
self.navigationController?.view.backgroundColor = .white
As Pranav said, the issue here is the background colour of the navigation controller's view, however, changing that from a child view controller is not the perfect way to do it.
Instead, a better way is to subclass UINavigationController and in the viewDidLoad() set the
override func viewDidLoad()
{
super.viewDidLoad()
view.backgroundColor = .white
}
Then, just use your custom subclass rather than the standard UINavigationController. This way, you only ever need this code in one place.
Related
Problem
I am having this problem. It only happens when I am not on the top of the table view. When I am on the top, no problem at all.
• I have tried this on a real device too, but no luck.
• I thought shadow behind the cell might causing it but removing it didn't work either.
• It works just fine without a large title but I want to implement large title function too.
I show the secondViewController without programmatically. But to go back to firstViewController I use this code:
navigationController?.popViewController(animated: true)
Found the problem!
Setting the background color to the white on the secondViewController fixed the problem.
Add this to secondViewController in viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
self.navigationController?.view.backgroundColor = UIColor.white }
I have a normal view controller that is embedded in a navigation controller. In this view controller, I have a table view that is using the constraints of the safe area. (I don't use a table view controller)
The navigation controller is set to prefer large titles and the mode is set to .always. In beta 2 this worked perfectly, So when I came in the title was large and when I scrolled down it became small (Like the normal one). But since beta 3 this doesn't work anymore.
Anyone know how to turn this back on, or how to make it so when I scroll the table view it will become smaller. Like the behaviour of all the new iOS 11 apps?
Or is this a bug in the current version of swift 4/iOS 11 but the apps like messenger and settings still work this way.
Thanks in advance.
For me, it was that if you set the boolean "Prefers Large Titles" in the storyboard to true it will stay large, if you turn this on by code it works as expected!
I found a workaround on this site
basically, if the tableView (or element that has scroll)is not the first view in your view hierarchy, the large title fails to hide automatically.
https://markusbodner.com/2017/10/08/fix-large-navigation-bar-title-not-hiding-on-scroll-in-ios-11/
I added on the view willAppear:
if #available(iOS 11.0, *) {
navigationController?.navigationBar.prefersLargeTitles = true
} else {
// Fallback on earlier versions
}
(void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView.contentOffset.y > 0) { //20
[self.navigationController.navigationBar setPrefersLargeTitles:NO];
} else {
[self.navigationController.navigationBar setPrefersLargeTitles:YES];
}
}
Check "Prefers Large Titles" for your navigation bar in IB, or use:
navigationController?.navigationBar.prefersLargeTitles = true
I'm using a programmatic layout and ran into a similar issue with large titles. I found the solution here: https://stackoverflow.com/a/46692583/131378. In viewDidLoad() I had to toggle the largeTitleDisplayMode off and on again. That was the correct combination that got the large titles working with scrolling:
self.navigationItem.largeTitleDisplayMode = .never
self.navigationItem.largeTitleDisplayMode = .always
I am adding UISearchController searchBar to the controllers' view like this: self.view.addSubview(searchController.searchBar). The functionality is working perfectly fine except that upon selection of the tableview row the searchbar quickly moves down and reappears from the top. I tried the following things, none of which worked out:
Setting tableView.tableHeaderView = searchController.searchBar instead of directly adding to the view
Adding searchController.searchBar to a separate view that I dragged to the controller setting up constraints on it. Tried clipping to bounds both the newly created view and the searchBar.
Embedding the controller in UINavigationViewController and setting self.navigationItem.titleView = searchController.searchBar. I defined the frame of the searchBar, still nothing.
Tried playing with Extend Edges feature in the storyboard (Under top bars, etc.), but no selection worked out
Adding lines (to viewDIdLoad):
self.extendedLayoutIncludesOpaqueBars = true
self.definesPresentationContext = true
Any help would be greatly appreciated.
If you are using storyboards, you can change it by selecting the view controller and in the attributes inspector deselect Adjust scroll view insets.
After trying all of the suggestion and searching over the internet, it caught my eye that the working examples of the UISearchController implementation are done in UITableViewController, but I had UIViewController with UITableViewDataSource and UITableViewDelegate protocols on it. Unfortunately, due to app architecture I was not able to directly have UITableViewController, so I needed to restructure the app, so that it had UINavigationController where I embeded the searchBar in navigationItem.titleView (and not set it as tableView.tableHeaderView like they always do in various tutorials since I needed the searchBar to be fixed, not hidden when we do scrolling) and it worked. Here is how the ultimate working app architecture looks like:
The TrainingContainerViewController has two Container Views, in one we embed TrainingFilterTableViewController that shows up the ultimate results of the autocomplete functionality (after clicking on an autocomplete row). Another Container View embeds UINavigationController (to the left) which, in turn, has TrainingSearchTableViewController as its child.
The code that sets up the UISearchController and its searchBar is located in the TrainingSearchTableViewControllers' viewDidLoad and is the following:
override func viewDidLoad() {
super.viewDidLoad()
searchController.searchResultsUpdater = self
searchController.hidesNavigationBarDuringPresentation = false
searchController.dimsBackgroundDuringPresentation = false
searchController.searchBar.sizeToFit()
searchController.delegate = self
navigationItem.titleView = searchController.searchBar
tableView.hidden = true
...
}
Nothing else was needed to fix the bug in XCode 8.2.1 and Swift 2.3, just change architecture, so that usage of UITableViewController is possible in the app and use it instead of UIViewController.
I am new on iOS Development and during my works for an app I am building right now some doubts have appeared to me. I am trying to build a Screen that will be compounded by multiple ViewControllers, but on the NavigationBar I would like to have a UiSegmentedControl above the Title, something like a Scope Bar to control the navigation between the children ViewController. I wanted to build something similar to what we have on HealthKit Dashboard:
.
What kind of approach do you suggest to do that? I understand that some questions have already been done about it, but after a long research I have not got to a conclusion.
During my research I noticed that a UISearchBar on the NavigationBar ( to build the Scope Bar ) is only possible for UITableViewControllers, Am I right? So I think that can not be an approach.
My next idea was to use a UISegmentedControl placed manually below the NavigationBar and then use the Containment Api to change to the different ViewControllers for this Screen. The problem here, is I will have to duplicate the UISegmentedControl on all children ViewControllers. Is there any way to not have to duplicate that?
Another approach I tried was doing my own titleView for the NavigationBar with a NavigationBar and a UISegmentedControl below. I don’t like this idea, neither it went well trying to replicate the NavigationBar.
Finally, another approach I thought was using a UIPageViewController. Although this approach sounds a good idea to me, I think I will also have to duplicate the UISegmentedControl.
In the end I think the best solution is to have a UISegmentControl on the NavigationBar, but I am not seeing how to implement this.
What do you think is the best approach to accomplish my ideia? I thought that it would be easy because it is a pattern I see in many apps. Any suggestions?
I am doing this on XCode 6.1.1 using Swift for iOS 8.
Thanks a lot for your help.
You can get this effect by adding the segment as the title view and setting your desired prompt. In interface builder it looks like this:
Add a UIToolbar to your view. Doesn't matter if you add it through code or interface builder. Then you add your UISegmentedControl as custom view of an UIBarButtonItem
let toolbar = UIToolbar()
toolbar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(toolbar)
NSLayoutConstraint.activate([
toolbar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
toolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
toolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
])
// Add SegmentedControl like this:
toolbar.setItems([UIBarButtonItem(customView: mySegmentedControl)], animated: false)
toolbar.delegate = self
Then implement this delegate method (See documentation for UIBarPosition.topAttached)
extension MyViewController: UIToolbarDelegate {
public func position(for bar: UIBarPositioning) -> UIBarPosition {
.topAttached
}
}
Then you have what you need. But there's still a separator line between the navigation bar and the toolbar. To get rid of it use this extension methods and call them in viewWillAppear and viewWillDisappear:
extension UINavigationBar {
func hideHairline() {
// Hide border line of navigation bar since we're showing a toolbar
if #available(iOS 13.0, *) {
standardAppearance.shadowColor = nil
standardAppearance.shadowImage = nil
} else {
shadowImage = UIImage()
setBackgroundImage(UIImage(), for: .default)
}
}
func restoreHairline() {
// Hide border line of navigation bar since we're showing a toolbar
if #available(iOS 13.0, *) {
standardAppearance.shadowColor = .separator
} else {
shadowImage = nil
setBackgroundImage(nil, for: .default)
}
}
}
Currently I am trying to embed a UISearchController into my application. But the UISearchBar, which is a property of the UISearchController, doesn't get displayed properly, if the UINavigationBar is non-translucent. Usually after tapping the UISearchBar property, the UINavigationBar moves up to make room for the UISearchBar. You can see the result on the following screenshot:
https://www.dropbox.com/s/172k63zr2bhj84t/Normal_behaviour.png?dl=0
But if the "translucent" property of the UINavigationBar is set to "NO", the UISearchBar doesn't get displayed properly, because the background of the status bar remains transparent, as you can see on the following screenshot:
https://www.dropbox.com/s/v5cnxoj9ms6976r/Wrong_behaviour.png?dl=0
To demonstrate this weird behaviour, I have modified the sample project provided by Apple:
https://developer.apple.com/library/ios/samplecode/TableSearch_UISearchController/Introduction/Intro.html
Here you can download the modified version:
https://www.dropbox.com/s/7icfe6kap98g1e8/TableSearchwithUISearchControllerObj-CandSwift_MODIFIED.zip?dl=0
The modification is in file "APLMainTableViewController.m" line 33.
It's clearly a bug (rdar://20942583).
My workaround is to set
self.edgesForExtendedLayout = UIRectEdgeAll;
self.extendedLayoutIncludesOpaqueBars = YES;
This allows you to keep the navigation bar opaque. The downside is that the content flows below the bar even if it can't be seen, creating some overhead.
All I needed was:
func viewDidLoad() {
extendedLayoutIncludesOpaqueBars = true
}
One workaround for this is to make the status bar translucent just before the search is going to become active, and remove the translucency when the search is about become inactive.
You can do this by registering your view controller as a delegate of UISearchController, and implementing the willPresentSearchController and willDismissSearchController methods. For example (in Swift):
Declare your view controller as a delegate of UISearchController:
class MyViewController: UITableViewController, UISearchControllerDelegate
Don't forget to actually set it as the delegate, for instance in viewDidLoad add:
searchController.delegate = self
And finally:
func willPresentSearchController(searchController: UISearchController) {
navigationController?.navigationBar.translucent = true
}
func willDismissSearchController(searchController: UISearchController) {
navigationController?.navigationBar.translucent = false
}
Ok, this one is a SUPER pain to debug but not that bad to fix. It's all down to the way Apple changed the appearance of navigation bars. It can be fixed by creating a UINavigationBarAppearance object, configuring it with the visual properties you want (i.e. background colour etc) and then assigning it to standardAppearance and scrollEdgeAppearance on UINavigationBar.appearance() - you can have two different instances with different settings if you want.
A simple implementation might look like this:
let appearance = UINavigationBarAppearance()
appearance.configureWithDefaultBackground()
appearance.backgroundColor = barColor
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor: textColor]
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = appearance
(Naturally replace barColor and textColor with the colours of your choice!)
if someone have a problem like non-translucent hidden the search bar u can just had this :
self.definesPresentationContext = true
Regards