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
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.
XCode 9.3: macOS 10.13.4
I have an swift app where the buttons are off-kilter. I need them at the bottom of the screen and centered. The iOS simulator for iPhone 8 shows the buttons correctly. However, the simulator for the iPhone SE and the actual SE (my iPhone) show the buttons anchored to the right edge of the screen. How can I insure that the buttons are displayed correctly on all iPhones?
First sol
this layout can be done correctly if the center of the middle button is equal to the center of the screen
Second sol
create a UIStackView with these constraints
1- left , right , bottom to screen
2- height say 100
with distribution set to fillEqually , spacing set to say 20
drag the buttons inside it and they will look right in any device
Remove the constraints from the 3 buttons: Calc, Clear, and Help
Align clear to be horizontally centered
Align Calc trailing offset from Clear's leading.
Align Helps Leading offset from Clear's trailing.
Align Clear bottom offset from the bottom margin.
Align Clear, Calc, and Help along to center vertically with one another.
You have two choices: 1) use the legacy struts and springs mode in interface builder to distribute your items as you need them or 2) spend the time learning auto layout, and use it instead. There isn't any easy answer because of all the different screen sizes, and you haven't even considered iPad screens here. The best way to pick up auto layout is to view the WWDC videos on the subject. Yes, it will take longer, but your app will respond better to screen changes, and you will also be able to inherently accommodate new screen sizes.
Use a horizontal stack view for buttons, and set spacing between buttons.
Approach 1 - Set trailing space and leading space, pin the view to bottom and set a fixed height for stack view.
Approach 2 -
Set fixed height and width to stack view and center horizontally, and pin the stack view to bottom.
Always try to use stack view, with that you will reduce the number of autolayout issues you run into.
Please add the constraint for stack view and adjust like that:
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).
Ok I have this case,
There is this screen I designed for iphone 8
As you can see here there is 8px green view that I pinned to the bottom of the superview by making a constrain of 0px between this view and top of bottom layout guide. and it works fine on all phone EXCEPT for the new iPhone X where this happens:
and thats not my intended behaviour. I want to to be as the other iPhones, pinned to the bottom with 0 margin.
Is there is a solution for that using the storyboard? Please post solutions using storyboard only. I know that I can do it programmatically. this should be easy on storyboard I guess.
Thank you
1- Select your view in storyboard

2- Double click on bottom space constraint and select Superview for first item
3- Set constant value to 0
You can achieve this
By Setting AutoResizing like this in storyboard
With AutoLayouts
In storyboard select "View as: iPhone X" and pin the desired view to superview, not Bottom Layout Guide or Safe Area (in my example it's a full screen image view, your view would be pinned only to bottom):
Alternatively, if you are not in iPhone X view, you can pin bottom edge to superview by dragging with ctrl key and then when selecting from the list, press option key - more details in this answer: Autolayout: Add constraint to superview and not Top Layout Guide?
I set up a Launch Screen in xcode with Inferred Size, Simulated Size: Fixed. I put a View in it that covers the whole View Controller. In that View is an image and a label. Both the image and label have height and width constraints, in addition to constraints centering both items with the superview center, yet somehow whenever I run the simulation the label is centered on the screen but the image is off to the right. Anyone know what I need to fix here? Thanks!
Edit: It turns out I had a previous launch screen file listed in Info.plist. I updated it with the new launch screen file name and it worked. I also changed the launch screen to remove the splash.
Use width and height equal to, and align your view horizontally in the container..
Also, as per Apple's human guidelines they advise against having a splash screen.
Workaround of this issue is to not place image vertically centered. You can move image a bit to top or bottom. In such way issue won't be visible.