Layout Editor を使用して UI を作成する

Layout Editor では、手動でレイアウト XML を記述する代わりに、UI 要素を視覚的に編集できる Design Editor にドラッグすることにより、レイアウトをすばやく作成できます。この Design Editor では、さまざまな Android デバイスやバージョンに応じたレイアウトをプレビューできるため、各種の画面サイズで適切に動作するよう、レイアウトのサイズを動的に変更できます。

Layout Editor は、Android 2.3（API レベル 9）以上と互換性があるレイアウト マネージャーである ConstraintLayout を使用してレイアウトを作成する場合に特に便利です。

このページでは、Layout Editor の概要について説明します。レイアウトの基本については、レイアウトをご覧ください。

Layout Editor の概要

Layout Editor は、XML レイアウト ファイルを開くと表示されます。

Layout Editor

図 1: Layout Editor

  1. Palette: レイアウトにドラッグできるビューおよびビューグループが格納されています。
  2. Component Tree: レイアウト内のコンポーネントの階層を表示します。
  3. Toolbar: エディタ内のレイアウトの表示方法を設定するためのボタンや、レイアウト属性を変更するためのボタンが並んでいます。
  4. Design Editor: [Design] ビューまたは [Blueprint] ビュー、あるいは両方のビューでレイアウトを編集できます。
  5. Attributes: 選択したビューの属性を指定します。
  6. View mode: [Code] モード [Code] モードアイコン、[Design] モード [Design] モードアイコン、[Split] モード [Split] モードアイコン のいずれかで、レイアウトを表示します。[Split] モードの場合、[Code] ウィンドウと [Design] ウィンドウが同時に表示されます。
  7. Zoom / Pan Control: エディタ内のプレビューのサイズと位置をコントロールします。

XML レイアウト ファイルを開くと、図 1 のように、デフォルトで Design Editor が開きます。Text Editor でレイアウト XML を編集するには、ウィンドウの右上隅にある [Code] ボタン [Code] モードアイコン をクリックします。なお、[Code] ビューでレイアウトを編集している間は、[Palette] ウィンドウ、[Component Tree] ウィンドウ、[Attributes] ウィンドウは使用できません。

ヒント: Alt + Shift + Right/Left arrow（Mac の場合は Control + Shift + Right/Left arrow）を押すと、Design Editor と Text Editor を切り替えることができます。

プレビューの表示方法を変更する

Design Editor の上部にあるボタンを使用して、エディタ内のレイアウトの表示方法を設定できます。

図 2. レイアウトの外観を設定するための Layout Editor ツールバーのボタン

図 2 の各番号のボタンの意味は次のとおりです。

  1. Design と Blueprint: エディタ内でレイアウトを表示する方法を選択します。[Design] を選択すると、レイアウトのレンダリング プレビューを表示できます。[Blueprint] を選択すると、各ビューのアウトラインだけを表示できます。[Design + Blueprint] を選択すると、両方のビューを並べて表示できます。B を押すと、各ビュータイプを順番に切り替えることができます。
  2. 画面の向きとレイアウト バリエーション: 画面の向き（横向きまたは縦向き）と、アプリが提供する各種レイアウト（夜間モードなど）用の画面モードを選択します。このメニューには、新しいレイアウト バリエーションを作成するためのコマンドも含まれています。O を押すと、画面の向きを変更できます。
  3. デバイスタイプとサイズ: デバイスタイプ（スマートフォン、タブレット、Android TV、Wear OS）と画面構成（サイズと密度）を選択します。事前設定済みのデバイスタイプと独自の AVD 定義から選択できます。また、リストから [Add Device Definition] を選択して新しい AVD を追加することもできます。レイアウトの右下隅をドラッグすると、デバイスのサイズを変更できます。D を押すと、デバイスリストの中で順番に切り替えることができます。
  4. API バージョン: レイアウトをプレビューする Android バージョンを選択します。
  5. アプリのテーマ: プレビューに適用する UI テーマを選択します。選択したテーマは、サポートされているレイアウト スタイルでのみ機能します。そのため、このリストの多くのテーマはエラーになります。
  6. 言語: UI 文字列の言語を選択します。このリストには、文字列リソースで利用できる言語だけが表示されます。翻訳を編集する場合は、プルダウン メニューから [Edit Translations] を選択します。翻訳操作の詳細については、Translations Editor を使用して UI をローカライズするをご覧ください。

