Xcode 5 から登場した Asset Catalog が便利です。
すでに Asset Catalog に関する情報はいくつもありますが、これらの情報をまとめ、実際に開発時に自身で使ってみた感想を踏まえながら、メモしておきたいと思います。
Asset Catalog とは？
Asset Catalog 以前でもアイコンや起動画面等の画像は Xcode の General 設定から管理できましたが、画像ファイルがアイコンサイズやデバイス毎に増えていくため、画像数が膨大なアプリになってくると、管理が大変でした。
また、多くのアプリは git でバージョン管理を行い開発を進めていくことになりますが、チームでの開発では画像ファイルが増えてくるにつれ、画像の追加や削除、修正時にコンフリクトも頻繁に発生するようになり、開発は混沌としてきます。
Asset Catalog を使用すれば、一つの Asset Catalog ファイル（.xcassets）として、画像を一元管理出来るようになり、画像ファイルの追加・削除・修正を行ってもプロジェクトファイル（.pbxproj）は変更されないため、 git でのコンフリクトから開放され開発の効率がアップします。
登場から間もないため後方互換性やローカライズ等に問題点もありますが、これから開発を始めるのであれば Asset Catalog は必須となってくるのではないでしょうか。
Asset Catalog の使い方・インデックス
- Asset Catalog の作成
- アイコン画像の設定
- スプラッシュ画像（Launch Image）の設定
- アプリで使用する画像の設定
- 画像をスライスする
Asset Catalog の使い方・詳細
Asset Catalog の作成
-
Xcode ウインドウの一番左下の「+」ボタン より New file… を選択します。
-
Resource -> Asset Catalog を選択し Next をクリック。
-
Asset Catarog名（ここではimages）を入力し Create で作成完了。
以降はこの images.xcasset を使用して説明します。
アイコン画像の設定
-
Asset Catalog エディタ左下にある「+」ボタンより New App Icon を選択
-
Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。
Asset Catalog のメインウインドウで AppIcon を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。
-
あとは Target -> General タブの App Icons 項目から Asset Catalog で定義した AppIcon を選択すると、実行環境に合わせて自動的にアイコンが反映されます。
スプラッシュ画像（Launch Image）の設定
-
アイコンの例と同じく、Asset Catalog エディタ左下にある「+」ボタンより New Launch Image を選択します。
-
Asset Catalog のメインウインドウに表示された各項目に、準備した画像をドラッグすれば画像がセットされます。
Asset Catalog のメインウインドウで LaunchImage を選択すると、右カラムの Attributes Inspector からアセット名、対応デバイス、OSのバージョン等を変更することが出来ます。
-
Target -> General タブの App Icons 項目から Asset Catalog で定義した LaunchImage を選択すると、実行環境に合わせて自動的に起動画面が表示されます。
アプリで使用する画像の設定
-
Asset Catalog エディタ左下にある「+」ボタンより New Image Set を作成すれば、アプリ内で使用する画像を設定することができます。
ここでは Ladybird という画像を設定しました。
-
Asset Catalog で設定した画像は、Attributes Inspector の Image Set 項目の Name を使用すれば取得出来ます。以下のコードは UIImage に Asset Catalog の画像をセットした例です。
[code]
UIImage* image = [UIImage imageNamed:@”Ladybird”];
[/code] -
ビルドすれば画像が表示されます。
Asset Catalog は json により参照元の画像ファイル名と Image Set 項目の Name を管理しているため、画像名や拡張子を気にしなくて使用できるのでとても便利です。
画像をスライスする
Asset Catalog では、これまでコードで行っていたスライス編集が視覚的に行えます。
-
Asset Caltakig の メインウインドウ内右下の Show Slicing ボタンをクリックするとスライス範囲の編集モードに入ります。この例では Retina 用の画像のみを準備し編集を行います。
-
編集モードで Start Slicing をクリックします。
-
未編集の画像を選択した場合、3種類のアイコンが表示されます。左から横方向のスライス、縦横両方向のスライス、縦方向のスライスとなります。今回は縦横両方向を選択します。
-
以下のようにガイドを設定することで、グレーになっている部分がトリミングされます。このガイドの操作は、言葉で説明するよりも実際に触りながらの方が分かりやすいかと思います。
-
ビルドすればトリミングされていることが確認できます。
まとめ
Asset Catalog のスライス編集は、角丸のボタンやウインドウのフレームのストレッチ時のトリミング位置を指定することで、角丸のサイズを保ちつつ様々な大きさのオブジェクトに対応させることが可能です。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
