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.
Related
I got a strange glitch on iPhone 6 device (only on device. Simulators works fine. And i assume another real devices will have the same problem). Here is the video: https://youtu.be/_s3C1RnPG_I
Also, on iPhone X simulator there is a blank empty space under message sending view,
but i want something like this.
Here is a constraints for message sending view:
Definitely something wrong with bottom constraint but i tried almost all and nothing has helped.
According to Apple -
Interface Builder uses UIView.safeAreaLayoutGuide as a replacement for the deprecated Top and Bottom layout guides in UIViewController. To use the new safe area, select Safe Area Layout Guides in the File inspector for the view controller, and then add constraints between your content and the new safe area anchors. This prevents your content from being obscured by top and bottom bars, and by the overscan region on tvOS. Constraints to the safe area are converted to Top and Bottom when deploying to earlier versions of iOS.
Here is simple reference as a comparison (to make similar visual effect) between existing (Top & Bottom) Layout Guide and Safe Area Layout Guide.
Safe Area Layout:
AutoLayout:
Use this article for calculating size of bars.
First assign Leading, Trailing, Bottom and Height constraints for custom message view according below:
Then edit bottom constraints as below:
Change second item to view.Top & Constant = 44 (height of message view)
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.
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
When I select "Vertical Spacing" in interface builder, I expect the bottom of the upper view and the top of the lower view to have a relationship. However, frequently what seems to happen is that the bottom of the lower view gets linked to the bottom of the upper view. Then at runtime the bottom view will have the wrong frame (after resizes, animations, etc.). Is there a way I can ensure that views are consistently linked bottom to top?
[EDIT]
Here's another example. I set a height of 419px. I select "Top space to top layout guide". But instead it puts a constraint for how far the bottom of the imageview should be from the top of the superview. Then I change the height from 419px to 374px, and the view has correct height, but a gap at the top.
I've noticed this many times (usually when attaching the top of something to the topLayoutGuide), and I've put it down to a bug in Interface Builder. It seems like the issue has gone away in the betas of Xcode 5.1
The only workaround I've found is to initially move your view away from the view you're attaching it to, and then create the constraint. In this situation, Xcode will usually do the right thing. Then manually edit the constraint's constant back to 0 (or whatever you want it to be).
Instead of adding vertical spacing, try by adding "Top spacing to nearest neighbor" constraint. Please refer attached image,
Hope this will help.
This issue is fixed in the latest versions of Xcode. You can now select which part of the constraint you want to attach to. It may attach wrong initially, but the constraint editing controls are much better now.