Photoshop Question posted in
The official user guide can be found here.

Avoid UIImaveView stretchs on different devices – Photoshop

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.

Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
  4. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search