新しいレイアウトの作成

アプリ用に新しいレイアウトを追加する場合、まず、プロジェクトのデフォルト layout/ ディレクトリ内にデフォルト レイアウト ファイルを作成します。このデフォルト レイアウトは、すべてのデバイス構成に適用されます。デフォルト レイアウトを作成すると、大画面用などの個々のデバイス構成に合わせてレイアウト バリエーションを作成できます。

新しいレイアウトの作成は、以下のいずれかの方法で行います。

Android Studio のメインメニューを使用する

  1. [Project] ウィンドウで、レイアウトを追加するモジュールをクリックします。
  2. メインメニューで、[File] > [New] > [XML] > [Layout XML File] を選択します。
  3. 表示されるダイアログで、ファイル名、ルート レイアウト タグ、レイアウトが属するソースセットを指定します。
  4. [Finish] をクリックすると、レイアウトが作成されます。

[Project] ビューを使用する

  1. [Project] ウィンドウで、[Project] ビューを選択します。
  2. レイアウトを追加するレイアウト ディレクトリを右クリックします。
  3. 表示されるコンテキスト メニューで、[New] > [Layout Resource File] をクリックします。

[Android] ビューを使用する

  1. [Project] ウィンドウで、[Android] ビューを選択します。
  2. layout フォルダを右クリックします。
  3. 表示されるコンテキスト メニューで、[New] > [Layout Resource File] を選択します。

Resource Manager を使用する

  1. Resource Manager で、[Layout] タブを選択します。
  2. [+] ボタンをクリックして、[Layout Resource File] をクリックします。

レイアウト バリエーションを使用してさまざまな画面に合わせて最適化する

レイアウト バリエーションとは、特定の画面サイズまたは向きに合わせて既存のレイアウトを最適化したバージョンです。

推奨レイアウト バリエーションを使用する

Android Studio には一般的なレイアウト バリエーションがあらかじめ用意されており、個々のプロジェクトで使用できます。推奨レイアウト バリエーションを使用する手順は次のとおりです。

  1. 元のレイアウト ファイルを開いて、ウィンドウの右上隅にある [Design] モードアイコン [Design] モードアイコン をクリックします。
  2. ツールバーの [Orientation for Preview] ボタン [Orientation for Preview] ボタン をクリックします。
  3. プルダウン リストで、[Create Landscape Variant] などの推奨バリエーションを選択します。

独自のレイアウト バリエーションを作成する

独自のレイアウト バリエーションを作成する手順は次のとおりです。

  1. 元のレイアウト ファイルを開いて、ウィンドウの右上隅にある [Design] モードアイコン [Design] モードアイコン をクリックします。
  2. ツールバーの [Orientation for Preview] ボタン [Orientation for Preview] ボタン をクリックします。
  3. プルダウン リストで、[Create Other...] を選択します。
  4. 表示されるダイアログで、バリエーションのリソース限定子を定義します。[Available qualifiers] リストから限定子を選択して、[Add] ボタン [Add Qualifier] ボタン をクリックします。必要に応じて、この手順を繰り返して別の限定子を追加します。
  5. すべての限定子を追加したら、[OK] をクリックします。

1 つのレイアウトに対して複数のバリエーションがある場合は、[Layout Variants] [Layout Variants] ボタン をクリックし、表示されるリストから選択することで、バリエーションを切り替えることができます。

さまざまな画面用のレイアウトを作成する方法については、各種の画面サイズをサポートするをご覧ください。

ビューやレイアウトを変換する

既存のビューを別の種類のビューに変換したり、既存のレイアウトを別の種類のレイアウトに変換したりすることができます。

  1. エディタ ウィンドウの右上隅にある [Design] ボタンをクリックします。
  2. [Component Tree] で、ビューまたはレイアウトを右クリックして、[Convert view...] をクリックします。
  3. 表示されるダイアログで、新しいタイプのビューまたはレイアウトを選択して、[Apply] をクリックします。

