Positioning and scaling launch screen image

Question

The image I want to use for my launch screen is tall and narrow. Most of the important content of the image is in the bottom 2/3, so if anything is to get clipped, I'd like it to clip the top.

In order to use this as the image on my launch screen for all sizes and orientations of devices, what I'd like to do is have the width fill the screen and pin the bottom of the image to the bottom of the screen. I have tried various combinations of "aspect fill" and "aspect fit" and constraints on the bottom (0) or bottom and left (0 for both).

The result is always that the image is not scaled to fit the width (it is presented at full resolution, so it goes off the left and/or right edges), or, if it is properly scaled, the image is centered vertically than aligned at the bottom of the screen.

This should be simple, but I try not to use Auto Layout in my apps and am not familiar with the interactions of all the various settings and constraints. In the end I want the image scaled to fill the width of the device, and the bottom of the image at the bottom of the screen. I want to make one XIB that works on all devices. Seems simple. Any suggestions?

Answer 1

I did it the following way:

1. Add a background image which can be cropped/scaled but shows no specific information to LauchScreen.xib
2. Choose 'Scale to fill' for your background image and add constraints for the distance to the top, left, right and bottom screen border (in my example 0)
3. Add all additional elements with transparent backgrounds on the screen and add the needed constraints. (In my example I've just choosen the centerX and century constraints to place the title.