Layout Editor：概要、Android Studioとレイアウト作成

Layout Editorとは？

Layout Editorは、Android Studioに組み込まれたツールで、Androidアプリケーションのユーザーインターフェースを視覚的にデザインできます。res/layout/フォルダ内のXMLレイアウトファイルをダブルクリックすると開き、下部パネルでCode（コード）、Design（デザイン）、Split（分割）のタブを切り替えられます。開発者はパレットからキャンバスにコンポーネントをドラッグし、プロパティを設定して、変更をリアルタイムで確認できます。

このツールは2つの表示モードをサポートしています：Design（実際のウィジェット表示によるビジュアルキャンバス）とBlueprint（制約と境界線を示す模式図）。SplitモードではXMLコードとビジュアルキャンバスを同時に表示します。モードの切り替えはエディタの左上隅にあるボタンで行います。

Layout Editorは、ユーザーの操作（要素の追加、マージンの設定、制約の作成）ごとに自動的にXMLコードを生成します。これにより、開発者は多数のXML属性を覚える必要がなく、視覚的な結果に集中できます。生成されたコードはCodeタブでいつでも手動編集できます。

Layout Editorの主要ゾーン

Layout Editorのインターフェースは4つのゾーンに分かれています：Palette（コンポーネントパレット）、Component Tree（コンポーネントツリー）、Design Surface（デザインキャンバス）、Properties Panel（プロパティパネル）。Paletteには、Widgets、Text、Buttons、Containersなどのカテゴリ別にグループ化された、利用可能なすべてのAndroid SDKウィジェットが含まれています。Component Treeはレイアウトの階層をツリー形式で表示し、コンテナ間で要素をドラッグできます。

Design Surfaceはエディタの中央部分で、レイアウトが表示されます。キャンバス上で要素の選択、移動、サイズ変更、制約の作成が行えます。キャンバスの下部には、さまざまな画面でレイアウトをプレビューするためのデバイスと画面向きの切り替えスイッチがあります。Layout EditorはNexus、Pixel、Samsungなどのさまざまな仮想デバイスでのプレビューに対応しています。

Properties Panelは選択した要素の属性（layout_width、layout_height、マージン、パディング、グラビティ、TextViewのtextSizeなど）を表示します。Properties Panelでの変更は即座にキャンバスに反映され、対応するXMLコードが生成されます。

エディタの左上隅にはコントロールボタンがあります：表示モードの選択、制約の自動接続（Autoconnect）の有効化、制約の線表示、仮想デバイスの切り替えなどです。「Device for Preview」ボタンでは、スマートフォン、タブレット、Android TVのモデルを選択してレスポンシブ対応を確認できます。

ConstraintLayout：柔軟な配置

ConstraintLayoutは、Googleがすべての新しいAndroidプロジェクトに推奨する主要なレイアウトです。ネストされたLinearLayoutとは異なり、ConstraintLayoutは各要素が親、他の要素、またはガイドラインに接続されたフラットな階層を作成します。これによりネストの深さが減り、レンダリングパフォーマンスが向上します。

ConstraintLayoutの各要素にはサイド制約があります：app:layout_constraintStart_toStartOf、app:layout_constraintEnd_toEndOf、app:layout_constraintTop_toTopOf、app:layout_constraintBottom_toBottomOf。制約は親（parent）または他の要素のIDに接続できます。基本的なXMLテンプレートは次のようになります：

この例では、TextViewが親の四辺すべてに対して中央に配置されています。サイズ0dp（match_constraint）は、幅が左の制約から右の制約まで伸びることを意味します。このアプローチにより、固定サイズなしでアダプティブなレイアウトを作成できます。

ConstraintLayoutはBias（要素の中心オフセット）もサポートしています。属性layout_constraintHorizontal_biasとlayout_constraintVertical_biasは0から1の値を取り、0.5が中央、0が始端寄せ、1が終端寄せを意味します。Biasを使うと、2つの制約間で要素を正確に配置できます。

