Layout Editor による UI の作成

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

Layout Editor は、Android 2.3（API レベル 9）以降と互換性のあるサポートライブラリに含まれる ConstraintLayout というレイアウトマネージャーを使ってレイアウトを新規作成する場合に特に便利です。

このページでは、Layout Editor の概要について説明します。レイアウトの基本については、レイアウトをご覧ください。ConstraintLayout を使ってレイアウトを作成する方法の詳細については、ConstraintLayout でレスポンシブ UI を作成するをご覧ください。

Layout Editor の概要

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

図 1 の数字に対応する Layout Editor の領域は次のとおりです。

Palette: レイアウトにドラッグできるビューおよびビューグループのリストです。
Component Tree: レイアウトのビュー階層です。
ツールバー: レイアウトの外観を設定したり、レイアウト属性を変更したりするためのボタンが並んでいます。
Design Editor: Design ビューか Blueprint ビュー、または両方のビューのレイアウトです。
Attributes: 選択したビューの属性のコントロールです。

図 1. Layout Editor

XML レイアウトファイルを開くと、図 1 のように、デフォルトで Design Editor が開きます。

Text Editor でレイアウト XML を編集する場合は、ウィンドウの下部にある [Text] タブをクリックします。Text Editor を開いているときは、ウィンドウの右側にある [Preview] をクリックすることで、[Palette]、[Component Tree]、Design Editor を表示できます。Text Editor では、[Attributes] ウィンドウを開くことはできません。

ヒント: Alt+Shift+左右矢印キー（Mac の場合、Control+Shift+左右矢印キー）を押して、Design Editor と Text Editor を切り替えられます。

プレビュー表示の変更

Design Editor の上部にあるボタンを使用して、レイアウトの外観を設定できます。このツールバーは、Text Editor の [Preview] ウィンドウにもあります。

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

図 2 の数字に対応するボタンは次のとおりです。

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

注: これらの設定は、（レイアウトバリエーションから新しいレイアウトファイルを追加しない限り）アプリのコードまたはマニフェストには影響を及ぼしません。影響があるのはレイアウトプレビューのみです。

新しいレイアウトの作成

アプリに新しいレイアウトを追加するときは、そのレイアウトがデバイスのすべての設定に適用されるように、まずプロジェクトのデフォルトの layout/ ディレクトリにレイアウトファイルを作成します。デフォルトのレイアウトを作成したら、特定のデバイス設定用（たとえば、xlarge（特大）画面用）に、そのレイアウトのバリエーションを作成できます。

[Project] ウィンドウのビューによっては、他にも新しいレイアウトを作成する方法がありますが、次の手順はビューによらず実行できます。

[Project] ウィンドウで、レイアウトを追加するモジュール（app など）をクリックします。
メインメニューで、[File] > [New] > [XML] > [Layout XML File] を選択します。
表示されたダイアログに、ファイル名、ルートレイアウトタグ、レイアウトが属するソースセットを入力します。その後、[Finish] をクリックします。

新しいレイアウトファイルの作成は、次の方法でも開始できます（表示されるダイアログは異なります）。

[Project] ウィンドウで [Project] ビューを選択している場合: アプリのモジュールの res ディレクトリを開き、レイアウトを追加するレイアウトディレクトリを右クリックして、[New] > [Layout resource file] を選択します。
[Project] ウィンドウで [Android] ビューを選択している場合: layout フォルダを右クリックして、[New] > [Layout resource file] を選択します。

レイアウトバリエーションの作成

既存のレイアウトを基に、異なる画面の密度や向きに最適化したバリエーションを作成するには、次の手順を実行します。

基になるレイアウトファイルを開き、Design Editor を表示します（ウィンドウ下部の [Design] タブをクリックします）。
ツールバーの画面の向きボタンをクリックします。プルダウンリストで、[Create Landscape Variation] などのバリエーション候補を選択して完了するか、[Create Other] をクリックして次のステップに進みます。
ダイアログが表示されたら、あとはディレクトリ名のリソース修飾子を定義するのみです。[Directory name] にリソース修飾子を入力するか、[Available qualifiers] リストから 1 つずつリソース修飾子を選択して追加アイコンをクリックします。
すべての修飾子を追加したら、[OK] をクリックします。

同じレイアウトに複数のバリエーションがある場合は、レイアウトバリエーション プルダウンリストから選択することで、簡単に切り替えることができます。

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

ビューまたはレイアウトの変換

ビューは別の種類のビューに、またレイアウト（ビューグループ）は別の種類のレイアウトに変換できます。

