I'm trying to do an UI similar to the Photos app, where when you enter in a selection mode that hides the tab bar to display a toolbar.
I have my view controller in a UINavigationController and the navigation controller in a UITabBarController.
I had other strategies before but I'm struggling to get this working on the iPhone X and its bottom safe margins.
If I'm making the correct assumptions based on your description of the Photos App, I think you may be confused as to what the app is doing behind the scenes when going from Photos App TabBar to Photos App Toolbar.
These are two different ViewControllers, the second only shows the toolbar and sets hidesBottomBarWhenPushed = true in the init. You can use the NavigationController's supplied toolbar by setting the setToolbarItems(toolbarItems: [UIBarButtonItem]?, animated: Bool) in your second ViewController. This properly sizes the toolbar in the view to account for the bottom control on the iPhoneX.
If you must manage toolbar and TabBar visibility in the same ViewController, based on my testing, you'll need to add/manage the toolbar manually within a UIView container to get the proper size on all devices. So the view hierarchy would be ViewController.view -> toolbarContainer View -> Toolbar.
for iPhone X, the tab bar height is different than iPhone 8, you need to track
static CGFloat tabBarMaxHeight = 0;
- (void)setToolbarHidden:(BOOL)hidden {
[self.navigationController setToolbarHidden:hidden animated:NO];
CGRect frame = self.tabBarController.tabBar.frame;
tabBarMaxHeight = MAX(tabBarMaxHeight, CGRectGetHeight(frame));
frame.size.height = hidden ? tabBarMaxHeight : 0;
self.tabBarController.tabBar.frame = frame;
self.tabBarController.tabBar.hidden = !hidden;
//! reset tab bar item title to prevent text style compacted
for (UITabBarItem *obj in self.tabBarController.tabBar.items) {
NSString *title = obj.title;
obj.title = #"";
obj.title = title;
}
}
I'm using SCPageViewController in my app:
class RootPageViewController: UIViewController {
var pageViewController : SCPageViewController = SCPageViewController()
var viewControllers = [UIViewController]()
......
in viewDidLoad I'm configuring it:
self.pageViewController.setLayouter(SCPageLayouter(), animated: false, completion: nil)
self.pageViewController.easingFunction = SCEasingFunction(type: SCEasingFunctionType.linear)
self.pageViewController.dataSource = self;
self.pageViewController.delegate = self;
self.addChildViewController(self.pageViewController)
self.pageViewController.view.frame = self.view.bounds
self.view.addSubview(self.pageViewController.view)
self.pageViewController.didMove(toParentViewController: self)
I'm setting size of content view controllers in SCPageViewController data source method to be size of RootPageViewController. When app launches, I have my "status bar" that is just plain UIView with background color behind system status bar. But when I'm scrolling to next/previous page, it is offset by few pixels. How I can unify that? Why I'm getting this small offset on top?
I'm using Storyboards to model view controllers:
This is how it looks after app launches (as expected):
And when I scroll to next page:
This white area shouldn't be there... Everything is fine after I rotate device.
You could change the originY for the view to move it up a bit:
yourView.frame.origin.y = -5
BUT you should take a look at your constraints and see what happens to them when you change view and see if you could solve it that way instead. Because the solution provided above will move up the view, so you will have - 5 pixels at the bottom.
I have a ViewController (B) which is handled by a PageViewController which is inside another ViewController (A) and open it modal. I have centered the ViewController (B) exactly in the middle of the screen. This works fine.
But when I push the ViewController (A) from a NavigationController the frame of ViewController (B) is to big and extends below the NavigationBar and the TabBar. But I want it centered between the NavigationBar and the TabBar.
I know how I can get the height of the navbar and the tabbar so I could resize ViewController (B):
var topBar = self.navigationController?.navigationBar.frame.height
var bottomBar = self.tabBarController?.tabBar.frame.height
But this does not work deep down in the vier hierarchy in ViewController (B). self.navigationController and self.tabBarController are nil. So how can I get the height of the navbar and tabbar deeper down in the view hierarchy? Or do I just have to pass it down from one ViewController to another till I reach ViewController (B)? Or is there another more obvious way to center the view? Thanks.
(I have tried to post screenshots for better understanding but I miss the needed reputation points to post images, sorry)
Use this :
let height = UIApplication.sharedApplication().statusBarFrame.height +
self.navigationController!.navigationBar.frame.height
this support portrait and landscape state.
Swift 5
let height = UIApplication.shared.statusBarFrame.height +
self.navigationController!.navigationBar.frame.height
For UITabBar, this code work :
self.tabBarController?.tabBar.frame.height
For Swift 3
navBarHeight = (self.navigationController?.navigationBar.intrinsicContentSize.height)!
+ UIApplication.shared.statusBarFrame.height
As for iOS 13, since the statusBarFrame property of a UIApplication object was deprecated, one can use:
let statusBarHeight = navigationController?.view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
let navigationBarHeight = navigationController?.navigationBar.frame.height ?? 0
Now, it may seem that doesn't help you #OP since your navigationController is nil, but you could try to use view.window?.windowScene?.statusBarManager?.statusBarFrame.height for the statusBar height and figure out a way to find the navBar height as well? Hope that helps :)
iOS 13 solution:
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
return (window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0) +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
To call it you can just use: self.topbarHeight in viewController
Navigation bar height status bar height and tab bar height is always constant :
Navigation bar - 44pts
Status bar - 20pts
Tab bar - 49pts.
You can directly subtract these constants from view height:
self.view.frame.size.height- (44+20+49)
I am developing my first iPhone application. I am quite new to iOS. I am trying to get the height of the UI Navigation bar using the code below below the viewDidLoad method
float navBarHeight = self.navigationController.navigationBar.frame.size.height;
But the navBarHeight is returning 0. Not sure why that is.
Might be your using custom UIView for navigation or your hiding NavigationBar in your code i.e.,why it showing height is 0.If you set below code in your viewWillAppear you will get height of NavigationBar.
[self.navigationController setNavigationBarHidden:NO];
Try this extension (considering iPhone-X)
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
return UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
Try :
print(self.navigationController?.navigationBar.frame.height)
I know that the presence of the more view controller (navigation bar) pushes down the UIView by its height. I also know that this height = 44px. I have also discovered that this push down maintains the [self.view].frame.origin.y = 0.
So how do I determine the height of this navigation bar, other than just setting it to a constant?
Or, shorter version, how do I determine that my UIView is showing with the navigation bar on top?
The light bulb started to come on. Unfortunately, I have not discovered a uniform way to correct the problem, as described below.
I believe that my whole problem centers on my autoresizingMasks. And the reason I have concluded that is the same symptoms exist, with or without a UIWebView. And that symptom is that everything is peachy for Portrait. For Landscape, the bottom-most UIButton pops down behind the TabBar.
For example, on one UIView, I have, from top to bottom:
UIView – both springs set (default case) and no struts
UIScrollView - If I set the two springs, and clear everything else (like the UIView), then the UIButton intrudes on the object immediately above it. If I clear everything, then UIButton is OK, but the stuff at the very top hides behind the StatusBar Setting only the top strut, the UIButton pops down behind the Tab Bar.
UILabel and UIImage next vertically – top strut set, flexible everywhere else
Just to complete the picture for the few that have a UIWebView:
UIWebView - Struts: top, left, right Springs: both
UIButton – nothing set, i.e., flexible everywhere
Although my light bulb is dim, there appears to be hope.
Please bear with me because I needed more room than that provided for a short reply comment.
Thanks for trying to understand what I am really fishing for ... so here goes.
1) Each UIViewController (a TabBar app) has a UIImage, some text and whatever on top. Another common denominator is a UIButton on the bottom. On some of the UIViewControllers I have a UIWebView above the UIButton.
So, UIImage, text etc. UIWebView (on SOME) UIButton
Surrounding all the above is a UIScrollView.
2) For those that have a UIWebView, its autoresizingMask looks like:
—
|
—
^
|
|
|—| ←----→ |—|
|
|
V
The UIButton's mask has nothing set, i.e., flexible everywhere
Within my -viewDidLoad, I call my -repositionSubViews within which I do the following:
If there is no UIWebView, I do nothing except center the UIButton that I placed with IB.
If I do have a UIWebView, then I determine its *content*Height and set its frame to enclose the entire content.
UIScrollView *scrollViewInsideWebView = [[webView_ subviews] lastObject];
webViewContentHeight = scrollViewInsideWebView.contentSize.height;
[webView_ setFrame:CGRectMake(webViewOriginX, webViewOriginY,
sameWholeViewScrollerWidth, webViewContentHeight)]
Once I do that, then I programmatically push the UIButton down so that it ends up placed below the UIWebView.
Everything works, until I rotate it from Portrait to Landscape.
I call my -repositionSubViews within my -didRotateFromInterfaceOrientation.
Why does the content height of my UIWebView not change with rotation?.
From Portrait to Landscape, the content width should expand and the content height should shrink. It does visually as it should, but not according to my NSLog.
Anyway, with or without a UIWebView, the button I've talked about moves below the TabBar when in Landscape mode but it will not scroll up to be seen. I see it behind the TabBar when I scroll "vigorously", but then it "falls back" behind the TabBar.
Bottom line, this last is the reason I've asked about the height of the TabBar and the NavigationBar because the TabBar plants itself at the bottom of the UIView and the NavigationBar pushes the UIView down.
Now, I'm going to add a comment or two here because they wouldn't have made sense earlier.
With no UIWebView, I leave everything as is as seen by IB.
With a UIWebView, I increase the UIWebView's frame.height to its contentHeight and also adjust upward the height of the surrounding UIScrollView that surrounds all the sub-views.
Well there you have it.
Do something like this ?
NSLog(#"Navframe Height=%f",
self.navigationController.navigationBar.frame.size.height);
The swift version is located here
UPDATE
iOS 13
As the statusBarFrame was deprecated in iOS13 you can use this:
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
return (view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0.0) +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
With iPhone-X, height of top bar (navigation bar + status bar) is changed (increased).
Try this if you want exact height of top bar (both navigation bar + status bar):
UPDATE
iOS 13
As the statusBarFrame was deprecated in iOS13 you can use this:
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
return (view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0.0) +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
Objective-C
CGFloat topbarHeight = ([UIApplication sharedApplication].statusBarFrame.size.height +
(self.navigationController.navigationBar.frame.size.height ?: 0.0));
Swift 4
let topBarHeight = UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
For ease, try this UIViewController extension
extension UIViewController {
/**
* Height of status bar + navigation bar (if navigation bar exist)
*/
var topbarHeight: CGFloat {
return UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
}
}
Swift 3
let topBarHeight = UIApplication.sharedApplication().statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
Swift version:
let navigationBarHeight: CGFloat = self.navigationController!.navigationBar.frame.height
iOS 14
For me, view.window is null on iOS 14.
extension UIViewController {
var topBarHeight: CGFloat {
var top = self.navigationController?.navigationBar.frame.height ?? 0.0
if #available(iOS 13.0, *) {
top += UIApplication.shared.windows.first?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
} else {
top += UIApplication.shared.statusBarFrame.height
}
return top
}
}
Swift 5
If you want to get the navigation bar height, use the maxY property that considers the safeArea size as well, like this:
let height = navigationController?.navigationBar.frame.maxY
Support iOS 13 and Below:
extension UIViewController {
var topbarHeight: CGFloat {
if #available(iOS 13.0, *) {
return (view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0.0) +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
} else {
let topBarHeight = UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
return topBarHeight
}
}
}
Did you try this?
let barHeight = self.navigationController?.navigationBar.frame.height ?? 0
UIImage*image = [UIImage imageNamed:#"logo"];
float targetHeight = self.navigationController.navigationBar.frame.size.height;
float logoRatio = image.size.width / image.size.height;
float targetWidth = targetHeight * logoRatio;
UIImageView*logoView = [[UIImageView alloc] initWithImage:image];
// X or Y position can not be manipulated because autolayout handles positions.
//[logoView setFrame:CGRectMake((self.navigationController.navigationBar.frame.size.width - targetWidth) / 2 , (self.navigationController.navigationBar.frame.size.height - targetHeight) / 2 , targetWidth, targetHeight)];
[logoView setFrame:CGRectMake(0, 0, targetWidth, targetHeight)];
self.navigationItem.titleView = logoView;
// How much you pull out the strings and struts, with autolayout, your image will fill the width on navigation bar. So setting only height and content mode is enough/
[logoView setContentMode:UIViewContentModeScaleAspectFit];
/* Autolayout constraints also can not be manipulated since navigation bar has immutable constraints
self.navigationItem.titleView.translatesAutoresizingMaskIntoConstraints = false;
NSDictionary*metricsArray = #{#"width":[NSNumber numberWithFloat:targetWidth],#"height":[NSNumber numberWithFloat:targetHeight],#"margin":[NSNumber numberWithFloat:20]};
NSDictionary*viewsArray = #{#"titleView":self.navigationItem.titleView};
[self.navigationItem.titleView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"|-(>margin=)-H:[titleView(width)]-(>margin=)-|" options:NSLayoutFormatAlignAllCenterX metrics:metricsArray views:viewsArray]];
[self.navigationItem.titleView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:#"V:[titleView(height)]" options:0 metrics:metricsArray views:viewsArray]];
NSLog(#"%f", self.navigationItem.titleView.width );
*/
So all we actually need is
UIImage*image = [UIImage imageNamed:#"logo"];
UIImageView*logoView = [[UIImageView alloc] initWithImage:image];
float targetHeight = self.navigationController.navigationBar.frame.size.height;
[logoView setFrame:CGRectMake(0, 0, 0, targetHeight)];
[logoView setContentMode:UIViewContentModeScaleAspectFit];
self.navigationItem.titleView = logoView;
Handy Swift 4 extension, in case it's helpful to someone else. Works even if the current view controller does not display a navigation bar.
import UIKit
extension UINavigationController {
static public func navBarHeight() -> CGFloat {
let nVc = UINavigationController(rootViewController: UIViewController(nibName: nil, bundle: nil))
let navBarHeight = nVc.navigationBar.frame.size.height
return navBarHeight
}
}
Usage:
UINavigationController.navBarHeight()
The light bulb started to come on. Unfortunately, I have not discovered a uniform way to correct the problem, as described below.
I believe that my whole problem centers on my autoresizingMasks. And the reason I have concluded that is the same symptoms exist, with or without a UIWebView. And that symptom is that everything is peachy for Portrait. For Landscape, the bottom-most UIButton pops down behind the TabBar.
For example, on one UIView, I have, from top to bottom:
UIView – both springs set (default case) and no struts
UIScrollView -
If I set the two springs, and clear everything else (like the UIView), then the UIButton intrudes on the object immediately above it.
If I clear everything, then UIButton is OK, but the stuff at the very top hides behind the StatusBar
Setting only the top strut, the UIButton pops down behind the Tab Bar.
UILabel and UIImage next vertically – top strut set, flexible everywhere else
Just to complete the picture for the few that have a UIWebView:
UIWebView -
Struts: top, left, right
Springs: both
UIButton – nothing set, i.e., flexible everywhere
Although my light bulb is dim, there appears to be hope.
My application has a couple views that required a customized navigation bar in the UI for look & feel, however without navigation controller. And the application is required to support iOS version prior to iOS 11, so the handy safe area layout guide could not be used, and I have to adjust the position and height of navigation bar programmatically.
I attached the Navigation Bar to its superview directly, skipping the safe area layout guide as mentioned above. And the status bar height could be retrieved from UIApplication easily, but the default navigation bar height is really a pain-ass...
It struck me for almost half a night, with a number of searching and testing, until I finally got the hint from another post (not working to me though), that you could actually get the height from UIView.sizeThatFits(), like this:
- (void)viewWillLayoutSubviews {
self.topBarHeightConstraint.constant = [UIApplication sharedApplication].statusBarFrame.size.height;
self.navBarHeightConstraint.constant = [self.navigationBar sizeThatFits:CGSizeZero].height;
[super viewWillLayoutSubviews];
}
Finally, a perfect navigation bar looking exactly the same as the built-in one!
Here is the beginning of my response to your update:
Why does the content height of my UIWebView not change with rotation?.
Could it be that because your auto resize doesn't have the autoresizingMask for all directions?
Another suggestion before I come back for this, could you use a toolbar for your needs. It's a little simpler, will always be on the bottom, auto-rotates/positions. You can hide/show it at will etc. Kind of like this: http://cdn.artoftheiphone.com/wp-content/uploads/2009/01/yellow-pages-iphone-app-2.jpg
You may have looked at that option, but just throwing it out there.
Another idea, could you possibly detect what orientation you are rotating from, and just place the button programmatically to adjust for the tab bar. (This is possible with code)
I have used:
let originY: CGFloat = self.navigationController!.navigationBar.frame.maxY
Working great if you want to get the navigation bar height AND its Y origin.
If you want to get the navigationBar height only, it's simple:
extension UIViewController{
var navigationBarHeight: CGFloat {
return self.navigationController?.navigationBar.frame.height ?? 0.0
}
}
However, if you need the height of top notch of iPhone you don't need to get the navigationBar height and add to it the statusBar height, you can simply call safeAreaInsets that's why exist.
self.view.safeAreaInsets.top
Swift : programmatically adding a web view right under the navigation bar
From iOS11 the key to position the view below the navigation bar is to use safeAreaLayoutGuide
From the Apple docs (link):
The layout guide representing the portion of your view that is unobscured by bars and other content.
So in code I will put the top constraint using view.safeAreaLayoutGuide.topAnchor
Again the whole thing will be for example:
import WebKit
class SettingsViewController: UIViewController {
let webView = WKWebView()
let url = URL(string: "https://www.apple.com")
override func viewDidLoad() {
super.viewDidLoad()
configureWebView()
}
override func viewWillAppear(_ animated: Bool) {
follow(url: url)
}
func follow(url: URL?) {
if let url = url {
let request = URLRequest(url: url)
webView.load(request)
}
}
func configureWebView() {
view.addSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
}
}