【Android】Android Studioでの画面レイアウトの作り方~その2：レイアウト部品の使い方~

下記の記事で、画面レイアウトを行うのに便利な「デザインモード」についてご紹介させて頂きました。

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

次は、基本となる「ビューグループ(レイアウト部品)」の使い方を覚えていきましょう。

事前準備

新規プロジェクトで、出てくる「Hello Worldアプリ」があることを前提に説明させていただきます。

まだ、新規プロジェクトを作成されていない方は、下記の記事を参考に「空のプロジェクト」を作成してください。

【Android】Android Studio 3.1で新規プロジェクトを作成する。

「空のプロジェクト」を作成したら「デザインモード」を開いて、「Component Tree」の中の「TextView」（Hello World！と表示されている部分）を消しておきます。

これで事前準備は完了です。

LinerLayout(horizontal)

まずは、「LinerLayOut(horizontal)です。このレイアウトを使うと、画面部品を横一列に並べて配置ができます。

現状、「Hello Worldアプリ」では、「ConstraintLayout」と表示されているので、「Convert view」をクリックします。

「LinearLayout」→「Apply」をクリックします。

「LinearLayout(horizontal)」と表示が変わりました。（デフォルトだと、Verticalではなく、horizontalとなるようです。）

後は、適当にButtnをドラック＆ドロップすると、下記のようにボタンが横に水平に並べることができます。

LinerLayout(Vertical)

LinerLayout(Vertical)は、画面部品を縦一列に並べて配置ができます。

一旦「Linearlayout(horizontal)」を選択して、「LinearLayout」→「Convert orientation to vertical」を選択します。

LinearLayut(vertical)になっていることを確認できます。

下記のように、縦にボタンレイアウトができています。

TableLayout

「TableLayout」は、表形式で画面部品を配置できます。

「TableLayout」は、直接はレイアウトとして置けませんので、「LinearLayout(vertical)」の上にドラッグ＆ドロップします。

Tablelayoutの中には、「TableRow」というレイアウト部品が出来ているので、その中に以下のように部品をドラッグ＆ドロップすると、表形式で部品を並べることができます。

FrameLayout

FrameLayoutは、画面部品を重ねて配置ができるレイアウトです。

下記の例では、「Button」と「text」を重ねて配置しています。

ConstraintLayout

「ConstraintLayout」は、画面部品を相対的に配置することができるレイアウトです。

下記のように、部品のマージンの数値をいじることで、相対的な位置に自由に配置をすることができます。（Hello Worldアプリのデフォルトもこのレイアウトでしたよね。）