1

I'm using Swift 4, XCode 9. I have an iOS application which has a background image which was set using storyboard. The actual storyboard file is viewed from the frame of reference of an iPhone SE. However, I've never had a problem with the image scaling to bigger phone sizes, except now for iPhone 10. It won't fill the whole screen. How can I fix this? The background is displayed through an image view. I've tried changing the height of the image view both via story board and programmatically with no luck. Again, this only is a problem on iPhone 10.

EDIT: I've somewhat fixed this problem by adding a specific iPhone X Launch Image, but now my components are all shifted to the left

enter image description here

goat
  • 69
  • 1
  • 11

2 Answers2

1

There are few steps you should be careful.

Step 1: Choose the device iPhone X in Interface builder. enter image description here

Step 2: Add a full image to the ViewController. enter image description here

Step 3: Add constraints (Should be all Zero) by selecting the bottom menu. enter image description here

We all set. If you start adding from iPhone X or later devices, it will automatically adjust the bottom, top, left and right constraints accordingly all the previous devices.

NB: While we adding manual constraints, be aware that the SafeAreaLayout has the first priority than the manual constraints.

Another method (You can use either one depends upon your interest)

Provide leading, trialing, top and bottom constraints to the background image. Then select the bottom constrain, and from the size inspector choose the first item as Superview

enter image description here

enter image description here

I believe this will help somebody. Cheers.

Ram Madhavan
  • 2,362
  • 1
  • 17
  • 20
0

iPhone X has a different screen size of 375 × 812 points (1125×2436 pixels). The iPhone X's aspect ratio is approximately 9:19.5 So it is different. Here is Apple's official guide which tells you how to handle images. https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Please show us some code or image so that we can solve your problem.

weegee
  • 3,256
  • 2
  • 18
  • 32
Rizwan Ahmed
  • 919
  • 13
  • 19
  • Did you give constraints properly? Did you set them up first? – Rizwan Ahmed Feb 04 '18 at 05:34
  • No constraints, everything centers fine on all other devices. And, before adding this launch image, when I had my original problem, the components were all centered fine – goat Feb 04 '18 at 05:36
  • Without constraints your views won't be properly placed. Can you tell us how you have added your imageview? And the orange color gradient is the image view you are talking about right? – Rizwan Ahmed Feb 04 '18 at 05:37
  • This was my first iOS app I made years ago, so I literally just placed an image view on the storyboard view controller, sized it to cover the whole view (statically) within interface builder, and that was that. I’ve never had a problem with it scaling on new devices over the years until now. I’m hesitant to go through the entire project and add constraints just for iPhone 10 because it seems there should be a simpler more straightforward answer. – goat Feb 04 '18 at 05:41
  • And yes the gradient is the image I’m referring to – goat Feb 04 '18 at 05:42
  • The approach which you had taken is incorrect. It will just take an hour or so to apply constraints to your view. Without constraints, it won't be properly placed. – Rizwan Ahmed Feb 04 '18 at 05:44
  • how is it that everything is centered perfectly on all other devices, and even on iPhone 10 when I remove the iPhone 10 launch image? – goat Feb 04 '18 at 05:45
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164476/discussion-between-rizwan-ahmed-and-goat). – Rizwan Ahmed Feb 04 '18 at 05:45