We have custom tab bar in our app. The height of the custom tab bar is fixed. It was working fine for all devices except iPhone X. The problem is the height of custom tab bar is 45 but in iPhone X it will collide with the home indicator. So we had changed the bottom of the custom tab bar to the safe area. But the problem will be I will see the background view below my custom Tab bar. My question how can we give constraints to Custom tab bar that will be same height all devices except iPhone X and also hides the bottom space in iPhone X? but I want to increase the height of tab bar in iPhone X but I shouldn't affect other devices. Btw I don't want to write a code to separate iPhone X and other devices. All I want to do it in storyboard itself.
How about this?
set your view to be within safe area
set fixed height to your custom tab bar
put a view and set margin between safe area bottom and superview bottom
refer to the picture below
Constraints
How it looks like on iPhone X
How it looks like on other iPhone
How about making a view effect view at the bottom, which is larger than 44pt? I have tried it in my application and it works well.
refer: https://novemberfive.co/blog/apple-september-event-iphonex-apps/
Hope this helps you with programmatically
self.tabBar.layer.masksToBounds = true
self.tabBar.isTranslucent = true
self.tabBar.barStyle = .blackOpaque
self.tabBar.layer.cornerRadius = 20
self.tabBar.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
Related
I need to recreate navigation bar using custom view, since it will be easier to make than inserting view to the actual navigation bar from apple.
I need to insert search bar and some buttons.
but I have problem to set the size of that custom navigation bar view, in some iOS device it seems little bit bigger than the navigation bar from apple, I set the autolayout like the picture below. constraint to leading, trailing and top to the superview and then set the aspect ration to 375:80
the custom view is the red one. the navigation bar in orangeVC is from apple using navigation controller
and here is the result, for iPhone XR, XSMax, it seems great, the size seems the same.
but for iPhone 8 it seems the custom view is slightly bigger
how to properly make custom view that has the same size like navigation bar from apple?
Where the ratio 375:80 are you getting from?
It's not correctly.
NavigationBar's height is 44 by default, and StatusBar is 44 for Notch type devices like iPhone X, XR, XS, XS Max and 20 in otherwise.
So you need to set 88 for Notch type devices and 64 for otherwise instead of ratio. Good luck!
Nothing needs to be calculated.
Navbar height should be 44.0 all the time.
But, Navbar top constraint should use Safe Area in place of superview. and add a status bar background view just to match your header color
The best approach I found so far, without having to create a navigation controller instance:
[self.navigationBar sizeThatFits:CGSizeZero].height;
I want to make my app compatible with iPhone X. I'm not using storyboard or xibs, just code. When I run my app on the simulator the view overlaps part of the status bar and the home bar at the bottom. Is there a way to programmatically adjust the view so that it fits within the bounds? Any help is appreciated.
I believe the answer you are looking for is called safeAreaInsets, which are basically insets that considers the position of the iphoneX exclusive UI components such as the navigation bar and the home bar.
You should adjust the sizes and constraints of your UI components according to the safe area as opposed to the screen, for and non iphoneX devices, it would be 0, which means it would be the same as adjusting according the the screen sizes instead.
The docs for it is at:
https://developer.apple.com/documentation/uikit/uiview/positioning_content_relative_to_the_safe_area
I made a view for a switch view. Now I already had tabbed menu buttons in it. The problem is the subview for the switch view seems to be overlapping with the tab bar icons at the bottom. Please help.
i think thats because your tabBar is set to translucent. set it to non-translucent from storyboard or programatically.
self.tabBarController.tabBar.translucent = false
You should have a constraint that sets the vertical space between your subview and your tabbar.
Also, check that your layout respects the iPhone X Safe Area (https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/), from your image it seems that your elements overlap the safe area at the bottom.
My app works well on all device except for iPhone X.
On iPhone X the tool bar on the bottom is shown like as shown in image
But I want to show it like shown in second image
But when ever I shift the tool bar up so that it will show properly on iPhone X then it also move upwards in other devices.
How should I solve this problem.
Actually the bottom bar of my view is inside another view thats why it is not extending accordingly.
So simply putting the bottom bar outside, on the main view and adjusting the constraint simply resolve my issue.
In my case My toolbar's bottom constraint was attached to superview's bottom. Changing it to Safe Area bottom resolved the issue for me
I have a problem with a "double" navigation bar in a screen of my iPhone app.
Starting position:
Xcode 8, Swift
I have a TableView with static lines that is embedded in a navigation controller. From the first cell I then call a screen (Segue Show Detail), which is very complex (labels, text boxes, buttons, etc.). When I execute the "Reset to suggested constraints" function on the screen, the screen is supplied with "generated" constraints. This is still clear. When I run my app in the simulator (iPhone 6) or my own iPhone 6, I see on the above screen a status bar, then my right navigation bar (Back button, title) and below an "empty" 2.Navigation bar. This decreases the screen down and is no longer fully visible. If I delete the constraints for the screen with the "Clear Constraints" function, the screen in the simulator (i6) looks good as I develop in the storyboard for the iPhone 7. But when I connect my own iPhone 6 and test, the screen does not fit completely to my iPhone, because right and down is something truncated.
I suspect the error in the "generated" constraints.
Now my question:
How can I check the generated Contraints (well over 100) for errors?
In the Internet and the forum I found nothing, which could help me.
Workaround for me:
The top UI element on the screen is a label across the entire width of the screen. For this label, I set a constraint manually, in addition to the generated constraints
Label.top = Top Layout Guide.bottom + 44,
whose value I then change to the value
Label.top = Top Layout Guide.bottom
This causes the label to slide directly below the status bar in the storyboard. The navigation bar is then no longer visible in the storyboard. This makes the placement of UI-Elements at the bottom of the screen somewhat more difficult because you do not know exactly which space is still available.
The display in the simulator (i6) and on my iPhone 6 looks however through the workaround ok.
For your help I would be very grateful.
Greeting Reinhard