1

I need to set a background image in the storyboard in my iOS project, the problem is that I don't want image to stretch on different screens, for example, if I use an iPad I will see a stretched image, which is not really comfortable with the representation of the other components in the page.

Is there any way to use a set of images which will be load in base at the device the user is using, or simply, is there any way to set a single image for all the device and let her fit properly the view.

I already tried with aspect scale to fit or aspect fill, but this is not what I want to achieve.

//EDIT 1(Adding clarification example)

Take for example an Image( stored in xcassets) which has exported as png from photoshop. The size of the image is like iphone X( height 812, width 373 I think). What I want to achieve is that if I use an iPad or an iPhone 5 this image( which is a full screen background) the image has to be showed like in iPhone X. I think it is impossible to use a single image for all the devices, but maybe exist a trick to load different images in base at the used device.

Saad Chaudhry
  • 1,392
  • 23
  • 37
Alessandro Pierro
  • 117
  • 1
  • 10

4 Answers4

0

Use asset catalog (with accurate resources @2x/@3x / or some xcode supported vector format PDF )

Durdu
  • 4,649
  • 2
  • 27
  • 47
0

In Xcode 8 and above, you can add an image as pdf instead of png, create a new Image Set, and in the Attributes Inspector, set the Scales to Single Scale option. enter image description here

Agent Smith
  • 2,873
  • 17
  • 32
  • I don't find it a proper solution for this particular question. Scale property can be used in some cases but one should understand the apple standards and screen resolutions Normally scale property is used as a background for button, textfields and views and the reason is to make the app lightweight in terms of resources and reuse ability of a component. – Saad Chaudhry Feb 20 '18 at 14:55
  • @SaadChaudhry Vector Images can stretch to whichever dimension you want. You can use this for UIImageView also. – Agent Smith Feb 20 '18 at 14:57
  • you can but this is not the default way. – Saad Chaudhry Feb 20 '18 at 15:06
  • @SaadChaudhry There are many ways to achieve what you've mentioned. Since I've Implemented this, I found out that it can solve the problem of using a single image in every iOS device without stretching. – Agent Smith Feb 20 '18 at 15:08
  • I completely agree but what it did not do was give you truly scaleable vector images. Stretching an image above its base size can left you with some ugly, fuzzy results. – Saad Chaudhry Feb 20 '18 at 15:22
  • @SaadChaudhry Ohh I understand the problem now, what you can do is, find [this](http://image.intervention.io/) kind of library for image manipulation and when retrieving image from server you can provide the actual size(height,width) of your **UIImageView** and it will give you non-stretched images, However, your original image should be large size. – Agent Smith Feb 20 '18 at 15:35
0

You need to understand the screen resolutions and the image/png file proportion for different screen resolutions. Here is a useful link regarding your query. Also I suggest you to read the Apple official documentation about human interface guideline.

If its is a static image in which you don't care about the screen resolution that is a fixed width height you can avoid having 1x,2x and 3x resolutions, other then that you need all three resolution for almost every image either it is App icon, Launch Screen or custom image.

Note: for custom image you can have modified 1x,2x and 3x image resolutions or scale property for image or as per you container/need.

Saad Chaudhry
  • 1,392
  • 23
  • 37
0

Create two images with maximum resolutions for iPhone and iPad - 1242×2208(for iPhone) and 2048 x 2048(for iPad)

In your assets, add image set for background, select that and configure the attributes inspector like in the image.

  • Select Scales as Single Scale
  • Check iPhone and iPad under Devices

enter image description here

And in the storyboard, add UIImageView to the controller, set its mode to "Aspect Fill" and set all the outlets

Vincent Joy
  • 2,598
  • 15
  • 25