In one of my app, i have not used navigation bar for header. I have used UIView which is of 64 height.
I just tried to design one screen app in xCode 9 to support iPhone x.
In storyboard, I have used UIView with 64 fixed height, and a label which is center to UIView
Everything is working fine in iPhone 8 and iPhone 8+, but in iPhone x, design is not looking good.
Fixed view looks small in iPhone x.
Please check below images
As i have start developing for iPhone x for other application, navigation bar gets bigger in iPhone x (around 145 px).
How can i manage design in iPhonex without navigation bar?
What you need are safe margins. Official Apple tutorial on iPhone X explains everything about them here in "Human Interface Guidelines
iOS" and here in "Designing for iPhone X".
1. Add subview to ViewController
Let’s get started by adding a subview into the view controller. This subview will be our custom navigation bar. Let’s setup auto layout accordingly.
Setting up auto layout constraints on custom navigation bar
NavBar.Height = 44
NavBar.Top = Safe Area.Top
NavBar.Leading = Safe Area.Leading
NavBar.Trailing = Safe Area.Trailing
the constraints are between the custom navigation bar and the safe area
2. Add ImageView as Background
Take an image view that display our background image. This imageview should be behind our custom view for navigation bar
Setting up auto layout constraints on image view
Image View.Top = Superview.Top
Image View.Leading = Superview.Leading
Image View.Trailing = Superview.Trailing
Image View.Bottom = NavBar.Bottom (For this drag from imageview to customview and choose last baseline constraint)
Leading and trailing constraints are all between the image view and it’s superview.
For the bottom constraint, we will set it between NavBar.Bottom and Image View.Bottom. The purpose of this is to make sure that the image view will cover up the entire custom navigation bar.
3. Final Step
A. Set clear color of custom view
B. Set image on imageview
C. Make sure the content mode of imageview is “Aspect Fill” and “Clip to Bounds” is checked.
4. Unit Test
Test this in all devices from iPhone 5 to iPhone X.
In all devices expect iPhone X our custom view with image is 64 pixel, and in iPhone X it is using the safe area also.
Behaving the same way as default navigation bar.
Related
My .plist's UIStatusBarHidden is false, so my app does not show the iOS status bar.
The UI elements that are connected to the top of a custom UIView I have, appear too high on iPhone 6/7/8 devices. This is because IB takes the status bar into account in my top constraints. (The iOS status bar is the Safe Area in my XIB.)
How do I tell IB that I don't have a status bar, so that my top UI elements appear correct for iPhone 6/7/8. I don't want to mess up they layout for iPhone X devices, which is already okay.
How things look in IB:
When running on Simulator:
By switching off the Safe Area option, it's possible to get the iPhone 6/7/8 correct (by increasing the constraint constants), but then these UI elements will be too high on iPhone X devices.
You can remove safearea at the storyboard options
Storyboard Instpector
Constraint top to root view
My app uses a navigation controller. On this particular screen the navigation bar is transparent, to take advantage of images. The image view is set via the story board. The constraints are:
Height 300
Top space to Top Layout Guide -64 (To make the image appear behind the navigation bar)
Equal width to container
This renders correctly on all devices up to iPhone 8 plus however on the iPhone X it does not. Another issue is; A view I create programatically using X and Y coordinates also shows in the wrong position on iPhone X. Again this works on all devices up to 8 Plus. Below is how I'm create the "card" view:
let card = UIView(frame: CGRect(x:10, y:245, width: viewSize-20, height:80))
Please can you advise how to handle both of these issues on iPhone X without affecting other devices?
Screenshot of issue(s):
Thanks in advance.
I have few problems with the auto layout. It looks perfect in Xcode for every iPhone models, but when I try on my iPhone 5S, the buttons don't look same as with my main storyboard. It works perfectly only for iPhone 7 and 7 plus sizes.
I used "Reset to suggested constraints" function. The Tic tac toe board is imageView and I have 9 buttons on it. These buttons don't look properly for iPhone 5s and 4s sizes. How can I fix it?
For the board you can user a view with black background color and for the buttons, put the buttons inside the board view by giving their height and width according to the height and width of the view. For example, button's height should be equal to (1/3 of view's height- (the spacing between the button)/2) and similarly do this for the width.
For the position of the buttons, position them to horizontal and vertical to board view and change the constraints multiplier accordingly(may be 1/2 for the first button , 1 for the center button and 3/2 for the third button) and similarly do this for the vertical position of the button.
Set the board view constraint to the main view, so now whenever the screen size changes your buttons and view will automatically be adjusted.
If you didn't understand my answer or need more clarity or help, just comment on this tagging me.
I have a Navigation Bar in my storyboard, and set the folowing constraints:
Horizontal Space - (-16) - View Navigation Bar
Horizontal Space - (-16) - Navigation Bar View
Vertical Space - (8) - Navigation Bar - Top Layout Guide
However it appears like this:
Both in portait and Landscape oriantation.
How can i fix it so that i do not have 3 pixels of White space? (also does this on my Iphone 6plus)
I used the Inferred Size option.
It works on Iphone 4S, Iphone 5, iphone 5S, iphone 6.
My constrains seem to indicate that i have constrained the view against its Superview's margins, rather then against its actual edges. Because the margins are different between other phones and iPhone 6 Plus, my navigation bar ends up inset (because constant 16 isn't large enough).
I turned margin based constrains off in the same popup that i used to create these, but i had to remove the constraints i set first.
Steps to fix:
Click navigation bar
Click pin (the |-[]-| ) thing on the right bottom corner (3rd from the right 2nd from the left).
Click 'constrains to margins'
Source Rincewind from Apple: https://devforums.apple.com/message/1099289#1099289
I'm struggling to get my constraints working for both ios 7 and 8 in xcode 6. My app is just a webview that should take up the whole screen and not appear under the status bar.
My problem is that it only displays correctly in either 7 or 8, but never both at once. Depending on how I adjust my horizontal constraints it's either too big for the ios7 screen and fits the 8, or too small on 8 and fits 7. Here's the issue and constrains I have set up:
*Edit: I think maybe my superview is positioned incorrectly, since my constraints are relative to the super view. I just can't figure out what would be wrong with it.
ios7 fits
too small on ios8 (green background is the parent UIView)
20point top constraint to move the view below the status bar
0 side constraint so it resizes on orientation change
0 side constraint so it resizes on orientation change
0 bottom constraint so the view isn't pushed below the bottom of the screen
I think you need to pin this webView like this
So apparently there were constraints on the parent view that I had the webview in. They did not show up in the left nav like the webview constraints did so I was not aware they were there. In the right inspector panel click on the ruler icon with the view selected and you'll see the constrains. After removing those it was just a matter of tweaking the constraints on the webview to align things properly.