Layout Editor を用いた UI 作成

Layout Editor では、手動でレイアウト XML を記述する代わりに、UI 要素を視覚的なデザイン エディタにドラッグすることにより、レイアウトをすばやく作成することができます。 このデザイン エディタでは、さまざまな Android 端末やバージョンでレイアウトをプレビューできるため、レイアウトのサイズを動的に変更して、さまざまな画面サイズで適切なレイアウトを実現することが可能です。

Layout Editor は、ConstraintLayout という Android 2.3(API レベル 9)以降と互換性のあるサポート ライブラリで提供されるレイアウト マネージャーを使って、新しいレイアウトを作成する場合に非常に便利です。

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

Layout Editor の紹介

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

図 1 の数字に対応するエディタの領域は次のとおりです。

  1. Palette: レイアウトにドラッグできるビューおよびビュー グループのリストを表示します。
  2. Component Tree: レイアウトのビュー階層を示します。
  3. ツールバー: エディタでレイアウトの外観を設定したり、レイアウト属性を変更したりするためのボタンがあります。
  4. デザイン エディタ: デザイン ビューかブループリント ビュー、または両方のビューのレイアウトです。
  5. Attributes: 選択したビューの属性のコントロールを表示します。

図 1. Layout Editor

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

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

ヒント: Alt + Shift + 右矢印 / 左矢印(Mac の場合、Control + Shift + 右矢印 / 左矢印)を押して、デザイン エディタとテキスト エディタを切り替えることができます。

プレビュー表示の変更

デザイン エディタの上部にあるボタンを使用すると、エディタでレイアウトの外観を設定することができます。 このツールバーは、テキスト エディタの [Preview] ウィンドウにもあります。

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

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

  1. デザインとブループリント: エディタでレイアウトを表示する方法を選択します。[Design] ビュー(レイアウトの実際のプレビュー)または [Blueprint] ビュー(各ビューのアウトラインのみ)を選択したり、[Design] + [Blueprint] ビューを並べて表示したりできます。

    ヒント: B キーを押すと、これらのビューを切り替えることができます。

  2. 画面の向きとレイアウト バリアント: 横向きの画面か縦向きの画面、またはアプリでナイトモードなどの代替レイアウトが提供されるその他の画面モードを選択します。 このメニューには、新しいレイアウト バリアントを作成するためのコマンドも含まれています。
  3. 端末のタイプとサイズ: 端末タイプ(スマートフォン / タブレット、Android TV、または Wear OS)と画面設定(サイズと密度)を選択します。 事前設定されたいくつかの端末タイプや独自の AVD 定義から選択するか、リストから [Add Device Definition] を選択して新しい AVD を開始することができます。

    ヒント: レイアウトの右下の角をドラッグして、端末のサイズを変更することができます。

  4. API のバージョン: レイアウトをプレビューする Android バージョンを選択します。
  5. アプリのテーマ: プレビューに適用する UI テーマを選択します (これは、サポートされているレイアウト スタイルに対してのみ機能します。したがって、このリスト内の多くのテーマがエラーの原因になることがあります)。
  6. 言語: UI 文字列に表示する言語を選択します。 このリストには、文字列リソースで利用できる言語のみが表示されます。 翻訳を編集する場合は、プルダウン メニューから [Edit Translations] を選択します(Translations Editor で UI をローカライズするをご覧ください)。

: これらの設定は、([Layout Variants] から新しいレイアウト ファイルを追加しない限り)アプリのコードまたはマニフェストには影響を及ぼしません。影響があるのはレイアウト プレビューのみです。

新しいレイアウトの作成

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

[Project] ウィンドウのビューに応じて、新しいレイアウトを作成する別の方法がいくつかありますが、次の手順はどのビューでも実施できます。

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

新しいレイアウト ファイルの作成を開始する別の方法は次のとおりです(表示されるダイアログは異なります)。

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

レイアウト バリアントの作成

レイアウトを既に保持している状態で、代替バージョンを作成して、異なる画面密度や画面の向きに対してレイアウトを最適化する場合は、次の手順を実行します。

  1. 元のレイアウト ファイルを開き、デザイン エディタが表示されていることを確認します(ウィンドウの下部にある [Design] タブをクリックします)。
  2. ツールバーの [Orientation for Preview] をクリックします。 ドロップダウン リストで、[Create Landscape Variant] などの候補バリアントをクリックして完了するか、[Create Other] をクリックして、次のステップに進みます。
  3. 表示されたダイアログでは、ディレクトリ名のリソース修飾子を定義する必要があります。 [Directory name] にリソース修飾子を入力するか、[Available qualifiers] リストから 1 つずつリソース修飾子を選択して [Add] をクリックします。
  4. すべての修飾子を追加したら、[OK] をクリックします。

