AndroidStudioでレイアウトをデザイン(layout_constraint)

AndroidStudioでlayout_constraintを使ってレイアウトする

他の開発環境からAndroidStudioを初めて使った人にとってAndroid画面のレイアウトを作る面倒なことに驚く人が多いかと思います。

画面のレイアウト方法を理解しようとしても良いサイトや書籍が無いようなので、自己流ですがこうすればこうなりますよ、というのを説明していきます。

画面レイアウトの方法にはいくつかあって場面によって最適な方法を選ぶことになりますが、まずここではlayout_constraintというのを使ってレイアウトデザインを行います。

Buttonを2つ置いてレイアウトを作る

ボタンを2つおいて下さい。デザイン方法はコード、Split、デザインの3種類が用意されています。まずはデザインの画面にします。

Hello World!のサンプルのTextViewがある場合は削除してConstraintLayoutだけがある状態にして下さい。パレットからButtonを選んでデザイン画面かコンポーネントツリー画面へドラッグします。
これを2回繰り返してボタンを2つ配置します。
ボタンのidをそれぞれbtFrom、btTo という名称にします。idと同じものをtextにも入れてしまいましょう。警告が出ますがここはレイアウトのデザインを練習するだけなので無視します。

Splitの画面に切り替えてレイアウトの変更がXMLのコードにどのように反映されるのか見て見ましょう。
btToの方のボタンをクリックして選択した後ドラッグして場所を移動してみましょう。

tools:layout_editor_absoluteXとtools:layout_editor_absoluteYいう値が変化していることがわかります。デザイン画面での配置がtools:layout_editor_absoluteの X、Yに反映されるわけです。

デザイン通りに表示されない

ここでコードを実行してデザインした通りに表示されるか確認してみましょう。するとデザイン通りにならないどころかボタンが重なって表示されてしまっているかと思います。

AndroidStudioに限りませんが表示の時には設定した内容に従って表示されているため、レイアウト画面で配置してもそれが表示には反映されていないのです。筆者も含めてこの段階で挫折しそうなのですが、簡単に思い通り配置出来るようにしていきます。

レイアウトデザインの用語

4つほどですがレイアウトデザインの用語を覚えましょう。Height、WeightやX、Y以外に

○白丸の部分Start、End、Top、Bottomを覚えます。

ボタンを画面中央に配置する

まずはbtToのボタンを画面中央に配置しましょう。レイアウト画面はSplitで行います。
1.btToのTopの○をドラッグして画面上端中央付近にドロップします。
2.btToのBottomの○をドラッグして画面下端中央付近にドロップします。
これで上下方向の位置が中央になりギザギザの波線の矢印が表示されれば成功です。

layout.xml

 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintTop_toTopOf="parent"

コードにはこの2行が追加されました。
btToのボタンの上端の位置は親(parent)の上端に依存します。
btToのボタンの下端の位置は親(parent)の下端に依存します。
との指示をしたのでこのような表示になったようです。
同じように左右も設定してしまいます。

layout.xml

app:layout_constraintTop_toTopOf="parent" 
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

このようになれば成功です。画面中央に表示されます。実際に実行しても画面の中央に表示されます。

依存先の指定して配置する

今度はbtFromボタンの配置をデザインします。
まずはbtToボタンの右側に表示させてみます。

1.btFromのTopの○をドラッグしてbtToボタンのTopの○にドロップします。
2.btFromのStartの○をドラッグしてbtToボタンのEndの○にドロップします。

layout.xml

app:layout_constraintStart_toEndOf="@+id/btTo"
app:layout_constraintTop_toTopOf="@+id/btTo"

コードがこのようになれば成功です。
同様にbtToの上下左右、さらには右斜め上や左斜め下などにも配置されるように練習してみましょう。