I would like to know exact height of top bar of iPhone X.
Could you please mention the status bar and navigation bar height of iPhone X.
Please help me.
The display on iPhone X, however, is 145pt taller than a 4.7" display, resulting in roughly 20% additional vertical space for content.
for more information you get HIG for iphone X from apple documents and detail description in here1 and here2
status bar height
previously 20pt, now 44pt
Because of the sensors on top of the display, the new status bar is split in 2 parts. If your UI is doing something special with that space (previously 20pt high, now 44pt), because it will be taller on the iPhone X. Make sure that it can be dynamically changed in height. A great thing is that the height won’t be changed if a user makes a phone call or is using a navigation app, which was previously the case on other iPhones.
portrait
Navigation bar height as normal 88 and large title time 140
Standard title - 44pt (88pt with Status Bar)
Large title - 140pt
bottom bar - 34pt
Landscape
Standard title - 32pt
bottom bar - 21pt
Nav bar is 44pt as usual (when no large titles) and the status bar has increased from 20pt to 44pt. Here's what you can type in the debugger to verify it:
You can programmatically obtain the navigation bar's height by using safeAreaInsets on the view in the contained view controller:
let navBarHeight = view.safeAreaInsets.top
This will account for whether it's a large title navigation bar or not, and whether or not there's a search bar attached to it.
See the safeAreaInsets documentation for more information.
You can simply get it in the next way (Swift 3):
let barHeight = navigationController?.navigationBar.frame.maxY
To get correct value make sure that you call it after setting prefersLargeTitles
navigationController?.navigationBar.prefersLargeTitles = false
You can use the navigation bar's .frame property to figure out the overall height of the top bar area:
Swift 5.0:
let xBarHeight = (self.navigationController?.navigationBar.frame.size.height ?? 0.0) + (self.navigationController?.navigationBar.frame.origin.y ?? 0.0)
ObjC:
CGRect navbarFrame = self.navigationController.navigationBar.frame;
float topWidth = navbarFrame.size.width;
float topHeight = navbarFrame.size.height + navbarFrame.origin.y;
I suppose this is a bit of a cheat, but adding the navbar's height with its y origin seems to give the correct total height regardless of device.
There is no specification in Apple Docs
Apple Docs
According to Geoff Hackworth its 88
Navigation title types :
Standard title
Large title
Increasing navigation bar in iOS 11
navigationController?.navigationBar.prefersLargeTitles = true
If you're using a UIWindow and you need to know the top bar height you can use this:
// old way of getting keyWindow
//guard let keyWindow = UIApplication.shared.keyWindow else { return }
// new way of getting keyWindow
guard let keyWindow = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else { return }
let navBarHeight = keyWindow.safeAreaInsets.top
print("navBarHeight:" , navBarHeight)
I got the idea from #Paolo's answer
Use it if you want to know where need start content
extension UIViewController {
var navigationBarbarContentStart: CGFloat {
return self.navigationBarTopOffset + self.navigationBarHeight
}
var navigationBarTopOffset: CGFloat {
return self.navigationController?.navigationBar.frame.origin.y ?? 0
}
var navigationBarHeight: CGFloat {
return self.navigationController?.navigationBar.frame.height ?? 0
}
}
Related
I would like to know if is there any way for us to obtain the default Navigation Bar height (maxY preferably) of a NavigationController.
Knowing that iOS 11 introduced large titles, is there any way for us then to get the default height (or maxY) of a Navigation Bar with a "small title" and of a Navigation Bar with a "large title"?
The reason I am asking this is because I am making the Navigation Bar's background transparent and introducing my own background to it (which is an Effect View). But the problem I am having is that every time I run the following code
self.navigationController?.navigationBar.frame.maxY
it returns a number ways higher than the expected :/
I tried to run this piece of code on many callbacks -> onViewWillAppear, onViewDidAppear, onViewDidLoad
You can get the height of navigation bar and status bar using this
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let topSpace:CGFloat?
if #available(iOS 11.0, *) {
topSpace = self.view.safeAreaInsets.top
} else {
topSpace = self.topLayoutGuide.length
}
print(topSpace)
}
I have used the native method to get the height of navigation bar including status bar. Use this line of code to get the navigation bar height and use as per your requirement. This worked for me perfectly fine on all devices & different iOS versions.
let navigationBarHeight = UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
The best approach I found so far, without having to create a navigation controller instance:
[self.navigationBar sizeThatFits:CGSizeZero].height;
And just to mention, it supports screen orientation change too.
This works for me
let navigationBarHeight = UIApplication.shared.statusBarFrame.size.height +
(self.navigationController?.navigationBar.frame.height ?? 0.0)
Even tough your method may be the best solution for you I mostly try to not use the native navigation bar but hide it and create my own instead. This makes it easier to use custom and more advanced designs in the application.
Is there any way to create a tab bar in iOS with 3 tab bar items having these positions:
Tab1 - margin left equals 0;
Tab2 - centered horizontally;
Tab3: margin right equals 0 ?
I tried UITabBarItemPositioning.Fill and creating a custom UITabBar in order to find some methods/properties to override, but I didn't find anything useful.
Use TitlePositionAdjustment in UITabBarItem.
You can set the horizontal margin or vertical margin.
Since UITabbarItem is not a UIView , We can't access its subview and can't get the frame from it , so we have to set different fixed values on different devices.
Ugly but it works:
nfloat TitlePositionAdjustment = 0;
if (IPhone4) {
TitlePositionAdjustment = xx;
}
else if (IPhone5)
{
TitlePositionAdjustment = xx;
}
//xxx and so on..
tab.TitlePositionAdjustment = new UIOffset(TitlePositionAdjustment, 0);
If you don't want this solution, I think you need to create custom view to simulate UITabBar.
I need to put a search bar at the top of my tableview. I am making a network call and when the results are greater than 100 I want to search bar to appear and when they are less than 100 I don't want to search bar to appear. The tableview is on the right side of the VC and does not take up the whole view controller. I want the search bar to be at the top of the table view as a header.
I cannot use a search controller because in iOS 11, using a search controller makes the search bar pop to the top of the VC when it is active.
I tried to set the tableviewheader to nil to get it to disappear. But I can't get it back obviously because I made the header nil.
self.rightDetailFilterTableView.tableHeaderView = nil
self.rightDetailFilterTableView.sectionHeaderHeight = 0
I have put the search bar into the storyboard as seen in the image below. Is this the right way to add the search bar as a header?
What is the best way to get it to appear and disappear in the tableview? I have tried a bunch of different methods. They all either leave a blank header or do something else that causes problems. I also tried using the header delegate methods but that still did not work.
I am not using a tableview controller, I am using a normal VC. I am also not using a search bar controller because of issues it causes in iOS 11.
Here's what I've done in one of my recent project. First, laid out my views like so:
That is, the Search Bar was added to the parent view rather than the table view. This allows me to hide/show it as needed.
Next, I've defined two optional layout constraint, one ensuring that the tableview is aligned to the top of the safe area, priority 750; the other aligning the top of the search bar to the top of the safe area; priority lower than 750 to hide it below the nav bar or priority higher than 750 to reveal it and push the table view down.
In code, I created a #IBOutlet to the layout constraint for the search bar to the top of the safe area, and I change its priority as needed:
#IBAction
func toggleSearchBar(_ sender: Any?) {
if searchBarVisibleLayoutConstraint.priority.rawValue > 750.0 {
searchBarVisibleLayoutConstraint.priority = UILayoutPriority(rawValue: 1.0)
searchBar?.endEditing(true)
} else {
searchBarVisibleLayoutConstraint.priority = UILayoutPriority(rawValue: 999.0)
}
UIView.animate(withDuration: 0.3) {
self.view.layoutIfNeeded()
}
}
In my case, the navigation bar is opaque and the search bar is not visible behind it. Your case may be different so you may also want to either clip the parent view or alpha fade the search bar when it is not visible.
Good luck!
Please check :
Created IBOutlet for my SearchBar.
#IBOutlet weak var testbar: UISearchBar!
And in my viewDidLoad :
override func viewDidLoad() {
var contentOffset = tableView.contentOffset
let showSearchBar = (results.count > 100)
self.tableView.tableHeaderView?.isHidden = !(showSearchBar)
if showSearchBar {
contentOffset.y -= testbar.frame.size.height
} else {
contentOffset.y += testbar.frame.size.height
}
tableView.contentOffset = contentOffset
}
Here is my tableview storyboard
The title is pretty self explanatory, on iOS 10.3 using a UIBarButtonItem with a custom view (in this case UIStackView) assigned to a LeftBarButtonItem of a NavigationBar is not visible on iOS 11. I haven't figure out why it is not showed but when I type something with the keyboard my logic of the TextChanged event works! So the UISearchView is there but it is not visible:
Here is some code (It is coded with C# but it is using Objective C methods.):
var width = NavigationController.NavigationBar.Frame.Width;
var height = NavigationController.NavigationBar.Frame.Height;
_searchBarContainer = new UIStackView(new CGRect(0, 0, width * 0.75, height))
{
Alignment = UIStackViewAlignment.Center,
Axis = UILayoutConstraintAxis.Horizontal,
Spacing = 3
};
_uiSearchBar = new UISearchBar
{
BackgroundColor = UIColor.Clear,
BarTintColor = UIColor.Clear,
BackgroundImage = new UIImage(),
Placeholder = Strings.Search
};
_uiSearchBar.SizeToFit();
if (_iOS11)
{
_uiSearchBar.HeightAnchor.ConstraintEqualTo(44).Active = true;
}
_searchbarButtonItem = new UIBarButtonItem(_searchBarContainer);
NavigationItem.SetLeftBarButtonItem(_searchbarButtonItem, true);
ParentViewController.NavigationItem.LeftBarButtonItem = NavigationItem.LeftBarButtonItem;
Using the same code on iOS 10 this works.
Please try out setting up constraints to size properly your _searchBarContainer before setting it as the left bar button item. From iOS11 navigations bars use auto layout. Make sure you only add the constraints if iOS 11 is present, I was having problems in iOS 9 navigation bars otherwise.
Also checkout this thread in the Dev forum where it's explained how the bar items are wrapped inside stack views, maybe also helps with your particular issue.
I'm took the Tabbar viewcontroller in this ,I added the 5 item and .I given the image insects is (24,0,0,6).
All button images are added in xib [under the Bar item -->image]Please help.
Thanks.
Adding to a similar answer here:
iOS Tab Bar icons keep getting larger
Not sure if this is an iOS7 bug but I've noticed that image insets need to be balanced.
You have specified insets for top and right but:
if you set a top inset, in order to balance it, you need to set the negative of it to the bottom inset
if you set a right inset, in order to balance it, you need to set the negative of it to the left inset
So, instead of having image insets like (24,0,0,6), use balanced image insets such as UIEdgeInsetsMake(24,-6,-24,6)
Doing so should protect your tabBarItem image from getting whacked on every tap.
If this doesn't suit your requirements, then redesign your tabBarItem image so you can have balance insets or... no insets at all.
Here's the workaround for a bug I've encountered with UITabBarController's UITabBar. If I tap a UITabBarItem once after it's selected, the icon shrinks. What I'd like to do is disable touches. UITabBarItem only has a setting for isEnabled, which grays it out if I set it to false...not what I was looking for.
I used a derivative of this answer to figure it out. With a UITabBarController with 3 tabs, printing tabBarController.subviews, I saw 3 UITabBarButtons and a UIBarBackground. The origin of UIBarBackground's frame was always (0, 0), putting it at the front of the sorted array, so I really don't need to know what the subview is, just "where it is" and whether it will always be there. The UIBarBackground is always going to be at the front of an array of tabBarController.subviews sorted by frame.minX, so I just need to remove it from the front.
Solution
Here's what the extension looks like:
extension UITabBarController {
var buttonViews: [UIView] {
var tabBarButtons = tabBar.subviews.sorted(by: {$0.frame.minX < $1.frame.minX})
tabBarButtons.removeFirst()
return tabBarButtons
}
}
I also created a struct in my Constants file, so I don't have to remember tab names:
struct TabBarItem {
static let firstTab = 0
static let secondTab = 1
static let thirdTab = 2
}
...and finally, where to use it:
In viewDidAppear (NOT viewDidLoad), add the following line to disable the UITabBarItem that you don't want to disable, but not gray out:
tabBarController?.buttonViews[TabBarItem.firstTab].isUserInteractionEnabled = false
In viewWillDisappear, re-enable the tab, as follows:
tabBarController?.buttonViews[TabBarItem.firstTab].isUserInteractionEnabled = true