ConstraintLayout へのレイアウトの変換

レイアウトのパフォーマンスを高めるには、旧式のレイアウトを ConstraintLayout に変換する必要があります。ConstraintLayout では、制約に基づくレイアウト システムを使用して、ネストされたビューグループなしでさまざまなレイアウトを作成できます。

既存のレイアウトを ConstraintLayout に変換する手順は次のとおりです。

  1. Android Studio で既存のレイアウトを開いて、エディタ ウィンドウの右上隅にある [Design] ボタンをクリックします。
  2. [Component Tree] で、対象のレイアウトを右クリックして、[Convert your-layout-type to ConstraintLayout] をクリックします。

ConstraintLayout の詳細については、ConstraintLayout を使用してレスポンシブ UI を作成するをご覧ください。

Palette 内でアイテムを検索する

[Palette] 内でビューまたはビューグループを名前に基づいて検索するには、[Palette] の上部にある [Search] ボタン [Palette Search] ボタン をクリックします。あるいは、[Palette] ウィンドウにフォーカスがあれば、いつでもアイテムの名前を入力できます。

頻繁に使用するアイテムは、[Palette] の [Common] カテゴリで見つけることができます。このカテゴリにアイテムを追加するには、[Palette] 内で、ビューまたはビューグループを右クリックし、コンテキスト メニューから [Favorite] をクリックします。

Palette からドキュメントを開く

ビューまたはビューグループに関する Android デベロッパー リファレンス ドキュメントを開くには、[Palette] で UI 要素を選択して、Shift + F1 を押します。

ビューまたはビューグループのマテリアル ガイドライン ドキュメントを表示するには、[Palette] で UI 要素を右クリックして、コンテキスト メニューから [Material Guidelines] を選択します。そのアイテムのエントリがない場合は、マテリアル ガイドライン ドキュメントのホームページが開きます。

レイアウトにビューを追加する

ビューとビューグループを [Palette] から Design Editor にドラッグするだけで、レイアウトの作成を開始できます。ビューをレイアウトに配置すると、ビューとその他のレイアウトとの関係を示す情報が Design Editor に表示されます。

ConstraintLayout を使用している場合、制約推測機能と自動接続機能により自動的に制約を作成できます。

ビュー属性を編集する

図 3. [Attributes] ウィンドウ

Layout Editor の右側にある [Attributes] ウィンドウで、ビュー属性を編集できます。このウィンドウを使用できるのは、Design Editor が開いているときに限られます。そのため、[Design] モードまたは [Split] モードを使用してレイアウトを表示する必要があります。

ビューを選択（[Component Tree] または Design Editor でビューをクリック）すると、図 3 に示すように、[Attributes] ウィンドウに以下の内容が表示されます。

  1. [Declared Attributes] セクション - レイアウト ファイル内で指定されている属性のリストが表示されます。属性を追加するには、セクションの右上にある [Add] ボタン [Add Attribute] ボタン をクリックします。
  2. [Layout] セクション - ビューの幅と高さを指定するコントロールが表示されます。ConstraintLayout のビューの場合、このセクションには制約のバイアスも表示され、ビューで使用されている制約がリスト表示されます。ConstraintLayout の操作の詳細については ConstraintLayout を使用してレスポンシブ UI を作成するをご覧ください。
  3. [Common Attributes] セクション - 選択したビューの一般的な属性がリスト表示されます。利用可能な属性をすべて表示するには、ウィンドウの下部にある [All Attributes] セクションを展開します。
  4. [Search] ボタン - クリックすると、特定のビュー属性を検索できます。
  5. 各属性値の右側にあるアイコンは、その属性値がリソース参照であるかどうかを示します。このインジケーターは、値がリソース参照の場合は塗りつぶし状態 塗りつぶしインジケーター アイコン になり、値がハードコードされている場合は枠線だけの状態 枠線インジケーター アイコン になります。このインジケーターにより、ハードコードされている値を一目で把握できます。インジケーターがいずれの状態であっても、クリックすると [Resources] ダイアログ ウィンドウが開き、対応する属性のリソース参照を選択できます。

  6. 属性値の周囲が赤色でハイライト表示されている場合は、値にエラーがあることを示します。図 3 の赤色でハイライト表示されているエラーの場合、レイアウト定義属性に無効な値が入力されています。

    オレンジ色でハイライト表示されている場合は、値に警告があることを示します。たとえば、リソース参照の値が期待される属性にハードコードされた値が使用されていると、警告が表示されます。

