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

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

Clock Icon2014.02.25

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Asset Catalog

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

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

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

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

asset_catalog_tips01

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

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

asset_catalog_tips02

ということで、このファイル名でアクセスすることで 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;
    }
}

参考

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

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

asset_catalog_tips03

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

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

asset_catalog_tips04

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

asset_catalog_tips05

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

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

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

asset_catalog_tips06

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

asset_catalog_tips07

参考

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

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

asset_catalog_tips08

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

asset_catalog_tips09

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

asset_catalog_tips10

参考

まとめ

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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.