レイアウトの作り方を覚えていきましょう。まずレイアウトをするために使うAndroid Studioのツールの使い方を覚えましょう。
全体のレイアウト
まず、下記のレイアウトファイルを開きます。
すると下記のようなレイアウト構成の画面が表示されます。
各部位の解説
番号 | 名前 | 説明 |
---|---|---|
1 | Palette | ビュー(画面部品)のリストを表示します。 |
2 | Component Tree | ビュー(画面部品)の階層構造を表示します。 |
3 | Design/Text切り替え | 「デザインモード」と「テキストモード」を切り替えます。(初期表示は、「デザインモード」) |
4 | ツールバー | プレビュー表示の見え方を変更できるツールです。 |
5 | デザインエディタ | 作成中の実際のレイアウトです。 |
6 | Attributes | 現在選択中のビュー(画面部品)の属性を表示します。 |
デザインエディタについて
まず、ぱっと目に付くのが、下記の表示ではないでしょうか。
それぞれ、左側が「デザインビュー」、右側の青くなった画面が「ブループリントビュー」といいます。
項目 | 説明 |
---|---|
デザインビュー | アプリの実行結果とほぼ同様の画面で表示されます。 |
ブループリントビュー | 各画面の枠線や、細かい位置のみが表示されています。レイアウトのずれがないか気にする場合は、こちらを見ます。 |
Palette、Component Treeについて
Palette
画面部品のパーツになります。これをデザインエディタをドラッグ&ドロップすることで、直感的に画面デザインを作ることができます。
Component Tree
アプリの画面部品の階層構造を見ることができます。
画面部品の種類については、下記の記事で解説していますので、ご覧下さい。
ツールバーについて
次に、プレビューの見え方を変更することができる「ツールバー」についてみていきましょう。
それぞれ左から下記のようになっています。
ツール名 | 説明 |
---|---|
デザイン/ブループリント | デザインエディタでデザインを表示する方法を選べます。(ブループリントビューだけにしたりもできます。) |
画面の向き | 画面表示を縦、横それぞれ変更することができます。 |
端末タイプ、サイズ | 現状、「Nexus4」が表示されていますが、色々端末を変更できます。 |
APIのバージョン | APIレベルを選択できます。 |
アプリテーマ | 「AppThema」と表示されている部分で、プレビューに表示するテーマを色々選択できます。 |
言語 | もし、アプリを多言語対応していたらどの言語で表示するか選べます。 |
Attributeについて
例えば、「Hello World」と表示されている部分をクリックすると下記のようにAttributeが表示されます。現在は、「TextView」という画面部品が使われていて、その細かい属性等が表示されています。
デザイン、テキストモード切替について
上記で、左が「デザインモード」、右が「テキストモード」になります。
「テキストモード」を選択すると、直接レイアウトファイルのXMLをいじることができます。
この記事へのコメントはありません。