同じレイアウトに複数のバリエーションがある場合は、[Layout Variants] をクリックすると表示されるリストから、それらを簡単に切り替えることができます。

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

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

ビューを別の種類のビューに変換したり、レイアウト(ビューグループ)を別の種類のレイアウトに変換したりできます。

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

ConstraintLayout へのレイアウトの変換

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

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

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

  1. Android Studio で既存のレイアウトを開き、エディタ ウィンドウの下部にある [Design] タブをクリックします。
  2. [Component Tree] ウィンドウで、レイアウトを右クリックしてから、[Convert layout to ConstraintLayout] をクリックします。

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

ConstraintLayout を使ってレイアウトを作成する方法の詳細については、ConstraintLayout による応答性が高い UI の作成をご覧ください。

Palette での項目の検索

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

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

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

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

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

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

ビューおよびビューグループを [Palette] からデザイン エディタにドラッグするだけでレイアウトの作成を開始できます。 エディタでは、ビューをレイアウトに配置すると、レイアウトの残りの部分に対するビューの関係について情報が表示されます。

ConstraintLayout を使用している場合、Infer Constraints 機能や Autoconnect 機能を使用して、制約を自動的に作成することができます。

ビュー属性の編集

図 3. [Attributes] ウィンドウ

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

[Component Tree] または デザイン エディタでビューをクリックして選択すると、[Attributes] ウィンドウには、図 3 に示されているように、次の領域が表示されます。

  1. 幅 / 高さのスタイル、マージン、バイアス(ConstraintLayout のビューのみで利用可能)のコントロールを備えたビュー インスペクター。 詳細は、ConstraintLayout による応答性が高い UI の作成をご覧ください。
  2. 選択したビューの一般的な属性のリスト。 利用可能なすべての属性を表示するには、ウィンドウの上部にある [View all attributes] をクリックします。
  3. 選択したお気に入りの属性。 属性を追加するには、[View all attributes] をクリックしてから、属性名の左側にカーソルを合わせると表示される星印 をクリックします。

特定のビュー属性を検索するには、[View all attributes] をクリックしてから、ウィンドウの上部にある [Search] をクリックします。

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

多くの Android レイアウトはランタイム データに依存しているため、アプリのデザイン中にレイアウトの実際の表示を確認するのが困難な場合があります。 Android Studio 3.2 以降では、Layout Editor 内から、TextViewImageView、または RecyclerView にサンプル プレビュー データを追加することができるようになりました。

ビューにカーソルを合わせると、デザイン時属性ボタン が [Design] ウィンドウのビューの下に表示されます。 このボタンをクリックすると、図 4 のような [Design-time View Attributes] ウィンドウが表示されます。

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

TextView では、複数のサンプル テキスト カテゴリから選択することができます。 サンプル テキストを使用すると、Android Studio はあなたが選択したサンプルデータを TextViewtext 属性に入力します。 [Design-time View Attributes] ウィンドウでサンプル テキストを選択できるのは、text 属性が空の場合のみです。

図 5. サンプルデータ使用時の TextView

ImageView では、複数のサンプル イメージから選択することができます。 サンプル イメージを選択すると、Android Studio は ImageViewtools:src(Support Library を使用している場合は tools:srcCompat)属性にそれを入力します。

図 6. サンプルデータ使用時の ImageView

RecyclerView では、サンプルのイメージとテキストを含む一連のテンプレートから選択することができます。 テンプレートを使用すると、Android Studio は、res/layout ディレクトリに recycler_view_item.xml というファイルを追加します。これにはサンプルデータのレイアウトが含まれています。 さらに、Android Studio は RecyclerView にメタデータを追加し、サンプルデータが適切に表示されるようにします。

図 7. サンプルデータ使用時の RecyclerView

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

レイアウトで問題が検出されると、[Component Tree] にある対応するビューの横に感嘆符アイコン( または )が付けられます。 そのアイコンをクリックすると、エラーの詳細が表示されます。

エディタの下のウィンドウにすべての既知の問題を表示するには、ツールバーにある [Show Warnings and Errors] ( または )をクリックします。

このウィンドウで、[Show issues on the preview] を有効にして、プレビュー(ブループリント ビューではなく、デザイン ビューのみ)で対応する各ビューに警告アイコンまたはエラーアイコンを追加することもできます。

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

Android 8.0(API レベル 26)または Android Support Library 26.0.0 以降を使用している場合は、次の手順を実行して、多数のフォントを選択することができます。

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