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

諏訪悠紀

2014.02.25

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

Asset Catalog

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

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

Xcode 5のAsset Catalogにまつわる今すぐ使えるTips集 from yuki0211s

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 プロパティではどのように伸縮するか設定することができます。