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
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
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.
I'm presenting a view controller when my view controller is rotated to horizontal.
In my NIb, I have a help button with constraints to margin top and right of 8 pixels each. However, my view controller displays with the button in the top right of a Portait perspective. See image. How do I make this show up in top right in Landscape?
It looks like your screen did not rotate, because the status bar is still in portrait mode. BUT... even if it did rotate, you would probably have problems because the status bar is 8 pts wide, and it is automatically removed in landscape mode.
I'd say (1) set your constraints to put the button 30 or 40 pts from the corner, until you get the rotation stuff worked out, and (2) fix the rotation issues by looking at the settings for which rotations the simulator supports. Normally rotations allowed by xcode (at least for my default swift projects) are left, portrait, landscape, but not upside down.
It happens to me all the time, when using the simulator!
(Assuming that your project is supporting both landscape and portrait mode)
To make sure your device has rotated from landscape to portrait or the other way around, simply rotate it three times instead of once! (Press the ⌘ and then → three times)
Also for your button placement, I would recommend creating a Standard offset to superview's top and trailing margins, without using any particular numbers (Standard pops up when you delete the number in the constraint's Attribute Inspector).
I have this viewController that shows a navigationBar at the top (white box on top) and a toolbar at the bottom (orange box in picture).
Because the navigationBar is something iOS is adding to the viewController, when the viewController is visible, self.view's high will be reported as the screen size minus 44 points.
I have added an imageView to the view and I want it centralized between the navigationBar and the toolbar, like seen in the following picture.
What I did was to add a constraint to centralize vertically the imageView. As you see in the picture Xcode shows that the imageView is perfectly vertically centered as I want but this is not what happens when the app runs (thanks Apple).
In practice this is what happens: suppose I am running it on iPhone 5. iPhone's 5 screen high is 568 points. Because there is a navigation bar, the hight of self.view will be 524 pt (568 - 44). The constraint stupidly will disregard the top 44 pixels where the navigation bar is and centralize the imageView on the are between the bottom of the navigationBar and the top of the toolbar. The result is that the imageView will be closer to the bottom.
This imageView is carefully chosen to fill completely the space between the toolbar and the navigationBar when the app is running on iPhone 4. Also this imageView has to respect an aspect ratio constraint. Exactly like this:
Instead of centralizing the imageView using a vertically centered constraint I tried to add a top constraint to the superview and a bottom constraint to the toolbar. That works fine in all iPhones, except on the iPhone 4, where these two constraints force the imageView into another aspect ratio, like this:
So, what kind of constraint I have to apply to the imageView to make it center on the space between the navigationBar and the toolbar without losing the aspect ratio?
If you want the view to be centered between the navigation bar and the tool bar, then deselect both "Under Top Bars" and "Under Bottom Bars" for your controller. Add a centerY constraint to your image view, give it 0 length spacing constraints to the 2 sides, and finally, the aspect ratio constraint. I tested this, and it worked at all sizes, with a 1:1 aspect ratio. If you want a taller aspect ratio (your image looks like ~1:1.2 w:h) then you need to do some additional work to make it turn out right for the 3.5" screen because there's not enough height to get that ratio with the image view being full width (assuming that you also have the status bar showing -- if not, then these constraints should work for the 3.5" screen). I can edit my answer to include how to do that, if you say what aspect ratio you want, and if you want some minimum spacing between the two bars, or whether you want the image view to be as wide as possible while still maintaining its aspect ratio (which would mean there would be no space to the two bars).
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.