Thursday, September 4, 2014

How to add an iOS Image Set to an Asset Catalog using Xamarin Studio

 

With the official launch of iOS 8 just around corner, I thought it was time to get up to speed on on Asset Catalogs, and with that, Image Sets.

Image Sets allow you to organize versions of your images in image sets, and then add these sets to an Asset Catalog.  This will allow you to create multiple versions of the same image and have iOS automatically load the create version at runtime depending on the device.

Traditionally this would be used for providing regular and retina assets, as well as adding different versions depending on the idiom (ie iPhone / iPad).  And Apple has made it clear this year at WWDC 2014 that this is going to be much more powerful when using Universal Story boards and storing different versions of the image based on traits (but that’s a whole other conversation).

So let’s see how we go about creating an Image Set in Xamarin Studio.  The first thing we need to do is create an Asset Catalog:

Right click on your project and select “Add” –> “New File” and then select “Asset Catalog”.

NewAssetCatalog

Give it a name and click the “New” button.

By default the asset catalog includes Image Sets for application icons and launch images.  And this is a great way to keep them organized, but if you’re adding your application assets manually you can delete these two sets.

Next, right click on the Asset Catalog and select “Add” –> “New Image Set”

AddImageSet

Now just click on the content.json file and drag files from finder to the appropriate location.   Currently you can set universal assets as well as adding device specific assets (iPhone / iPad) and I’d expect to see further support for traits when iOS 8 is officially released.

AddingAssets