Xcode5からの新機能「Images.xcassets」の使い方について

Xcode5から画像リソースが管理しやすくなる機能「.xcassets」が追加されました。今回はこの機能の使い方について書きます。

今までとこれから

Xcode4.6 までは画像リソースの管理方法は画像ファイルに対し、iPhone向けなら「hoge.png」、iPhone Retina向けなら「hoge@2x.png」、iPad向けなら「hoge~iPad.png」、iPad Retina向けなら「hoge@2x~iPad.png」としてフォルダ管理していました。
Xcode5 からは既存管理方法も取れますが、新たに「.xcassets」で管理する方法が追加されています。

☆管理方法

管理ファイルの追加

Xcode上から「New File > iOS(Resource) > Asset Catalog」から追加出来ます。ファイル名は何でも良いです。
上記以外の方法で、「project > Targets > General > App Icons (or Launch Images)」にある「Source」項目に「Use Asset Catalog」ボタンがありますので、これをクリックする事で App Icons と Launch Images を管理するための「Images.xcassets」ファイルが自動的に生成されます。

管理ファイルにオブジェクト追加

「.xcassets」を開いてみると左にメニュー、右に詳細が表示されます。左メニュー上でOption Menu表示(or 左下の[+]押下)からオブジェクトの追加が可能です。
上記以外の方法で、フォルダや画像ファイルをドラッグ＆ドロップする事で追加する事も可能です。

フォルダ追加

Option Menu上から「New Folder」を選択する事で、「.xcassets」内にフォルダが追加されます。もし「Images.xcassets」ファイル上で画像リソースを管理する場合はルートディレクトリに1つフォルダを作ると管理し易くなります(一覧は自動ソートなのでAppIconとLaunchImageと混ざる場合がある為)。

画像ファイル追加

Option Menu上から「New Image Set」で追加出来ます。「Universal」枠の中に「1x」と「2x」があるので、非RetinaリソースとRetinaリソースを追加してください。
なお、「Universal 1x」に追加した画像はiPhone/iPadの非Retinaで表示され、「Universal 2x」に追加した画像はiPhone/iPadのRetinaで表示されます。

画像ファイル種類の細分化

前述した「Universal」という非Retina/Retinaの分け方ではなく、iPhone / iPhone Retina / iPad / iPad Retina の分け方にも出来ます。
Option Menuを表示すると「Devices」項目があり、その下に「Universal 」「iPhone」「Retina 4-inch」「iPad」が並んでいます。「Universal 」のチェックを外し、「iPhone」「iPad」にチェックを入れることで従来通りのリソース管理が可能です。また、「Retina 4-inch」にチェックを入れる事で、4-inch向けの画像も分けて扱えるようにもなります。