Android Studioのレイアウトエディターでは、レイアウトXMLを手動で記述しなくても、ビジュアルデザインエディターにウィジットをドラッグアンドドロップすることで
素早くレイアウトを作成することができます。
エディターでは異なるAndroid端末とバージョンごとのレイアウトをプレビューすることができ、
動的にレイアウトのサイズを変更して異なる画面サイズでも正常に動作するか確認できます。
レイアウトエディターは、ConstraintLayout
を使って新しくレイアウトを作成する際に特に強力です。—
ConstraintLayout
とは、Android 2.3 (API level 9) 以上と互換性のあるサポートライブラリで実装されているレイアウトマネージャーです。
このページでは、レイアウトエディターの操作画面と機能の概要について説明します。
ConstraintLayout
を使ってレイアウトを作成する方法をより深く学ぶには、Build a Responsive UI with ConstraintLayoutを参照してください。
レイアウトエディターはXML レイアウトファイルを開いたときに表示されます。 図1の画像に記載された数字に応じて、エディターの各領域は以下のようになっています。:
XML レイアウトファイルを開くと、既定では デザイン エディターが開きます(図 1で示すように)。 デザイン エディターではなくテキストエディターでXMLを編集する場合は、 ウィンドウの下部にあるテキスト タブをクリックします。 テキスト エディターの場合でも、ウィンドウの右側にある Previewをクリックすることで パレットと コンポーネントツリーとデザインエディターを表示できます(図 2で示すように)。 しかし、 プロパティ ウィンドウはテキストエディターから使用できません。
ヒント: Control+Shift+右もしくは左矢印を押すことで、Designエディターと Text エディターを切り替えることができます。
図 2. Previewウィンドウを開いた状態の テキストエディター
デザイン エディターの上の行にあるボタンを使用して、 エディター内のレイアウトの外観を設定することができます。 このツールバーは、テキスト エディターの プレビュー ウィンドウでも使用できます。
図3の画像に記載された数字に応じて、使用できるボタンは以下のようになっています。:
ヒント:Bキーを押してこれらのビューを切り替えることができます。
ヒント: レイアウトの右下隅をドラッグして端末のサイズを変更することができます。
注意: これらの設定はあなたのアプリのコードやマニフェストには影響を与えません (Layout Variantsから新規レイアウトファイルを追加しない限りは); これらの設定のレイアウトのプレビューにのみ影響を与えます。
アプリに新規にレイアウトを追加する場合、レイアウトを全ての端末設定に適用するために、まずはプロジェクトの既定のlayout/
ディレクトリにレイアウトファイルを作成します。
既定のレイアウトが用意できたら、特定の端末設定向けの (xlarge 画面向けのような)様々なレイアウトを作成できます。
—これをやりたいのであれば レイアウトバリアントを作成するに進んでください。
Projectウィンドウのビューに応じてレイアウトを新規作成する方法がいくつかありますが、以下の手順はどのビューからでも行うことができます。:
新規レイアウトファイルを作成する方法は他に二つあり(表示されるダイアログは違いますが) 、以下の通りです。:
既にレイアウトが一つ用意でき、それに加えて異なる画面サイズや向きに最適化された切り替え版レイアウトを作成したい場合は、以下の手順に沿って作業をします:
同一レイアウトの複数のバリエーションが用意できたら、 Layout Variantsをクリックした時に表示され一覧からそれらを選んで簡単に切り替えることができます。
異なる画面に対応した複数のレイアウトを作成する方法の詳細についてはさまざまな画面サイズをサポートするを参照してください。
ConstraintLayout
はConstraint Layoutライブラリで使用可能なビューグループです。
このライブラリは Android Studio 2.2以上に実装されています。
これはレイアウトエディターと一緒にビルドされているので、デザインエディターから全てにアクセスすることができ、手動でXMLを編集する必要はありません。
何より、この constraintベースのシステムを使うことで、ビューグループをネストせずにほとんとのレイアウトを作成できます。
レイアウトのパフォーマンスを向上させるためには、古いレイアウトをConstraintLayout
に変換する必要があります。
Android Studio は、この変換作業を手助けするためのコンバーターを実装しています。:
ConstraintLayout
を使ったレイアウトの作成方法をより学ぶためには、Build a Responsive UI with ConstraintLayoutを参照してください。
アプリのレイアウトを作成するには
レイアウトの作成を開始するには、単にパレットパネルからビューをデザイン エディターへドラッグアンドドロップするだけです。 ビューをレイアウトに配置した時、エディターは配置したレイアウトのタイプに適したやり方で、ビューとレイアウトの残り部分との関係性を表示します。
例えば動画1では、 TextView
をConstraintLayout
にドラッグドロップした際に、上にあるTextView
との間にbelow縛りとaligned left 縛りがどのように作成されるかを示しています(これはAutoconnectが有効になっている場合です)。
ConstraintLayout
以外のレイアウトにビューをドラッグアンドドロップした場合は、
レイアウトエディターはそのレイアウトで使用できるプロパティに応じて異なる動作をします。
レイアウト内で検知されたエラーはツールバーでカウントされます。 エラーを見るにはShow Warnings and Errors をクリックしてください。
デザインエディター上で確認できるレイアウトの外観は、あくまでプレビューのためだけのものです。 デザイン エディターでレイアウトを編集すれば正確な外観を確認できますが、 エミュレーターや実際の端末上でアプリを実行して結果を検証するようにしましょう。
AndroidのビューAPIがレイアウトを作成する仕組みの詳細については、Layout Fundamentalsを参照してください。
また、ConstraintLayout
の使用方法についてはBuild a Responsive UI with ConstraintLayoutを参照してください。
XML上からビューのプロパティを編集する以外にも、Propertiesウィンドウ(レイアウトエディターの左側)から編集を行うこともできます。 このウィンドウは、デザイン エディタを開いている時のみ使用できるので、 ウィンドウ下部でデザインタブを選んでいることを確認してください。
ビューの一般的なプロパティーを参照・編集するには、エディター上でそのビューを選びます。 そのビューのより詳細なプロパティにアクセスする必要がある場合は、View all properties をクリックします。
選択したビューがConstraintLayout
の子要素だった場合、
図 7で示すように、プロパティウィンドウの上部にいくつかのコントロールが付いたビューインスペクターが表示されます。
ConstraintLayout
内にあるビューのプロパティコントロールの詳細についてはBuild a
Responsive UI with Constraint Layoutを参照してください。