Resource Manager によるアプリの UI リソースの管理

Resource Manager は、アプリ内のリソースをインポート、作成、管理、使用するための新しいツール ウィンドウです。このツール ウィンドウを開くには、メニューバーから [View] > [Tool Windows] > [Resource Manager] を選択するか、左側のバーから [Resource Manager] を選択します。

図 1: Resource Manager

  1. 追加アイコン をクリックすることで、新しいリソースをプロジェクトに追加できます。プロジェクトへの画像アセット、ベクター アセット、リソースの追加や、リソースのインポートを行えます。
  2. モジュール プルダウン リストを使用して、モジュール固有のリソースを表示できます。
  3. 検索バーを使用して、選択したモジュール内のリソースを検索できます。
  4. Resource Manager では、アプリのドローアブル、色、レイアウトを管理できます。各リソースタイプの切り替えは、ここにあるタブで行います。
  5. フィルタボタンを使用して、外部ライブラリのリソースを表示できます。
  6. メイン コンテンツ エリアには、リソースのプレビューが表示されます。リソースを右クリックするとコンテキスト メニューが表示されます。このメニューから、リソースの名前の変更や、アプリ内でのリソース使用箇所の検索などが行えます。
  7. このボタンにより、リソースの表示形式(タイルまたはリスト)を選択できます。
  8. このボタンにより、リソースのプレビュー サイズを変更できます。

上記の機能に加え、Resource Manager には、複数のドローアブルをプロジェクトに簡単に一括インポートする方法も用意されています。画像ファイル(SVG ファイルを含む)を Resource Manager に直接ドラッグ&ドロップする、または [Import Drawables] ウィザードを使用することで、ドローアブルの一括インポートが可能です。詳細については、下記のプロジェクトへのリソースのインポート セクションをご覧ください。

リソースをダブルクリックすると、より詳細な情報が表示されます。リソースに複数のバージョンがある場合は、図 2 に示すように、すべてのバージョンが対応する修飾子とともに詳細ビューに表示されます。ここで特定のバージョンをダブルクリックすると、エディタ ウィンドウで開くことができます。

図 2: Resource Manager で画像リソースのさまざまな画面密度用のバージョンを表示したところ

プロジェクトへのドローアブルのインポート

画像リソースのインポートは、そのリソース ファイルまたはフォルダを Resource Manager に直接ドラッグ&ドロップすることで行えます。リソースを Resource Manager にドロップすると、[Import drawables] ダイアログが表示されます。このダイアログにより、インポートする前にリソースの概要を確認し、必要な修飾子を追加できます。

画像リソースをプロジェクトにインポートするには、次の手順を実行します。

  1. Android Studio の [Resource Manager] ウィンドウに画像を直接ドラッグ&ドロップします。または、図 3 に示すように、追加アイコン(+)をクリックして [Import Drawables] を選択し、インポート対象のファイルやフォルダを選択します。

    図 3: プルダウン メニューから [Import Drawables] を選択

  2. [Import drawables] ダイアログが表示されます。図 4 に示すように、このダイアログにはインポートするリソースの一覧が表示されています。同じリソースの複数のバージョンを用意する場合は、リソースがサポートする特定の設定を記述したデバイス設定修飾子を追加します。たとえば、さまざまな画面密度用に同じリソースの複数のバージョンを用意する場合は、各バージョンに [Density] 修飾子を追加します。同じ名前と修飾子を持つリソースが複数ある場合には、1 つのバージョンのみがインポートされます。リソース修飾子の詳細については、代替リソースを提供するをご覧ください。

    図 4: [Import Drawables] ダイアログ

  3. リソースをインポートする準備ができたら、[Import] ボタンをクリックします。

これで、図 5 に示すように、[Resource Manager] ウィンドウにリソースが表示され、プロジェクトで使用できるようになりました。

図 5: Resource Manager にインポートした画像が表示されたところ

ドローアブル密度の自動解析

ファイルまたはフォルダをインポートする際、そのパスに密度修飾子が含まれている場合は、インポートの一環としてその密度修飾子が自動的に適用されます。Resource Manager では、Android の密度修飾子と iOS のスケール ファクタの両方の解析が可能です。

次の表に、Android と iOS におけるさまざまなサポート対象密度の表記を示します。

密度 Android 密度修飾子 iOS スケール ファクタ
低密度(〜120 dpi) ldpi 未対応
中密度(〜160 dpi) mdpi 基になるスケール
高密度(〜240 dpi) hdpi 未対応
超高密度(〜320 dpi) xhdpi @2x
超超高密度(〜480 dpi) xxhdpi @3x
超超超高密度(〜640 dpi) xxxhdpi @4x

入力パスからリソースパスへのインポートによる変換の例を次に示します。

Android 密度修飾子: hdpi
入力パス: /UserFolder/icon1/hdpi/icon.png
リソースパス: <プロジェクト フォルダ>/<モジュール フォルダ>/src/main/res/drawable-hdpi/icon.png
Android 密度修飾子: xxhdpi
入力パス: /UserFolder/icon1/abc-xxhdpi/icon.png
リソースパス: <プロジェクト フォルダ>/<モジュール フォルダ>/src/main/res/drawable-xxhdpi/icon.png
iOS スケール ファクタ: @ 2x
入力パス: /UserFolder/icon1/icon@2x.png
リソースパス: <プロジェクト フォルダ>/<モジュール フォルダ>/src/main/res/drawable-xhdpi/icon.png
iOS スケール ファクタ: @ 2x
入力パス: /UserFolder/icon1/icon@2x_alternate.png
リソースパス: <プロジェクト フォルダ>/<モジュール フォルダ>/src/main/res/drawable-xhdpi/icon_alternate.png

各種ピクセル密度のデバイスのサポートについて詳しくは、各種のピクセル密度のサポートをご覧ください。

レイアウトへのドローアブルのドラッグ&ドロップ

ドローアブルを Resource Manager から直接レイアウトにドラッグ&ドロップできます。アニメーション 1 に示すように、リソースをレイアウトにドロップすると、Resource Manager によってそのドローアブルに対応する ImageView が作成されます。

アニメーション 1: Design ビュー内レイアウトへのドローアブルのドラッグ&ドロップ

アニメーション 2 に示すように、[Text] タブの XML ビューにドラッグ&ドロップすることもできます。

アニメーション 2: Text ビュー内レイアウトへのドローアブルのドラッグ&ドロップ

[Text] タブのレイアウトにドローアブルをドロップする場合、ドロップする場所によって生成されるコードは次のように異なります。

  • ドローアブルを空白の領域にドロップすると、Resource Manager によって対応する ImageView が生成されます。
  • ドローアブルを属性上にドロップすると、Resource Manager によってその属性値がドローアブルへの参照に置き換えられます。
  • ドローアブルを既存の ImageView 要素上にドロップすると、Resource Manager によって対応するソース属性が置き換えられます。