CODEWITHSUNDEEP
iosxcodeuikitasset-catalog
Deepak Sharma
Deepak Sharma

Reputation: 6477

Xcode Asset Catalog issues

I just started using Asset Catalogs in Xcode, so had few questions about better organization of catalog.

I have over 100 button images, each image has 5 versions(@1x, @2x, @3x, @1x iPad, @2x iPad).

  1. One way is to create 100 image sets in the catalog file. However, that would be too clumsy. Is it possible to group related image sets together?

  2. Is there a better way of importing 500 images than manual drag and drop?

Upvotes: 0

Views: 179

Answers (1)

DonMag
DonMag

Reputation: 77476

Name your image files using the @x~device format, such as:

btn1@1x~iphone.png
btn1@2x~iphone.png
btn1@3x~iphone.png
btn1@1x~ipad.png
btn1@2x~ipad.png

You can then add them as individual files in your project, putting them in groups / folders as desired:

enter image description here

Now, you can set a button (or image view, etc) image via code:

if let img = UIImage(named: "btn1") {
    button1.image = img
}

and iOS / UIKit will automatically use the correct image for the device.

Or, you can set the image in Storyboard / IB. Note that when you select the image from the drop-down list in Attributes Inspector pane, it will show as:

btn1.png

however, at run-time -- or, if you use Preview or View as: to change the device in Xcode -- the correct image will be used.

Give it a try with these images:

enter image description here enter image description here enter image description here

enter image description here enter image description here

The @1x images are 128 x 128, the @2x images are 256 x 256 and the @3x image is 384 x 384.

Note: You can also use Asset Catalog without having to drag the files one-by-one. If you have the set of 5 files names as above, open an Asset Catalog in Xcode and drag-and-drop all 5 files into the Catalog. Xcode will automatically configure them:

enter image description here

Upvotes: 2

Related Questions