ビューにサンプルデータを追加する

Android のレイアウトの多くはランタイム データに依存するため、アプリの設計段階で実際の見た目や操作感を確認するのが困難な場合があります。Android Studio 3.2 以降では、Layout Editor から TextView、ImageView、RecyclerView にプレビュー用サンプルデータを追加できます。

ビュータイプのいずれかを右クリックして [Set Sample Data] を選択すると、図 4 に示すように、[Design-time View Attributes] ウィンドウが表示されます。

[Design-time View Attributes] ウィンドウ

図 4: [Design-time View Attributes] ウィンドウ

TextView では、さまざまなサンプル テキスト カテゴリを選択できます。サンプル テキストを使用する場合、TextView の text 属性には選択したサンプルデータが入力されます。なお、[Design-time View Attributes] ウィンドウでサンプル テキストを選択できるのは、text 属性が空の場合に限られます。

サンプルデータが入力されたテキストビュー

図 5: サンプルデータを入れた TextView

ImageView では、さまざまなサンプル画像を選択できます。サンプル画像を選択すると、ImageView の tools:src 属性（サポート ライブラリを使用している場合は tools:srcCompat 属性）にデータが入力されます。

サンプルデータが入力された画像ビュー

図 6: サンプルデータが入力された ImageView

RecyclerView では、サンプル画像とサンプル テキストを含むテンプレートのセットを選択できます。このテンプレートを使用すると、res/layout ディレクトリに recycler_view_item.xml というファイルが追加されます。このファイルには、サンプルデータのレイアウトが含まれています。また、サンプルデータを適切に表示するため、RecyclerView にメタデータが追加されます。

サンプルデータが入力されたリサイクラー ビュー

図 7: サンプルデータを入れた RecyclerView

レイアウト内の警告やエラーを表示する

レイアウトに問題があると、Layout Editor は [Component Tree] 内の該当ビューの横に通知アイコンを表示します。通知には、エラーの場合は赤色の丸型感嘆符アイコン レイアウト エラーを示す赤色の丸型感嘆符アイコン が使用され、警告の場合はオレンジ色の三角形型感嘆符アイコン レイアウト警告を示すオレンジ色の三角形型感嘆符アイコン が使用されます。アイコンをクリックすると、詳細が表示されます。

ツールバーの [Show Warnings and Errors] ボタン（レイアウト エラーを示す赤色の丸型感嘆符アイコン または レイアウト警告を示すオレンジ色の三角形型感嘆符アイコン）をクリックすると、エディタの下部にあるウィンドウに、検出済みの問題がすべて表示されます。

フォントをダウンロードしてテキストに適用する

Android 8.0（API レベル 26）以上または Android サポート ライブラリ 26.0.0 以上を使用している場合は、次の手順に沿って、数百種類のフォントを選択できます。

  1. Layout Editor で、[Design] ボタン [Design] モードアイコン をクリックして、Design Editor 内にレイアウトを表示します。
  2. テキストビューをクリックします。
  3. [Attributes] ウィンドウで、[textAppearance] を展開して、[fontFamily] ボックスを展開します。
  4. リストの一番下までスクロールして、[More Fonts] をクリックし、[Resources] ダイアログを開きます。
  5. [Resources] ダイアログで、リストをブラウジングするか上部にある検索バーに入力して、フォントを選択します。[Downloadable] に表示されているフォントを選択する場合は、[Create downloadable font] をクリックすると、ダウンロード可能フォントとしてランタイムにフォントを読み込むことができます。あるいは、[Add font to project] をクリックすると、TTF フォント ファイルとして APK 内にパッケージ化できます。[Android] の下にリスト表示されているフォントは、Android システムによってあらかじめ用意されているフォントです。そのため、ダウンロードしたり、APK 内にバンドルしたりする必要はありません。
  6. [OK] をクリックして終了します。