2

I have a Universal iOS app and am trying to move from old-style launch images to a simple centered image on a storyboard Launch screen, so I have a single storyboard for all devices. My image (640x1136, iPhone 5s size) needs to not be stretched when the app is run on devices with larger sizes than the image -- in other words, the background color of the UIView should appear surrounding the image on larger devices. For debugging purposes I changed the view background color to a gaudy Lime.

I defined 2 constraints on the UIImageView as directed in the SO post here according to the highest-upvoted answer (Suragch's) and in fact had to also follow the accepted answer's recommendation to add the additional UIView into which my UIImageView would be contained.

The "content mode" of the UIImageView is Center so seems there should be no stretching.

In the pic notice Xcode's Size Inspector settings for the UIImageView. The UIView has iPhone 7-sized dims (750x1334) and so because that iPhone is taller than my image the UIImageView is positioned so that its X is 55, Y is 99. The width and height are same as the image itself (640x1136).

When I run in Simulator an iPhone 7 seems it should look like exactly as what Xcode's Interface Builder shows (Lime color appearing all around the image, but instead, for any device larger than an iPhone 5s or SE it looks like the pic I've attached (an iPad Air, FYI). You can tell the image must be stretched quite a bit vertically because the image is only 1136 tall.

I've attached screenshots for the iPhone 7 (simulator) iPad Air and iPad Pro. Notice the horizontal strips of lime color appear on the right and left edges of the iPad Air. And notice that when it comes to the iPad Pro the lime background color begins to be shown above the image. It's as if on the smaller devices the system is stretching the UIImageView, but as device screen size increases this eventually stops, until for the largest (the Pro) you can actually see the background all around. It seems that for all device sizes listed in the Apple docs that are taller than iPhone 5s or SE, there should be no stretching/distortion. This is what I'm trying to accomplish.

Interface Builder size settings Interface Builder size settings iPhone 7 (simulator) screenshot iPhone 7 (simulator) screenshot iPad Air (device) screenshot enter image description here iPad Pro (device) screenshot enter image description here

Alyoshak
  • 2,696
  • 10
  • 43
  • 70
  • If what you want is the view/image to completely cover the screen (no lime green) you could set a top/bottom/left/right constraint of 0 to the view – CodeNinja Oct 06 '17 at 17:54
  • I want my image to remain unstretched. It should completely cover the screen only when the image's dimensions and the device's match. – Alyoshak Oct 06 '17 at 18:07
  • So you want the (black+blue thing?) image to remain one size, adding an extra "border" if you will if the image does not fill up the whole screen, such as on an iPad Air? – CodeNinja Oct 06 '17 at 18:17
  • I mean looking at the scale between both images it doesn't look stretched, can you post what you want to show up, how you want the image to look on the larger screen? – CodeNinja Oct 06 '17 at 22:17
  • Well, I *have* posted what I want to show up. See the difference between the two images I provided? The first (Xcode interface builder) is correct, and something like it should be shown whenever device is not 5s or SE -- no lime in view. I do appreciate your help, but what I need/want is pretty clear. – Alyoshak Oct 06 '17 at 22:41
  • ...but there is lime in both images? I'm sorry I'm not understanding, I do want to help. – CodeNinja Oct 06 '17 at 22:48
  • Think of it like this: my image is *exactly* the same as the screen size of the iPhone 5s. Exactly. Therefore on the 5s none of the background color of the UIView will be shown -- all you will see is my image. On *any* device that is taller and wider (pretty much all other devices) the extra space around should be background color, bc the image should retain its actual size. – Alyoshak Oct 06 '17 at 22:53
  • Okay, so if you want it to stay exactly the same height/width as the iPhone 5s screen size, why not have a height/width constraint of `(640x1136)`? – CodeNinja Oct 06 '17 at 22:59
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156138/discussion-between-codeninja-and-alyoshak). – CodeNinja Oct 06 '17 at 23:59

3 Answers3

6

I was able to get this to work finally, by completely eliminating the constraints and only using the autoresizing settings found when you choose the Size Inspector. The UIImageView now retains its specified size and is not stretched.

Alyoshak
  • 2,696
  • 10
  • 43
  • 70
0

Try adding a width/height constraint to your ImageView:

enter image description here

This is done by first selecting your ImageView and then selecting this |-☐-| icon (located at the bottom right of the Storyboard window, next to the option where you can change the type of device)

CodeNinja
  • 616
  • 4
  • 18
  • If this is going to be an accurate answer for the community then the pic needs to show all the settings. "Add Constraints" button is disabled, so what you've shown can't even be done. I did play with the settings but nothing worked. Sorry, I've never used constraints before. – Alyoshak Oct 06 '17 at 23:39
  • You're right - I added a better picture and an explanation. The Add Constraints button will enable itself when you click the checkboxes. – CodeNinja Oct 06 '17 at 23:44
  • I did *exactly* what you showed and since I can't provide an image I can only say that on my iPad Air the image was not centered, but its top was fixed to the screen top and its left side fixed to the left side of screen, and a strip of lime green showed only on right side, and the bottom was cut off. Let's try this since you're working hard: I'll send you the image and you just supply the answer when you've got it right in simulator. It's pretty easy setup: single Launch storyboard and a simple 640x1136 png file to be centered on it. – Alyoshak Oct 06 '17 at 23:52
  • It sounds like you may have some extra constraints, the only constraints on my ImageView are Center X, Center Y, Width, and Height – CodeNinja Oct 06 '17 at 23:55
  • Above, under my question itself, it says we can move this to a chat session. How about that? Too much back and forth going on in the Question and Answer. – Alyoshak Oct 06 '17 at 23:57
0

Okay, I think I've figured out the problem. Your image is sized too large. You say you want it to be the size of an iPhone 5, and it's display size is 1136x640 pixels. This is not the same as the width/height in Xcode. To get this, change the device to iPhone 5 (or similar) and get the size. For instance, the size of the View for an iPhone 8 is 667x375. Then your image won't be cut off.

CodeNinja
  • 616
  • 4
  • 18
  • No, the image is not too large. It is exactly the size Apple requires for it. These are retina screens -- you can read why larger images are used for them here: https://www.danrodney.com/blog/retina-web-graphics-explained-1x-versus-2x-low-res-versus-hi-res/ and you can verify Apple's size requirements in the table here: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/ – Alyoshak Oct 07 '17 at 01:43