How To Add iOS App Icon, Image, Color Set To Xcode Project Assets Catalog Correctly

Xcode project organize project resource files use Asset Catalog. Each asset catalog can contain multiple asset sets, for example app icon set, image set, color set etc. When you create a Xcode project use one project template such as Single View App, it will create a default asset catalog file Assets.xcassets in the project files list like below. From below picture we can see in this example, there are three app icon set, one color set, one image set that are added in the Xcode project’s Assets.xcasssets file.

default xcode asset catalog for single view app project

1. How To Create New Asset Catalog In Xcode.

Besides default asset catalog, you can also add asset catalog follow below steps.

  1. Click File —> New —> File… menu item in Xcode project.
  2. Then scroll down to Resource section and click Asset Catalog icon in the popup window.
    xcode file new asset catalog file popup window
  3. Click Next button, input the asset catalog file name ( the default name is Media ) in the next window. Click Create button to create it. After that, you can see the new asset catalog file ( default file name is Media.xcassets ) in the project file list.
    newly added asset catalog file

2. How To Create Resource Files Set In Xcode Asset Catalog.

After create asset catalog file in Xcode, you can create multiple resource files set in that asset catalog. This article will create image set, color set as an example. If you want to learn how to create app icon set, please read article How To Set iOS App Icon In Xcode Project.

2.1 How To Create Image Set In Xcode Asset Catalog.

As you know, different iOS devices has different screen resolution, you can see the apple document Human Interface Guidelines – Image Size and Resolution to learn more. So if you want to display same image for different iOS devices, you should provide different sized images for different screen resolution.

Image set define a set of different sized images which are displayed for different screen resolution. So you can create an image set in Xcode asset catalog to achieve this goal. Below is the steps about how to create image set in Xcode asset catalog file.

  1. Click the asset catalog file ( Assets.xcassets ) in Xcode project file list.
  2. Then click Editor —> Add Assets —> New Image Set menu item at Xcode top menu bar to create an image set in asset catalog.
    click editor - add assets - new image set menu item to create image set
  3. Now you can see an empty image set has been added, click the image set, it will display the image set images overview in right panel. There are no images at beginning.
  4. Select the Attribute Inspector in right most pane, select the device checkbox that you want to display image in Devices section. I select Universal, iPhone, iPad checkbox in this example. When you select one device, it will add a new image placeholder line in the center image set detail view area. Drag and drop the images for different device and different screen resolution to the center image set detail view from finder.
  5. To let you see the example effect more clearly, i use three different content image in Universal device, and i uncheck iPhone and iPad checkbox to remove them. So if the device screen resolution is 1X, the image will show a woman picture. If the device screen resolution is 2X, the image will show a man without hair. If the device screen resolution is 3X, the image will show a man full of hair.
    add images to xcode asset catalog image set
  6. Now click Main.storyboard file in Xcode left panel, add an ImageView object to center View Controller Scene screen, select the ImageView object, and click Attribute Inspector icon in right most pane, select the image set in Image View’s Image drop down list.
    display different image in imageview object use different ios device
  7. Now when you use iPad simulator, because iPad’s screen resolution scale factor is @2X, so it will display the man without hair in the ImageView. When you select iOS simulator iPhone Xs, because it’s screen resolution scale factor is @3x, so it will display the man full of hair.
    display @3x image when use iPhone xs
  8. If you want to delete an Image in image set, just select it and press delete key in the keyboard.
  9. If you want to rename the image set name, just select the image set and then single mouse click the image set name again, then you can input new image set name in it.
    rename assets set name in xcode project
READ :   iOS Swift Array Example

2.2 How To Create Color Set In Xcode Asset Catalog.

Color set is similar with image set. You create a color set with a name, and then set different color for different iOS devices. Then if you set the color set as a button’s background color, when you use different iOS device to view the button, it will display different color as the button background. Below is how to create color set in Xcode asset catalog steps.

  1. Click Xcode project asset catalog file ( such as Assets.xcassets ).
  2. Then click Editor —> Add Assets —> New Color Set menu item at Xcode top menu bar to create a color set in asset catalog. Give the color set a name for example ColorSetDemo.
  3. Now select the color set, it will display color set detail view in Xcode center, click the Attributes Inspector icon at right most pane, and check checkbox Universal, iPhone, iPad in Devices section. Then customize the color for iPhone and iPad.
    set different ios device color in xcode color set
  4. Click Main.storyboard file in left panel, then add a button in the View Controller Scene screen. And set the color set ColorSetDemo as the button’s background color. When you use different iOS device simulator to view the screen, you will find the button background color is different also.
    set xcode color set as button background color

Reference

  1. Human Interface Guidelines – Image Size and Resolution

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.