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.
Related
I faced with the Table View Cells issue. If I choose default View Controller settings, cells are located under transparent navigation Bar. This is unacceptable because bars items overlap the cell.
navigation bar overload the tableView
If I changing Extend Edges setting at the tab on the right side, specifically "Under Top Bars", cells as expected are located under bar, but in this case NavigateBar is black.
navigation Bar is black
As you see I tried to fix that issue with the Simulated Metrics, but nothing is chanced. Also self.navigationController?.navigationBar.isTranslucent = true and self.navigationController?.view.backgroundColor = .clear in viewDidLoad method did't give any result. I able to color navigation Bar, but i need it transparent. Any ideas?
I guess you haven't set a background color to the ViewController's view. That's why it's appearing black.
Try adding the background color you want and it should work as expected.
I've set navigationController?.navigationBar.prefersLargeTitles = true and I'm wondering is there any option that prevents the default action of scrolling the title into the main Navigation bar when the user scrolls.
I can't see anything obvious within the nav bar properties but wanted to ask first before I build my own view that I will pin to the bottom of the nav bar.
Thanks
Ok, I've solved my issue with a simple workaround that works great. Instead of adding my UIScrollView to the UIViewController.view and constraining it to the view.topAnchor, I've added a UIView [named staticView] to my UIViewController. Constraining that staticView to the view.topAnchor and then constraining UIScrollView to my static view prevents the largeTitles from being reduced, while still allowing the user to scroll.
When a UIScrollView is constrained to the topAnchor the OS reduces the nav bars large titles to their default size as the user scrolls. Having the scroll view pinned to the static view interrupts this behaviour and the large titles remain.
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".
How to make tableview's content displayed under a transparent navigation bar?
Like this:In "Photos" app, albums displayed under navigation bar.
Special thanks
If you use _rootNavigationController.navigationBar.barStyle = UIBarStyleBlackTranslucent; then set correct tableview frame thats it. If you are in xib dont forget to simulate the translucent navigation bar.
One way I have found to accomplish this is by shifting your tableview's superview up to have the origin at {0, 0}. However after researching more several people have said altering the superview (UIViewControllerWrapperView) is a bad idea. However I also have not found any information on why just changing the frame would create problems. I am shifting the superview right now and haven't found any problems related to it yet.
Might be you can set it like this:
[navigationBar setAlpha:0.5f];
For making the navigation bar transparent alone, you can check this post, How to make a Navigation bar transparent and fade out like in the photo app in the iPhone
Also check this How to set the transparency color for Toolbar and Navigation bar using MonoTouch?
I am not sure whether you can add the table view behind the navigation bar. You might have to add it as a subview of self.parentViewController.view.
Another way to do this is by hiding navigation bar and using a transparent tool bar in place of that. This can be added on top of the current view. The only problem is with the back button. You might have to use custom button for that.
I have nested a navigation controller inside another and now its causing the uiview inside the nested navigationcontroller to resized weirdly.
Here are a few screen shots to show you whats going on.
This is with both navigation bars showing, as you can see the bottom extends further than the physical screen can allow.
this one only shows the sub navbar with the main nav bar hidden.. as you can see there is this weird space above the subbar that looks like the height of a status bar. i'm not sure what it is.
Lastly this shows only the mainnavbar being shown and the subbar being hidden..
the last view is what I would like to use, However.. if you look at the bottom of the view its only got a portion of the A's displaying.. however if you look to the view in InterfaceBuilder on the left you will see that interface there should be more letters there but strangely the view is not resizing to fit in the bound of the physical view...
I am wondering hopefully with the detail supplied if you can tell me how to get the view to resize correctly and fit everything in properly.. any help would be greatly appreciated.
I think you set the autoresizeMask property = UIViewAutoresizingFlexibleBottomMargin for these UILabel objects, you'll get the last UILabel aligned to the bottom of your UIView.