xc123e1
xc123e1

Reputation: 33

Set background image compatible for all iDevices

When creating background image for xCode project in Swift, and I also want it to be compatible for all iPhone and iPad devices, do I have to create it like i created the app icon? With all the @2x names, or do i only need 1 image?

And what size should the image be?

Upvotes: 0

Views: 1075

Answers (3)

ABakerSmith
ABakerSmith

Reputation: 22939

What size should the image be?

The size of your images depends on how large they are on screen. For example, say you have a UIImageView that has as width and height of 100 points:

  • On an iPad 2 (which doesn't have a retina display) you would be using a 1x image and so your image file would be 100x100 pixels.
  • On an iPhone 5 (which uses a 2x retina display) your image file would need to be 200x200 pixels.
  • On an iPhone 6+ (which uses a 3x display) your image file would need to be 300x300 pixels.

When creating background image for xCode project in Swift, and I also want it to be compatible for all iPhone and iPad devices, do I have to create it like i created the app icon? With all the @2x names, or do i only need 1 image?

You should have a look at Image Sets in Asset Catalogs.

From Apple:

Image sets: Used for most types of images, an image set contains all the versions, or representations, of an image that are necessary to support various devices and scale factors.

Here's some more information on them: https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/Recipe.html

To create one:

1. Create a new file. Then go to Resource and select Asset Catalog.

enter image description here

2. Press Next and give your catalog a name.

3. To add an Image Set, select your Asset Catalog (the .xcassets file). Then press the plus button in the bottom left hand corner and select New Image Set.

enter image description here

4. You can rename the the Image Set if you want, by default its name is 'Image'. This is the name you use to reference your image in code or IB.

5. Now you've got your image set you can drag and drop images into 1x, 2x or 3x. Or you can change the Devices (in the Attributes Editor) to Device Specific and select specific screen sizes for your images.

enter image description here

6. Now in your code you can create a UIImage using the following:

let image = UIImage(named: "Image") 
// Just replace "Image" with the name of your image set.

Upvotes: 1

i89
i89

Reputation: 1112

Since XCode 6 it's possible to use vector based graphics. This gives you the opportunity to create one vector graphic and during compilation XCode creates the necessary PNGs for iOS (actually iOS 8 does not have full support for vector based graphics).

I use Sketch 3 for creating and working with assets, so there you can create an icon (or whatever) and export it as pdf (Note you have to choose 0.5x, because this is handled in XCode as the smallest icon).

For the sizes of app icons check apple documentation, else you just use the size your imageView is

Upvotes: 1

Alex K.
Alex K.

Reputation: 51

You have to create them in different resolutions. For more details you can have a look:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW2

You can find the right resolutions at the point: "Launch file or image"

Upvotes: 0

Related Questions