Android StudioAndroid Studio の Layout Editor では、手動でレイアウト XML を記述する代わりに、ウィジェットを視覚的なデザイン エディタにドラッグすることにより、レイアウトをすばやく作成することができます。このエディタでは、さまざまな Android 端末やバージョンでレイアウトをプレビューできるため、レイアウトのサイズを動的に変更して、さまざまな画面サイズで適切なレイアウトを実現することが可能です。Layout Editor は、ConstraintLayout という Android 2.3（API レベル 9）以降と互換性のあるサポート ライブラリで提供されるレイアウト マネージャーを使って、新しいレイアウトを作成する場合に非常に便利です。
このページでは、Layout Editor のインターフェースと機能の概要について説明しています。ConstraintLayout を使ってレイアウトを作成する方法の詳細については、ConstraintLayout による応答性が高い UI の作成をご覧ください。
Editor の紹介
Layout Editor は、XML レイアウト ファイルを開くと表示されます。図 1 の数字に対応するエディタの領域は次のとおりです。
- Palette: エディタのレイアウトにドラッグできるウィジェットとレイアウトのリストを表示します。
- Component Tree: レイアウトのビュー階層を示します。ここでアイテムをクリックすると、選択されたアイテムがエディタに表示されます。
- ツールバー: エディタでレイアウトの外観を設定したり、レイアウトのプロパティを編集したりするためのボタンがあります。
- デザイン エディタ: デザイン ビューとブループリント ビューの組み合わせでレイアウトを表示します。
- Properties: 現在選択されているビューのプロパティ コントロールを表示します。
図 1. デザイン エディタが表示された Layout Editor
XML レイアウト ファイルを開くと、図 1 のように、デフォルトでデザイン エディタが開きます。テキスト エディタで XML を編集する場合は、ウィンドウの下部にある [Text] タブをクリックします。テキスト エディタを開いた状態で、ウィンドウの右側にある [Preview] 
をクリックすると、図 2 のように [Palette]、[Component Tree]、およびデザイン エディタを表示することもできます。ただし、テキスト エディタでは、[Properties] ウィンドウを開くことはできません。
ヒント: Control+Shift+右矢印 / 左矢印を押すと、デザイン エディタとテキスト エディタを切り替えることができます。
図 2. [Preview] ウィンドウが表示されたテキスト エディタ
プレビュー表示の変更
デザイン エディタの上部にあるボタンを使用すると、エディタでレイアウトの外観を設定することができます。このツールバーは、テキスト エディタの [Preview] ウィンドウでも利用できます。
図 3. Layout Editor のツールバーにあるボタンでレイアウトの外観を設定
図 3 の数字に対応するボタンは次のとおりです。
- デザインとブループリント: エディタでレイアウトを表示する方法を選択します。[Design]
ビューではレイアウトのカラー プレビューが表示され、[Blueprint] 
ビューでは各ビューのアウトラインのみが表示されます。[Design] + [Blueprint] 
ビューを並べて表示することもできます。 ヒント: B キーを押すと、これらのビューを切り替えることができます。
- 画面の向き: 端末を横向きにしたり、縦向きにしたりします。
- 端末のタイプとサイズ: 端末タイプ（スマートフォン / タブレット、Android TV、または Android Wear）と画面設定（サイズと密度）を選択します。事前設定されたいくつかの端末タイプや独自の AVD 定義から選択するか、リストから [Add Device Definition] を選択して新しい AVD を開始することができます。
ヒント: レイアウトの右下の角をドラッグして、端末のサイズを変更することができます。
- API のバージョン: レイアウトをプレビューする Android バージョンを選択します。
- アプリのテーマ: プレビューに適用する UI テーマを選択します。注: これは、サポートされているレイアウト スタイルに対してのみ機能します。したがって、このリスト内の多くのテーマがエラーの原因になることがあります。
- 言語: UI 文字列に表示する言語を選択します。このリストには、文字列リソースで利用できる言語のみが表示されます。翻訳を編集する場合は、プルダウン メニューから [Edit Translations] を選択します（Translations Editor で UI をローカライズするをご覧ください）。
- レイアウト バリアント: このファイルの代替レイアウトのいずれかに切り替えるか、新しいレイアウトを作成します（以下のレイアウト バリアントの作成をご覧ください）。
注: これらの設定は、（[Layout Variants] から新しいレイアウト ファイルを追加しない限り）アプリのコードまたはマニフェストには影響を及ぼしません。影響があるのはレイアウト プレビューのみです。
新しいレイアウトの作成
アプリの新しいレイアウトを追加するときは、そのレイアウトが端末のすべての設定に適用されるように、まずプロジェクトのデフォルトの layout/ ディレクトリにレイアウト ファイルを作成します。デフォルトのレイアウトを作成したら、特定の端末設定用に（たとえば、xlarge（特大）画面用に）そのレイアウトのバリエーションを作成することができます。レイアウトのバリエーションを作成する場合は、レイアウト バリアントの作成に進んでください。
[Project] ウィンドウのビューに応じて、新しいレイアウトを作成する別の方法がいくつかありますが、次の手順はどのビューでも実施できます。
- [Project] ウィンドウで、レイアウトを追加するモジュール（[app] など）をクリックします。
- メインメニューで、[File] > [New] > [XML] > [Layout XML File] を選択します。
- 表示されたダイアログに、ファイル名、ルート レイアウト タグ、レイアウトが属するソースセットを入力します。[Finish] をクリックします。
図 4. 新しいレイアウト XML ファイルを追加するダイアログ
新しいレイアウト ファイルの作成を開始する別の方法は次のとおりです（表示されるダイアログは異なります）。
- [Project ] ウィンドウで [Project] ビューを選択している場合: アプリのモジュールの res ディレクトリを開き、レイアウトを追加するレイアウト ディレクトリを右クリックしてから、[New] > [Layout resource file] を選択します。
- [Project] ウィンドウで [Android] ビューを選択している場合: [layout] フォルダを右クリックしてから、[New] > [Layout resource file] を選択します。
レイアウト バリアントの作成
レイアウトを既に保持している状態で、代替バージョンを作成して、異なる画面密度や画面の向きに対してレイアウトを最適化する場合は、次の手順を実行します。
- 元のレイアウト ファイルを開き、デザイン エディタが表示されていることを確認します（ウィンドウの下部にある [Design] タブをクリックします）。
- ツールバーの [Layout Variants]
をクリックします。ドロップダウン リストで、[Create Landscape Variant] などの候補バリアントをクリックして完了するか、[Create Other] をクリックして、次のステップに進みます。 - 表示されたダイアログでは、ディレクトリ名のリソース修飾子を定義する必要があります。[Directory name] にリソース修飾子を入力するか、[Available qualifiers] リストから 1 つずつリソース修飾子を選択して [Add]
をクリックします。 - すべての修飾子を追加したら、[OK] をクリックします。
同じレイアウトに複数のバリエーションがある場合は、[Layout Variants] をクリックして、表示されたリストからこれらのバリエーションを簡単に切り替えることができます。
さまざまな画面用のレイアウトを作成する方法の詳細については、さまざまな画面サイズをサポートするをご覧ください。
ConstraintLayout へのレイアウトの変換
ConstraintLayout は、Android Studio 2.2 以降に含まれている Constraint Layout ライブラリで利用できるビュー グループです。ConstraintLayout は Layout Editor とともに一から構築されているため、デザイン エディタからすべての要素にアクセスすることができ、XML を手動で編集する必要はありません。特に ConstraintLayout の制約ベースのレイアウト システムでは、ビュー グループをネストすることなく、ほとんどのレイアウトを作成することが可能です。
レイアウトのパフォーマンスを向上させるには、古いレイアウトを ConstraintLayout に変換する必要があります。Android Studio は、この変換を支援する組み込みのコンバーターを備えています。
- Android Studio で既存のレイアウトを開き、エディタ ウィンドウの下部にある [Design] タブをクリックします。
- [Component Tree] ウィンドウで、レイアウトを右クリックしてから、[Convert layout to ConstraintLayout] をクリックします。
ConstraintLayout を使ってレイアウトを作成する方法の詳細については、ConstraintLayout による応答性が高い UI の作成をご覧ください。
レイアウトへのビューの追加
アプリのレイアウトを作成するには、レイアウトの基本を理解している必要がありますが、Android Studio では、XML ファイルを複雑な方法で直接編集する必要はありません。Layout Editor では、ウィジェットをデザイン エディタにドラッグして、[Properties] 
ウィンドウでレイアウト属性を調整することにより、多くの作業を簡単に行うことができます。
ビューを [Palette] ペインからデザイン エディタにドラッグするだけでレイアウトの作成を開始できます。ビューをレイアウトに配置すると、そのレイアウトのタイプに応じた方法で、レイアウトの残りの要素とビューの関係がエディタに表示されます。
たとえば、動画 1 は、TextView を ConstraintLayout にドラッグしたときに、上部の TextView との間隔と左揃えの制約がどのように作成されるかを示しています（ここでは、Autoconnect が有効になっています）。
動画 1. ビューをエディタにドラッグすると、Layout Editor はビューの制約を追加できる
ConstraintLayout 以外のレイアウトにビューをドラッグすると、そのレイアウトで利用できるレイアウト プロパティに応じて、Layout Editor は異なる操作を実行します。
レイアウトで検出されたエラーは、ツールバーでカウントされます。エラーを表示するには、[Show Warnings and Errors] 
をクリックします。
デザイン エディタでのレイアウトの外観は、あくまでもプレビュー用として活用してください。デザイン エディタでレイアウトを編集すると、かなり正確な外観が得られますが、アプリをエミュレータまたは実機で実行して、実際の見た目を確認する必要があります。
レイアウトを作成するための Android View API の仕組みに関する詳細は、レイアウトの基本をご覧ください。ConstraintLayout の使用方法については、ConstraintLayout による応答性が高い UI の作成をご覧ください。
ビューのプロパティの編集
図 5. [Properties] ウィンドウ
XML でビューのプロパティを編集する代わりに、Layout Editor の左側にある [Properties] ウィンドウでプロパティを編集することができます。このウィンドウはデザイン エディタが開いているときにのみ利用できるため、ウィンドウの下部にある [Design] タブが選択されている必要があります。
エディタでビューを選択し、そのビューの一般的なプロパティを表示して編集します。ビューのその他のプロパティにアクセスする必要がある場合は、[View all properties] 
をクリックします。
選択したビューが ConstraintLayout の子である場合、図 7 に示すように、[Properties] ウィンドウの上部には、いくつかのコントロールを備えたビュー インスペクターが表示されます。ConstraintLayout のビューのプロパティ コントロールに関する詳細については、ConstraintLayout による応答性が高い UI の作成をご覧ください。