[iOS] Asset Catalog にまつわる今すぐ使える Tips 集

Asset Catalog

Asset Calalog は Xcode 5 で新しく追加された、画像を一括管理できる機能です。 これまで Asset Catalog を使ったアプリ開発をいくつか行ってきましたが、ハマったところや、これは便利だな〜と思ったところがありました。ということで、Asset Catalog を使いこなすための Tips を少しですがまとめてみました。

ちなみに本稿は ヤフー vs クラスメソッド の2戦目で話たネタです。

Launch Image をソースコードから参照する

Launch Image とはアプリ起動時に表示される画像(スプラッシュ画像)のことです。Asset Catalog では Launch Image という特別な種類で定義されています。

この Launch Image ですが、UIImage として扱うために imageNamed: で取ってこようと思ったのですがそのままの名前では取ってこれませんでした。

これはコンパイル時に画像ファイル名が変更されているためでした。一度 Archive して ipa ファイルを開いてみると、次のようなファイル名になっていました。

ということで、このファイル名でアクセスすることで UIImage にすることができました。デバイスの種類などによってファイル名が変わってくるので、次のような感じになります。

NSString *launchImage;
if  (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
    if (([UIScreen mainScreen].bounds.size.height > 480.0f)) {
        // iPhone (3.5inch)
        launchImage = @"LaunchImage-700-568h";
    } else {
        // iPhone (4inch)
        launchImage = @"LaunchImage-700";
    }
} else if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    if (UIDeviceOrientationIsPortrait(orientation)) {
        // iPad (Portrait)
        launchImage = @"LaunchImage-700-Portrait";
    } else {
        // iPad (Landscape)
        launchImage = @"LaunchImage-700-Landscape";
    }
}
// 背景に設定
UIImage *image = [UIImage imageNamed:launchImage];
self.view.backgroundColor = [UIColor colorWithPatternImage:image];

私は UIViewController の背景にして起動画面のまま処理を行う目的で Launch Image を UIImage にしたかったので、回転しないようにしておく必要があります。というわけで、次のような処理も追加しました。supportedInterfaceOrientations: は UIViewController が対応する Orientation を返すメソッドです。このメソッドで現在の Orientation を返すことで、UIViewController が現在の Orientation のまま、自動で回転しなくなります。

- (NSUInteger)supportedInterfaceOrientations
{
    UIInterfaceOrientation orientation = [[UIApplication sharedApplication] statusBarOrientation];
    if (UIDeviceOrientationIsPortrait(orientation)) {
        return UIInterfaceOrientationMaskPortrait;
    } else {
        return UIInterfaceOrientationMaskLandscape;
    }
}

参考

• Xcode 5 & Asset Catalog: How to reference the LaunchImage? | stackoverflow

Asset Catalog で画像をスライスする

画像のスライスはこれまでソースコード上からしか行えませんでしたが、Asset Catalog では画像を編集するような感じでスライスの指定が行えるようになりました。画像を開くと次のように「Show Slicing」ボタンがあるので、クリックするとスライス範囲の編集を開始できます。

まだスライス範囲の編集を行ったことがない画像では、3つのボタンが表示されます。縦方向のスライスか、横方向のスライスか、両方のスライスか選びます。

次の画像は横方向のスライスを編集する画面です。3つの線と色が薄くなっている範囲があります。なんのこっちゃか分かりませんね。

なんのこっちゃかわからないので、図解してみました。

まず一番左の線は Left Slicing Handle と言います。この線から左側の範囲が伸縮せずに固定される範囲です。その隣の先は Inner Slicing Handle です。この線から Left Slicing Handle までの範囲が伸縮する範囲です。最後の一番右側の線は Right Slicing Handle です。この線より右側の範囲が固定される範囲です。色が薄くなっている範囲は使われない範囲です。この範囲は伸縮もされないし固定もされないので、描画されません。

横方向のスライスの設定方法を解説しましたが、縦方向のスライス設定も両方向のスライス設定も同じような感じで設定できます。

また Attributes inspector の Center プロパティではどのように伸縮するか設定することができます。

Stretches に設定すると引き伸ばされ、Tiles に設定するとパターンで繰り返されるようになります。

参考

• Specifying a Resizable Area of an Image | iOS Developer Library
• xcassetsでresizable imageのコードを駆逐する | Qiita

iOS 6 で非光沢のアイコンにする

iOS 6 までのアプリアイコンの光沢を外すには、Asset Catalog が登場するまでは Info.plist の Icon already includes gloss effects プロパティを YES にすることで行うことが出来ました。

Asset Catalog ではこのプロパティを使っていても非光沢アイコンにはなりません。Attributes inspector の iOS icon is pre-rendered を有効にする必要があります。

これで非光沢アイコンにすることができます。iOS 6 をサポートしているときは注意するようにしましょう。

参考

• Xcode5でビルドするとiOS6の端末でアイコンにグロス(光沢)が付いてしまう問題の解決策 | ふぃすたぶろぐ
• 【Xcode5】iOS6のアイコンの光沢をなくす方法 | メモ帳代わりのブログ
• iOS 7対応事例 FastCheckin | koogawa blog

まとめ

Asset Catalog は画像が管理しやすく大変便利な機能なので、ぜひ使いこなしましょう！