【Android】Android Studioでの画面レイアウトの作り方~その1：デザインモードを覚えよう~

レイアウトの作り方を覚えていきましょう。まずレイアウトをするために使うAndroid Studioのツールの使い方を覚えましょう。

全体のレイアウト

まず、下記のレイアウトファイルを開きます。

すると下記のようなレイアウト構成の画面が表示されます。

各部位の解説

番号	名前	説明
1	Palette	ビュー(画面部品)のリストを表示します。
2	Component Tree	ビュー(画面部品)の階層構造を表示します。
3	Design/Text切り替え	「デザインモード」と「テキストモード」を切り替えます。（初期表示は、「デザインモード」）
4	ツールバー	プレビュー表示の見え方を変更できるツールです。
5	デザインエディタ	作成中の実際のレイアウトです。
6	Attributes	現在選択中のビュー(画面部品)の属性を表示します。

まず、ぱっと目に付くのが、下記の表示ではないでしょうか。

それぞれ、左側が「デザインビュー」、右側の青くなった画面が「ブループリントビュー」といいます。

項目	説明
デザインビュー	アプリの実行結果とほぼ同様の画面で表示されます。
ブループリントビュー	各画面の枠線や、細かい位置のみが表示されています。レイアウトのずれがないか気にする場合は、こちらを見ます。

画面部品のパーツになります。これをデザインエディタをドラッグ＆ドロップすることで、直感的に画面デザインを作ることができます。

アプリの画面部品の階層構造を見ることができます。

画面部品の種類については、下記の記事で解説していますので、ご覧下さい。

【Android】レイアウトファイル(res/layout/～.xml)の構成要素

次に、プレビューの見え方を変更することができる「ツールバー」についてみていきましょう。

それぞれ左から下記のようになっています。

ツール名	説明
デザイン/ブループリント	デザインエディタでデザインを表示する方法を選べます。（ブループリントビューだけにしたりもできます。）
画面の向き	画面表示を縦、横それぞれ変更することができます。
端末タイプ、サイズ	現状、「Nexus4」が表示されていますが、色々端末を変更できます。
APIのバージョン	APIレベルを選択できます。
アプリテーマ	「AppThema」と表示されている部分で、プレビューに表示するテーマを色々選択できます。
言語	もし、アプリを多言語対応していたらどの言語で表示するか選べます。