I added constraints properly with respect to super view instead of a safe area but still I am facing an issue of grey area on top and bottom of specific screen.it should appear completely on the whole screen at I Phone X. Please follow the screenshot.
Check that you have a launch storyboard and not a fixed launch image
that does not respect the iphone x screen size
Check in your top and bottom constraint properties that they are relative to superview and not to margins (by default xcode 9 adds the constraints relative to margin).
Related
I am attempting to customize the default LaunchScreen.storyboard of my Flutter app. I simply have a red background on the default View, and I added an Image View as a child of it. This Image View is centered on the screen and renders an image that I have added to "Assets.xcassets" with all 3 sizes. Below is a preview of what my Xcode displays:
However, this storyboard renders differently on devices than it appears in Xcode. For example, it appears slightly off-centered on iPhone 12, and it is scaled up too high for iPhone 6s and is way off-centered. See below for screenshots:
As you can see, the storyboard renders differently on the two devices. How can I make the storyboard appear the same on both devices as it does in Xcode? Any help is appreciated. If I used any incorrect terminology or need to provide additional details, please let me know as I have minimal experience using Xcode.
From the storyboard screenshot attached, it looks like there are no constraints added to the UIImageView.
You should add top, leading, bottom & trailing constraints to superview with 0 spacing to achieve what you want.
UPDATE
Above is applicable to the case when you have a small size image like 100x100 or similar that can easily fit on all screen sizes. In the comments, we see that image is way too big and we want to keep it in center while occupying 50% of screen width.
Remove the leading and trailing constraints, select the imageView and it's superview - add equal widths constraint with a multiplier of 0.5, this will make sure that imageView will always occupy 50% of the superview's width.
Also add horizontally center constraint on the imageView. Make sure imageView Content Mode is set to Aspect Fit.
I'm trying to create a simple game, but the background won't extend to the edges of any of the displays (iPhone and iPad) so there's whitespace at the top and bottom. In landscape orientation there's even more whitespace for some reason. I haven't coded anything yet.
Here's how it looks: https://imgur.com/a/pDupTOD
I have constraints added to all four sides of the Image View and them set to View and 0.
I have also tried unchecking "Use Safe Area Layout Guides" and "Safe Area Relative Margins" neither of which helped.
You have set the constraint to safe area. Instead of pinning your view's edges to safe area, pin them to your superview.
Here is how your constraints may look
Select each one of your constraint(double click on it)
And change the following, i.e. from safe area to superview. Also update the constant and set to 0.
Hope that helps
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'm using Xcode 9 for my project and I'm getting a white space at the bottom, here is the screenshot:
Also I'm using storyboard to design with 4 inches (iphone 5s/SE) as layout.
How to avoid the white space?
Your bottom constraints should be from view not from the bottom layout guide or safe area(xcode 9 specific) and your distance should be zero.
Default it was pinned with layout guides, so give it with view !
Refer below screenshot for better understanding,
to open this dialogue, click drop down icon of field contains 0!
You can do same for top constraint also!
Update :
Second main important thing,
you should use storyboard for your launch or splashscreen. If you are using launch image then replace it by new launch image of xcode 9 and it have option for the image of iphone x.
Then you will not found white space any more!
Refer below screenshot.
This white space is your main view. If you want your image view to fill the whole area, pin it with 0 space to the superview, not to Bottom Layout Guide or Safe Area. To achieve this, select to view scene in storyboard as iPhone X and pin the image view as below:
It is also possible to pin the bottom of image view to superview when not in iPhone X mode: when you pin by dragging with Ctrl, when the list of constaints appears press Option key (alt) and you will see "Bottom Space to Container Margin".
Neither of the two answers above worked for me. Only setting
scrollView.contentInsetAdjustmentBehavior = .never
I have a stackView inside my scrollView and the elements in the stackView have fixed sizes, so I have no need to inset adjustment and this works.
Credit goes to How to get rid of safeAreaInsets on UIScrollview (iOS 11, iPhoneX)
For me this worked:
1) Select image for which you are setting up constraints
2) Go to Attribute inspector in the right panel
3) Select Scale to Fill as Content Mode
I'm working on an app for iPad but when I set the contrains(so it works on iPad Pro/iPad Mini) everything moved. I don't know if I set anything wrong or if it's problems with XCode However, are there a way to just like scale up/down the screen without contrains? Or how to fix the constrains problem.
(I choose all buttons and click add missing constrains)
Picture:
IMO selecting add missing constraints is not exactly what you want. If you want your view to scale up when screen is larger, you need to set the constraints to its superview. So you just say I want it to be 10 pt from the leading edge and 15 pt from the trailing edge. By adding missing constraints Xcode probably tells the view to be xy points wide.
To set the constraints as I mentioned you need to Ctrl drag from the view to its superview and add leading constraint. Similarly for the trailing and eventually top and bottom constraints.