サイトのトップへ戻る

Android Studio ドキュメント 日本語訳

サイト内検索

レイアウトエディターで UI を作成する

Android Studioのレイアウトエディターでは、レイアウトXMLを手動で記述しなくても、ビジュアルデザインエディターにウィジットをドラッグアンドドロップすることで 素早くレイアウトを作成することができます。 エディターでは異なるAndroid端末とバージョンごとのレイアウトをプレビューすることができ、 動的にレイアウトのサイズを変更して異なる画面サイズでも正常に動作するか確認できます。 レイアウトエディターは、ConstraintLayoutを使って新しくレイアウトを作成する際に特に強力です。— ConstraintLayoutとは、Android 2.3 (API level 9) 以上と互換性のあるサポートライブラリで実装されているレイアウトマネージャーです。

このページでは、レイアウトエディターの操作画面と機能の概要について説明します。 ConstraintLayoutを使ってレイアウトを作成する方法をより深く学ぶには、Build a Responsive UI with ConstraintLayoutを参照してください。



エディターの紹介

レイアウトエディターはXML レイアウトファイルを開いたときに表示されます。 図1の画像に記載された数字に応じて、エディターの各領域は以下のようになっています。:

  1. パレット: エディター内のレイアウトにドラッグアンドドロップできるウィジットとレイアウトの一覧を表示します。
  2. コンポーネント ツリー: レイアウトの階層ビューを表示します。項目をクリックすると、それがエディター内に表示されます。
  3. ツールバー:エディター内のレイアウトの外観の設定、レイアウトのプロパティの編集するためのボタンがあります。
  4. デザインエディタ: デザインビューと青写真ビューの二つの形式でレイアウトを表示します。
  5. プロパティ:現在選択しているビューを制御するプロパティを編集できます。

図 1.デザイン エディターを表示しているレイアウトエディター

XML レイアウトファイルを開くと、既定では デザイン エディターが開きます(図 1で示すように)。 デザイン エディターではなくテキストエディターでXMLを編集する場合は、 ウィンドウの下部にあるテキスト タブをクリックします。 テキスト エディターの場合でも、ウィンドウの右側にある Previewをクリックすることで パレットコンポーネントツリーデザインエディターを表示できます(図 2で示すように)。 しかし、 プロパティ ウィンドウはテキストエディターから使用できません。

ヒント: Control+Shift+右もしくは左矢印を押すことで、Designエディターと Text エディターを切り替えることができます。

図 2. Previewウィンドウを開いた状態の テキストエディター



プレビューの外観を変更する

デザイン エディターの上の行にあるボタンを使用して、 エディター内のレイアウトの外観を設定することができます。 このツールバーは、テキスト エディターの プレビュー ウィンドウでも使用できます。

図 3. レイアウトエディターのツールバーにある、レイアウトの外観を設定するボタン

図3の画像に記載された数字に応じて、使用できるボタンは以下のようになっています。:

  1. デザインと青写真: エディター上でレイアウトをどのように表示したいか選びます。この デザイン ビューではレイアウトのカラープレビューが表示され、 この青写真 ビューでは各ビューのアウトラインのみ表示されます。 もしくは、 デザイン + 青写真を両方並べて表示することもできます。

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

  2. 画面の向き: 端末を縦向きや横向きに回転させます。
  3. 端末のタイプとサイズ: 端末のタイプ(携帯/タブレットや Android TVやAndroid Wear) と画面設定(サイズと密度)を選びます。 あらかじめ設定された端末タイプやあなた独自の AVD 定義から選ぶことができます。 もしくは、一覧からAdd Device Definitionを選んで新しいAVDを作成することもできます。

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

  4. API バージョン: レイアウトをプレビューするための Android バージョンを選びます。
  5. App テーマ: プレビューに適用する UI テーマを選びます。 注意: これはサポートしているレイアウトでのみ動作します; 従ってこの一覧にある多くのテーマを使うとエラーとなるでしょう。
  6. 言語: UI の文字列に表示する言語を選びます。これには、 stringリソースで使用可能な言語のみが一覧表示されます。 翻訳を編集したい場合は、ドロップダウンメニューの Edit Translationsをクリックしてください(詳細については 翻訳エディターでUIをローカライズするを参照してください)。
  7. Layout Variants:このファイルの代替レイアウトの一つに切り替えるか、代替レイアウトを新規に作成します (後述のレイアウトバリアントを作成するを参照してください)。

注意: これらの設定はあなたのアプリのコードやマニフェストには影響を与えません (Layout Variantsから新規レイアウトファイルを追加しない限りは); これらの設定のレイアウトのプレビューにのみ影響を与えます。



レイアウトを新規に作成する

アプリに新規にレイアウトを追加する場合、レイアウトを全ての端末設定に適用するために、まずはプロジェクトの既定のlayout/ ディレクトリにレイアウトファイルを作成します。 既定のレイアウトが用意できたら、特定の端末設定向けの (xlarge 画面向けのような)様々なレイアウトを作成できます。 —これをやりたいのであれば レイアウトバリアントを作成するに進んでください。

Projectウィンドウのビューに応じてレイアウトを新規作成する方法がいくつかありますが、以下の手順はどのビューからでも行うことができます。:

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

