The new HIG for iPhone X available here, specify:
"Provide a full-screen experience. Make sure backgrounds extend to the edges of the display, and that vertically scrollable layouts, like tables and collections, continue all the way to the bottom."
Now I'd like to understand how to accomplish that with Xcode 9 GM, since it seems to me that the only view allowed to extend to the whole screen is the UIViewController root view, and that whenever I try to drag constraints for a view above that, i.e. WKWebView to the root view, the constraints get actually connected to the safe area, leaving both the top and bottom areas empty as displayed in the storyboard here:
Please note the answer here specifies to use the safe area, but that doesn't work because using it results in the following simulator result where WKWebView is NOT extending to the edges of the screen:
Just change your bottom constraint First Item to SuperView
Actually I believe the answer is this: to accomplish full screen we should NOT use safe area support. After I unchecked Safe Area Relative Margins and Safe Area Layout Guide on the view in Interface Builder Size Inspector I got the expected result:
In fact I would say that the idea of Safe Area is that of an area which will for sure not be overlapped by any of the system icons, or rounded borders, full screen is the opposite of it.
This answer is simple and worked for me .. follow these sequences:
1- select the background image and open constraints window
2- uncheck constrain to margins
3- as in picture : select (View) not (safe area) from the small arrow in the corner of edit value rectangle .. apply this for all 4 values
4 - enter value 0 for all 4 values and hit Enter
and Done
I solved problem by setting top and bottom like this. xcode version is 11.6
Related
I will mention right away that I'm not iOS developer and this is first time I'm messing with it because I was asked to update web application inside iOS WKWebView wrapper.
I managed to load the web app inside iOS app but on iPhone X there is always white space on top and bottom. I just learned about constraints and I heard that this is default safe area behaviour. I'm trying to expand my WKWebView past safe area to go all the way to the top notch and bottom home button so that there are no white spaces. Inside Xcode all constraints for safe area object is set equal to superview, following web view container object set equal to superview. But I still have white spaces on top and bottom.
There is also top "View" object which I think is elsewhere known as superview, which when I click on I see the constraints for it set equal to safe area and I can only keep it set to safe area or web view container which itself is set to superview. I find this very confusing. What am I doing wrong here?
I would appreciate help regarding storyboard and not code related as I don't speak Swift.
EDIT: Snapshots of constraints
Web View Container Object: https://imgur.com/GcRFeL0
If you use storyboard, you can do like this:
select this constraint and at the right panel, you should change the Second item form Safe Area to SuperView like below:
modify the Constant value from 44 to 0, like below:
the same operation to other constraints.
I added a new MKMapView onto the ViewController, and set the constraints to 0 using the "Add New Constraints" button. Now, the map view has constraints to the safe area on all four sides with value 0, but there are a few issues:
the compiler is throwing a warning saying "Height is ambiguous", even though all four sides are constrained to 0 to the safe area.
After I set the constraints, when I switch "View as:" to another device, the mapView doesn't change size in accordance with the constraints (0 to safe area, aka full screen)
On iPhone X, with the constraints set, there are white patches on the top and bottom of the screen, when what I want is to have the mapKit take the entire screen (pic below). How can I do this?
I experience the same bugginess in the interface builder as you describe in question 1 and 2 from time to time, and I can easily reproduce it now by adding a map view to an empty view, adding top/bottom/leading/trailing-to safe view constraints and switching the view modes around (different devices, landscape portrait).
The only solution I know of is to move the view manually back to where it is supposed to be. The constraint warnings will then disappear.
The issue in your last question is easy to fix though. Select your parent view and uncheck Safe Area Layout Guide on the right hand tool area.
You have to redo your constraints after this, as the safe area you constrained to before is no longer there.
Here are the results with this option checked and unchecked:
I am working on layout for iPhoneX and have an issue with action sheets and Safari browser. This is an extra space. I need that my action sheets display more at the bottom ? How can I do that? I guess I need to disable safe area but how can I do it?
The reason why it happens probably that I use 2 UIWindows: one for all content and the second to display banner at the bottom of the screen.
the space that is outlined - is something to hide my app from everyone :) It does not exist in the app!
I want the action sheet be closer to the bottom. It works well on all devices except iPhoneX. I have 2 UIWindows (one for all content and the second one for ad at the bottom). So, for iPhoneX the content window has probably some safe area inset and becaise of that action sheet shows not from the bottom edge
You don't have to disable the Safe Areas for the View Controller. They are still useful for the top, trailing and leading edges.
To remove the grey bar all you need is to set the bottomAnchor or your containing view to your superView instead of the bottom safe area with a constant of what you need.
You can also further adjust safe area insets with additionalSafeAreaInsets. https://developer.apple.com/documentation/uikit/uiviewcontroller/2902284-additionalsafeareainsets That allows you to leave them as is for the edges that you don't want to modify.
So I have created my webapplication and when I build it in xcode I have to under "Simulated Metrics" > "Size" set it to 3.5 inch since I have a iPhone 4s.
When I build it and run on the iPhone everything looks perfect, but I want this application to run on iPhone 5/6 aswell, but when I change the size to something else in the Simulated Metrics it gets really messed up on my iPhone. I'm using a webview of my responsive website which shouldn't really care about the screensize but I believe Xcode does. So, is there a solution where xcode automatically detects screensize and makes the webview take the whole viewcontroller? Or do I have to create a application for every screensize?
So, is there a solution where xcode automatically detects screensize
and makes the webview take the whole viewcontroller?
Yes - xcode provides ways to do this. Either through auto layout or using springs and struts. With auto layout you will define a set of rules that your UI will follow. If you want 1 layout for all devices it's fairly straightforward and any tutorial will get you started. with springs and struts you just tell your views how they should grow/stay put depending on screen growing. check this out for a quick introduction to auto layout: http://www.raywenderlich.com/83129/beginning-auto-layout-tutorial-swift-part-1
Or do I have to create a application for every screensize?
Nope.. but you can set different constraints in auto layout for your views to behave very different on different sizes. This gets a little more tricky..
No you do not make a new app for every potential screen size, instead you uses XCode's "auto layout" with a set of "constraints" controlling the size and placement of your widgets. A constraint can be a fixed size for the widget or a given distance relative to another widget (or the parent's border). It is not necessarily a fixed distance, it can also be "my widget needs to be less than 10 pixels apart from this other widget".
The "Simulated Metrics" you refer to in the bottom of the drawing area is only a visual help when laying out you your GUI, it has no effect at runtime. You can safely stick with "Any" width and height.
Read this tutorial to understand XCode's auto layout and constraints:
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
Quickly, these are the tools used to setup constraints:
In your case, assuming you have only one big view (your webview), you need to set up 4 constraints stating that the webview's left, right, top and bottom sides are 0 pixels away from the parent's left, right, top and bottom borders respectively:
Lay your webview in the middle of your drawing area
Click on it
Click the "pin" button; you will see this view:
Look at the upper part of the dialog: the small square in the middle represents the view you just clicked and the four red lines represent the distances to the parent's side. Set them all to 0 and click "Add 4 constraints". (Note: the lines are initially dashed when not selected; they turn into solid lines when activated.)
Now the frames in the drawing area do not represent what you were expecting: your webview is still in the middle where you placed it initially and does not fill all the available space; XCode is aware that there is a mismatch between the frames and the constraints and shows a warning. You need to update the frames: click the "issues" button and "update all frames".
The image comes from this question on SO:
What is "Constrain to margin" in Storyboard in Xcode 6
Read it to learn about the "Constraints to margin" switch.
After adding my launch image using a xib (and I even tried the traditional launch image way as well) some of my view controllers have a strange right margin now. For example before I might have had a label whose width was the entire screen, and used auto layouts such that it was leading/trailing to the content margins, and now despite that after adding a launch image there is a margin (it's not on every screen, but definitely some). On one of my screens where this is most prevalent i'm using autolayout but overriding with constraints that I add programmatically. Not sure if that's related.
Has anyone experienced anything like this or does anyone know if adding launch screens affect the story board / view controllers in any way?
Thanks!
On the launch screen select your image view, then select the pin at the bottom right of xcode (3rd option). Make sure all constraints are set to 0, while making sure the red I is selected for each one when they are set and uncheck constraint to margins. Finally click add constraints :)
Hope this helps you!
Rachel