Layout Editor のウィンドウの下部にある [Design] タブをクリックします。
[Component Tree] で、ビューまたはレイアウトを右クリックして [Convert view] を選択します。
表示されたダイアログで、新しいタイプのビューまたはレイアウトを選択してから、[Apply] をクリックします。

ConstraintLayout へのレイアウトの変換

ConstraintLayout は、Android Studio 2.2 以降に含まれている Constraint Layout ライブラリで利用できるビューグループです。最初から Layout Editor とセットで構築されているため、Design Editor ですべての要素を編集でき、XML を手動で編集する必要はありません。特に、その制約ベースのレイアウトシステムにより、ネストされたビューグループなしでほとんどのレイアウトを作成できます。

レイアウトのパフォーマンスを向上させるには、古いレイアウトを ConstraintLayout に変換する必要があります。

既存のレイアウトを ConstraintLayout に変換するには、次の手順を実行します。

Android Studio で既存のレイアウトを開き、Layout Editor のウィンドウ下部にある [Design] タブをクリックします。
[Component Tree] ウィンドウで、対象のレイアウトを右クリックして [Convert layout to ConstraintLayout] を選択します。

このコマンドはレイアウトを ConstraintLayout に変換することに特化しているため、制約の推測やレイアウトの保持に関して、前のセクションで説明した単純な [Convert view] コマンドよりもインテリジェントです。

ConstraintLayout を使ってレイアウトを作成する方法の詳細については、ConstraintLayout でレスポンシブ UI を作成するをご覧ください。

Palette での項目の検索

[Palette] でビューまたはビューグループを名前で検索するには、[Palette] の上部にある検索ボタンをクリックするか、[Palette] ウィンドウがアクティブな状態で項目名の入力を開始します。

頻繁に使用する項目は、[Palette] の [Common] カテゴリで見つかります。このカテゴリに項目を追加するには、[Palette] でビューまたはビューグループを右クリックし、コンテキストメニューで [Favorite] を選択します。

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

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

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

レイアウトへのビューの追加

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

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

ビュー属性の編集

図 3. [Attributes] ウィンドウ

XML でビュー属性を編集する代わりに、Layout Editor の右側にある [Attributes] ウィンドウでビュー属性を編集できます。このウィンドウは Design Editor が開いているときにのみ使用できるため、ウィンドウ下部にある [Design] タブを選択する必要があります。

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

[Declared Attributes] セクション。レイアウトファイルで指定された属性がリストされます。属性を追加するには、セクションの右上にある追加アイコンをクリックします。
幅と高さのスタイルを制御するビューインスペクター。ConstraintLayout のビューの場合、このセクションには制約のバイアスも表示され、ビューで使用される制約もリストされます。詳しくは、ConstraintLayout でレスポンシブ UI を作成するをご覧ください。
選択したビューの基本的な属性のリスト。使用可能な属性をすべて表示するには、ウィンドウ下部にある [All Attributes] セクションを展開します。
検索ボタン。特定のビュー属性を検索するには、これをクリックします。
各属性値の右側にあるインジケータは、その値がリソース参照の場合は塗りつぶし状態に、それ以外の場合は枠線のみの状態になります。これにより、ハードコードされた値が一目でわかります。いずれの状態でも、このインジケータをクリックすると [Resources] ダイアログウィンドウが開き、対応する属性のリソース参照を選択できます。
エラーまたは警告のある属性はハイライト表示されます。エラーの場合は赤色、警告の場合はオレンジ色でハイライトされます。図に示したエラーの例では、レイアウト定義属性に無効な値が入力されています。また、図に示した警告の例では、リソース参照であるべき値がハードコードされています。

ビューへのサンプルデータの追加

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

上記ビュータイプのいずれかを右クリックして [Set Sample Data] を選択すると、図 4 に示す [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

レイアウトの警告とエラーの表示

レイアウトに問題が検出されると、[Component Tree] の該当するビューの横に感嘆符アイコン（または）が表示されます。エラーの詳細を表示するには、そのアイコンをクリックします。

ツールバーの警告とエラー表示ボタン（または）をクリックすると、Layout Editor の下のウィンドウに検出済みの問題がすべて表示されます。

このウィンドウで [Show issues on the preview] を有効にして、プレビュー（Design ビューのみで、Blueprint ビューでは不可）で該当するビューに警告アイコンまたはエラーアイコンを付加することもできます。

フォントのダウンロードとテキストへの適用

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

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