I'm using a usual view controller with UITableView which is embedded into a navigation controller which is embedded into a tabbar controller:
TabBar Controller
Navigation Controller
UIViewController with TableView
I'm using NavBar with a large title. When I scroll up in a usual way navigation bar with its large title has normal height. But when I touch status bar and tableView scrolls to top, navigation bar gets extra white space between a status bar and its title:
Normal space when scrolling with a finger: https://ibb.co/0BWgB0T
Extra space when touching status bar: https://ibb.co/LxFwDKx
The only thing that helps to avoid that extra space is the following:
edgesForExtendedLayout = UIRectEdge(rawValue: 0)
But it makes tabBar grey, not white as it should be and anyway seems like a quite incorrect solution.
Have anyone faced the same problem?
Ok, suddenly I've found a solution. Yes, it includes this line of code:
edgesForExtendedLayout = UIRectEdge(rawValue: 0)
But also I had to set a tabBar color to preferable and disable its "Translucent" property in Interface Builder.
Hope it'll help someone.
I have 'about' controller using Navigation Bar below status bar. For some reason I have to set the background color of View to be the same color of Navigation bar, otherwise, the background of status bar will be white. This trick works fine on other device, but not on iPhoneX's landscape view. As you see below:
If I set the background of View to be white, there will be other issues:
1) The status bar is white.
2) Navigation bar is not extended on landscape view
Looks like this is an issue that I have Navigation Bar inside View as the storyboard structure shown below:
But I cannot seem to be able to move Navigation Bar to the same level as View. Any idea?
Your UINavigationBar is most likely pinned to the safeAreas of the view. There are several things to consider here:
Current setup
Currently, your view is pinned to the safe area insets of its superview. On iPhone X, that is:
UIEdgeInsets(top: 44, left: 0, bottom: 34, right: 0) in Portrait
UIEdgeInsets(top: 0, left: 44, bottom: 21, right: 44) in Landscape
So this is exactly where your view ends up:
The values in safeAreaInsets.bottom don't matter here, because the navigationBar will most likely not expand that far to the bottom of its superview.
Pinning to superview
Ok, now let's pin the view to the edges of its superview instead of to the safe area inset:
(Do that for all 3 edges, adjusting the constant to 0 if necessary)
This is what we end up with:
Looking good for landscape but what's up with portrait? Notice how the bar button sits inside the status bar.
Well, the layout system is doing exactly what you're telling it to do (if that were true all the time, coding for iOS would be a breeze :D). It pins the view to the very top of its superview, ignoring any layoutMargin or safeAreaInsets. For UINavigationBar however, this is not what we want. We want the content of the bar to start at any safeAreaInset.top, so that it does not interfere with the status bar, for example.
Solution
The solution is to revert the top constraint back to 'relative to safeArea'. The content of the navigationBar now looks ok. In order to expand the background of the navigationBar upwards, you set the navigationBars delegate (UINavigationBarDelegate) and provide the following implementation:
func position(for bar: UIBarPositioning) -> UIBarPosition {
return .topAttached
}
By returning .topAttached, you tell the navigationBar to expand its background (blur view) upwards beneath the status bar.
Result:
Note that in general, it would be better to use UINavigationController if possible. This whole layout dance is done for you, plus adding a plain UINavigationBar to a view won't work well with large titles. They need a navigationController providing the collapse and expand logic.
Addendum
A few additional notes on this topic:
We do not need to consider left and right safe areas here. UINavigationBar respects these and insets its content accordingly. It does not do so for vertical insets, that's why we have to do the dance described above.
If you look closely, even the layout in the very last picture is not quite right. The large title is too close to the left edge. To work around this, you would have to tick Preserve Superview Margins for the navigation bar in the storyboard. Again, all these things are handled by the system for you if you simply use UINavigationController in the first place.
You can use two views one for status bar and another for navigation bar and apply constraint as shown and your issue will be fixed.
isTranslucent is set by default to true. Setting it to false will extend the navigation bar below the status bar.
navigationBar.isTranslucent = false
A summary and a little explanation for beginners for CodingMeSwiftly's answer:
In your ViewController class in viewDidLoad method or similar you must assign a delegate (or do it in storyboard):
navigationBar.delegate = self //where navigationBar is an IBOutlet
Make extension for your ViewController class:
extension ViewController: UINavigationBarDelegate {
func position(for bar: UIBarPositioning) -> UIBarPosition {
return .topAttached
}
}
Check that on the storyboard the Navigation Bar top constrain is Safe Area.Top
It works for me.
Looks like standalone Navigation Bar just does not work for this case. After change it to Navigation Item fixed the issue. To make it to be Navigation Item, I choose the existing controller (the one with Navigation Bar) and embed it into Navigation Controller via "Editor -> Embed".
Is it possible to have the titleView to be behind the left and right bar button item on a navigation bar? I've set my titleView to have a width of 320 and it covers the left and right bar button item. I wonder if there is a way to move it to the back?
In my experiments, it appears that the titleView is always drawn after (above) the left and right bar button items. You could try spelunking the view hierarchy and using sendSubviewToBack:, provided that the title view is ever made part of the navigation bar's hierarchy.
If you can render the effect you're trying to achieve into an image, you could set that as the backgroundImage of the navigation bar, but this may not be practical.
Remember that you'll likely need to account for interface rotation in any case, since the navigation bar height (on iPhone) goes from 44px in portrait to 32px in landscape).
I have a view xib that I'm manipulating through IB (for various reasons) and it will be launched as a modal view in code. I have a Toolbar at top and another one at bottom with some other UI elements in between. When I run the app, the placement of the top Toolbar isn't as I see it during the layout in IB.
In IB, the top Toolbar is placed at top below the status bar correctly and the next UI element (a label) appears below it. However, in the simulator, the top half of the Toolbar appears underneath the status bar and thus making it look cut off and there is a lot of space between the Toolbar and the label, which isn't reflected in the layout in IB.
For modal views, should the height of the view be different? If so, what does it need to be?
The view's height is set to default height value of 480.
Is the style of the status bar set to Translucent Black in IB? This causes the status bar to not consume any space and as a result "float" above the underlying Views.
I am using InterfaceBuilder to set up my app. I have several views being controlled by a UINavigationController. In IB I set up the views using the simulated metrics to position the elements below the Navigation Bar.
I have a background texture that is placed in the window object of the Main.nib so that it is shared throughout the app. I want that texture to be visible behind a transucent navigation bar.
If the actual navigationBar's style is BlackOpaque the elements of the various views are positioned correctly below the navBar when the app is run.
If I set the NavigationBar to be translucent, view elements are repositioned to the bottom of the status bar when the app is run so that they are visible behind the navigationBar, even though they are positioned correctly in their various nib files.
How do I defeat this behavior?
I figured out the answer...
If you do NOT want objects to be slid up to be positioned behind a translucent NavigationBar, In IB, set the simulated metrics for the navBar to none, and position the view elements as desired.