5

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?

Craig
  • 3,253
  • 5
  • 29
  • 43

2 Answers2

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.

enter image description here

Stefan
  • 5,203
  • 8
  • 27
  • 51
  • Thanks for the response. In my case my image includes people and objects that would look funny if the image was allowed to scale in the x and y dimensions independently. What seems to work (kind of) is to choose "Aspect fill" so that the image isn't letterboxed (as would happen with "Aspect fit") or weirdly stretched (as happens with "scale to fill"). The problem is that IB lets me choose how I want to scale OR how I want to position the image, but not both. For now I'm doing pretty much exactly what you are with an uninteresting background image. But I want to use my other image. – Craig Jan 12 '16 at 23:31
0

To make the imageview always scale to fit the screen in my case the key solution was to set the constraint for the Width (the longest size, you might want to set it for Height if your image is height is bigger than width) of the imageview equal to 1 superview width. Then adjusted its margins - setting multiplier 0.8 for this constraint.

Other two constraints were Align CenterY and CenterX to Superview equal to 0.

Nick Kovalsky
  • 5,378
  • 2
  • 23
  • 50