追加のConstraintLayout機能：Guidelines（パーセントまたはdp単位のガイドライン）、Barriers（複数の要素をグループ化するバリア）、Chains（スペース配分を行う要素のチェーン）。これらの要素はすべて、Layout Editorのキャンバス上のコンテキストメニューから直接作成できます。

LinearLayout：線形配置

LinearLayoutは、子要素を水平（android:orientation="horizontal"）または垂直（android:orientation="vertical"）に順次配置するコンテナです。最も理解しやすいレイアウトですが、複雑なレイアウトではネストされた階層を作成し、パフォーマンスが低下する可能性があります。

LinearLayoutの主要な属性はweight（android:layout_weight）です。指定された値に応じて、要素間の空きスペースを比例配分できます。2つのボタンにweight="1"を設定すると、両方が同じ幅を取ります。weight="2"の要素はweight="1"の要素の2倍のスペースを取得します。LinearLayoutを使用したXMLの例：

この例では、EditTextがlayout_weight="1"を取得し、labelNameとbtnSubmitの間の空きスペースをすべて占有します。layout_width="0dp"はEditTextの幅が完全にweightによって決定されることを示します。weightがないと固定幅を設定する必要があり、異なる画面に適応できません。

LinearLayoutの重要な機能：android:gravityはコンテナ内のコンテンツの配置を制御し、android:layout_gravityは親内のコンテナ自体の配置を制御します。LinearLayoutをネストしたLinearLayoutは深いネストの一般的な原因であるため、Googleはそのような構造をConstraintLayoutに置き換えることを推奨しています。

XMLコード：内部から見たレイアウト構造

すべてのAndroidレイアウトはres/layout/フォルダ内のXMLファイルです。Layout Editorはこのファイルを自動生成しますが、手動最適化のためにはその構造を理解する必要があります。ルート要素がコンテナの種類（ConstraintLayout、LinearLayout、FrameLayout）を定義し、その中に子ウィジェットが配置されます。

ConstraintLayoutを使用した基本的なXMLテンプレートには、xmlns:androidとxmlns:appの名前空間宣言が含まれます。app名前空間は、layout_constraintStart_toStartOfなどのConstraintLayoutライブラリの属性に使用されます。各要素には、他の要素やActivity/Fragmentコードから参照するためのandroid:idを付与することを推奨します。

複数の要素と制約を含むレイアウト断片の例：

このレイアウトでは、ImageViewが親の上部に接続され、水平方向に中央揃えされています。TextViewはImageViewの下端（Top_toBottomOf）に接続されています。ButtonはTextViewの下に配置されています。この制約チェーンにより、ネストされたLinearLayoutなしで順次構造を作成できます。

Layout Editorでは、Design / Code / Splitタブを使用してビジュアル表示とテキスト表示を切り替えられます。Splitモードでは、XMLの変更が即座にキャンバスに反映され、その逆も同様です。これはキャンバス上にビジュアルコントロールがない属性の微調整に特に便利です。

コンポーネントパレットとProperties Panel

PaletteはLayout Editorの左パネルで、TextView、Button、ImageView、EditText、ProgressBar、RecyclerViewなどの利用可能なすべてのUIコンポーネントを含んでいます。コンポーネントはWidgets、Text、Buttons、Containers、Transitions、Advancedのカテゴリ別にグループ化されています。キャンバスにコンポーネントを追加するには、パレットからDesign Surfaceにドラッグするだけです。

Properties Panel（右パネル）は選択した要素のすべての属性を表示します。パネルはId（ID）、Layout（サイズとマージン）、Transform（回転とスケール）、Text（TextViewの内容）、Padding and Margin（パディングとマージン）のセクションに分かれています。各属性には、wrap_content、match_parent、match_constraint（0dp）などのオプションを持つドロップダウンメニューがあります。

Properties Panelの特徴は、グラフィカル表示によるビジュアルマージンエディタ（パディングとマージン）です。対応する矢印の横の数字をクリックすると、スライダーを使ってマージンを変更できます。Layout Editorはマージンを自動的に正規化します：4つのマージンがすべて同じ場合は属性android:layout_marginを使用し、異なる場合は個別のandroid:layout_marginStart、android:layout_marginTopなどを使用します。