図 4. 新たなレイアウト XML ファイルを追加するダイアログ

新規レイアウトファイルを作成する方法は他に二つあり(表示されるダイアログは違いますが) 、以下の通りです。:

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


レイアウトバリアントを作成する

既にレイアウトが一つ用意でき、それに加えて異なる画面サイズや向きに最適化された切り替え版レイアウトを作成したい場合は、以下の手順に沿って作業をします:

  1. 元のレイアウトファイルを開き、 デザインエディターが表示されていることを確認します(ウィンドウ下部にあるデザイン タブをクリックします)。
  2. ツールバーのLayout Variantsをクリックします。 表示されたドロップダウンリストで、Create Landscape Variantのような推奨されたバリアントをクリックして完了するか、Create Other をクリックして次の手順に進みます。
  3. 表示されたダイアログで、ディレクトリ名のリソース修飾子を定義するだけです。 修飾子をDirectory nameの項目に入力するか、Available qualifiers の一覧から一度に一つずつえらんで Add をクリックします。
  4. 修飾子を全て追加したら、OKをクリックします。

同一レイアウトの複数のバリエーションが用意できたら、 Layout Variantsをクリックした時に表示され一覧からそれらを選んで簡単に切り替えることができます。

異なる画面に対応した複数のレイアウトを作成する方法の詳細についてはさまざまな画面サイズをサポートするを参照してください。



レイアウトを ConstraintLayoutに変換する

ConstraintLayout はConstraint Layoutライブラリで使用可能なビューグループです。 このライブラリは Android Studio 2.2以上に実装されています。 これはレイアウトエディターと一緒にビルドされているので、デザインエディターから全てにアクセスすることができ、手動でXMLを編集する必要はありません。 何より、この constraintベースのシステムを使うことで、ビューグループをネストせずにほとんとのレイアウトを作成できます。

レイアウトのパフォーマンスを向上させるためには、古いレイアウトをConstraintLayoutに変換する必要があります。 Android Studio は、この変換作業を手助けするためのコンバーターを実装しています。:

  1. Android Studioで既存のレイアウトを開き、エディターウィンドウの下部にある デザイン タブをクリックします。
  2. コンポーネントツリー ウィンドウで、レイアウトを右クリックしてConvert layout to ConstraintLayoutをクリックします。

ConstraintLayoutを使ったレイアウトの作成方法をより学ぶためには、Build a Responsive UI with ConstraintLayoutを参照してください。



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

アプリのレイアウトを作成するにはレイアウトの基礎を理解する必要がありますが、 Android StudioのおかけでXMLファイルを直接編集する煩わしさから解放されます。 レイアウトエディターでは、ウィジットをDesign エディターにドラッグアンドドロップしたり、プロパティ ウィンドウからレイアウトの属性を変更したりすることで、多くの作業を簡略化してくれます。

レイアウトの作成を開始するには、単にパレットパネルからビューをデザイン エディターへドラッグアンドドロップするだけです。 ビューをレイアウトに配置した時、エディターは配置したレイアウトのタイプに適したやり方で、ビューとレイアウトの残り部分との関係性を表示します。

例えば動画1では、 TextViewConstraintLayoutにドラッグドロップした際に、上にあるTextViewとの間にbelow縛りとaligned left 縛りがどのように作成されるかを示しています(これはAutoconnectが有効になっている場合です)。

動画 1. ビューをエディター内にドラッグドロップした時、レイアウトエディターはそのビューの縛りを追加します

ConstraintLayout以外のレイアウトにビューをドラッグアンドドロップした場合は、 レイアウトエディターはそのレイアウトで使用できるプロパティに応じて異なる動作をします。

レイアウト内で検知されたエラーはツールバーでカウントされます。 エラーを見るにはShow Warnings and Errors をクリックしてください。

デザインエディター上で確認できるレイアウトの外観は、あくまでプレビューのためだけのものですデザイン エディターでレイアウトを編集すれば正確な外観を確認できますが、 エミュレーターや実際の端末上でアプリを実行して結果を検証するようにしましょう。

AndroidのビューAPIがレイアウトを作成する仕組みの詳細については、Layout Fundamentalsを参照してください。 また、ConstraintLayoutの使用方法についてはBuild a Responsive UI with ConstraintLayoutを参照してください。



ビューのプロパティを編集する

図 5. The プロパティ ウィンドウ

XML上からビューのプロパティを編集する以外にも、Propertiesウィンドウ(レイアウトエディターの左側)から編集を行うこともできます。 このウィンドウは、デザイン エディタを開いている時のみ使用できるので、 ウィンドウ下部でデザインタブを選んでいることを確認してください。

ビューの一般的なプロパティーを参照・編集するには、エディター上でそのビューを選びます。 そのビューのより詳細なプロパティにアクセスする必要がある場合は、View all properties をクリックします。

選択したビューがConstraintLayoutの子要素だった場合、 図 7で示すように、プロパティウィンドウの上部にいくつかのコントロールが付いたビューインスペクターが表示されます。 ConstraintLayout内にあるビューのプロパティコントロールの詳細についてはBuild a Responsive UI with Constraint Layoutを参照してください。