Properties Panelでの制約属性の編集には、専用のConstraintsセクションがあります。ここには要素のすべてのバインディング（各エッジが親または他の要素のどの側に接続されているか）が表示されます。バインディングタイプの変更、制約の追加や削除が可能です。Blueprintモードでキャンバス上の対応する線をクリックして制約を削除することもできます。

アダプティブレイアウトの作成

アダプティブレイアウトとは、コンパクトな電話（320dp）から大型タブレット（600dp+）や折りたたみデバイスまで、異なる画面サイズで正しく表示されるレイアウトです。Layout Editorには、アダプティブインターフェースの確認と作成のためのいくつかのツールが用意されています。

1つ目のツールはツールバーのDevice for Previewです。ドロップダウンリストにはPixel 6、Pixel 9、Samsung Galaxy S25、Nexus 7、Nexus 9、Pixel Cなどの人気デバイスが含まれています。任意の画面サイズとピクセル密度（dpi）のカスタムデバイスを追加することもできます。デバイスの切り替えは1秒で完了し、各画面でのレイアウト表示を確認できます。

2つ目のツールは、代替レイアウトを作成するためのサイズ修飾子です。Layout Editorでは、異なる画面サイズ、向き、密度ごとに同じXMLファイルの複数バージョンを作成できます。例えば、電話用のactivity_main.xmlとタブレット用のactivity_main-sw600dp.xmlなどです。Layout Editorはアクティブな修飾子に応じて自動的にプレビューを表示します。

3つ目のアプローチは、パーセントGuidelinesを使用したConstraintLayoutです。属性app:layout_constraintGuide_percentを持つガイドラインを使うと、要素をパーセント位置にバインドできます。例えば、50%のガイドラインはデバイスサイズに関係なく画面を半分に分割します。これはXMLファイルを複製せずにアダプティブレイアウトを作成する最も柔軟な方法です。

Layout Editorはレスポンシブ対応の問題について警告も表示します：固定幅の要素、大きすぎる画像、最適でないネスト構造に黄色い三角マークが付きます。開発者は警告をクリックして修正の推奨事項を確認できます。

XMLレイアウトの最適化

レイアウトの最適化は、レンダリング速度とアプリケーションの滑らかさに直接影響します。Layout Editorは、内蔵のLayout InspectorとProblemsパネルの警告を通じて問題を検出するのに役立ちます。主な最適化ルール：ネストの最小化、ネストされたLinearLayoutの代わりにConstraintLayoutの使用、適切なサイズ属性の選択。

ネストの深さはパフォーマンスの最大の敵です。ネストされたコンテナごとに計測と描画の時間が増加します。Android StudioのHierarchy Viewツールはレイアウトツリーを表示します。深さが5〜6レベルを超える場合は、レイアウトを再構築する必要があります。ConstraintLayoutは3〜4レベルのネストを1つのフラットなコンテナに置き換えることでこの問題を解決します。

Layout EditorでのXMLレイアウト最適化の推奨事項：

• ネストされたLinearLayoutの代わりにルートコンテナとしてConstraintLayoutを使用 — 階層の深さを減らしレンダリングを高速化
• 大量のリストがあるLinearLayoutではlayout_weightを避ける — weightは2パス計測（two-pass layout）を必要とする
• Layout Editorのコンテキストメニュー「Clear Constraints of Selection」で未使用の制約を削除
• まれに表示するブロックにはViewStubを使用 — ViewStubは表示時までインフレートを延期
• 再利用可能なコンポーネントにはMerge — mergeタグはincludeによる包含時に余分なコンテナを排除
• 画像サイズを削減し、アイコンにはPNGではなくVectorDrawableを使用

Layout Inspectorは、アプリケーション実行中にレイアウトをプロファイリングするAndroid Studioのツールです。実際の階層、各コンポーネントの計測時間と描画時間を表示します。Layout EditorはLayout Inspectorと統合されており、警告をダブルクリックすると詳細レポートで該当する問題が開きます。