#47 AndroidでToDoアプリを作る - ConstraintLayout

2020 / 11 / 3

前回、レイアウトXMLで真ん中付近に配置したボタンがなぜか左上に表示されるというのを確認しました。今回は、部品の正しいレイアウト方法を紹介します。

ConstraintLayout

ConstraintLayoutとは、子ビューを制約にもとづいて配置するレイアウト(ビュー)です。Android SDKにはRelativeLayoutという、子ビューを相対的に配置するレイアウトがありますが、

Android SDKに含まれているため、OSバージョンによる違いが発生する
一部表現力が足りない

といった問題がありました。ConstraintLayoutはライブラリとして提供されているので、ライブラリをアップデートすることで、OSバージョンによらず、最新の機能を使うことができます。

並べ方の基本

ConstraintLayoutでは、

各ビューの位置が定まる
各ビューのサイズが定まる

ように制約をつけていく必要があります。例えば「垂直方向では位置が定まるが、水平方向では制約がないのでどこに配置すればわからない」といった状態の場合、ConstraintLayoutは警告を表示します(エラーではありません)。前回配置したボタンには制約を一切つけなかったので、警告が表示され、実行時に左上に表示されていました。

辺を揃える

まずは辺を揃える制約の追加方法です。ボタンの上の辺を画面の上の辺に揃えるには、レイアウトエディタでボタンを選び、上の辺の○を画面の上の辺にドラッグします。

レイアウトXMLで指定する場合は、app:layout_constraintTop_toTopOfを使います。上の辺を揃える対象となるビューのIDか、parentを値として指定します。

垂直方向で位置が定まったので、次は水平方向の制約を追加します。ボタンの左側の辺にある○を、画面の左端にドラッグして制約を追加します。

マージンを設定する

ConstraintLayoutでは、辺と辺を揃えたあと、間隔(マージン)を設定することができます。ボタンの上部のマージンを設定するには、AttributesのLayoutセクションで、中央四角の上に数値を入力します。ここで指定した値はdp単位で設定されます。

レイアウトXMLで指定する場合は、android:layout_marginTopを使います。

サイズを指定する

次にビューのサイズを指定します。ビューのサイズは次の3パターンで指定します。

数値で指定する
コンテンツに合わせる
制約をもとに引っ張る

数値で指定する

アバター画像など、数値で指定するにはAttributesのLayoutセクションで、layout_widthやlayout_heightにdp単位をつけて指定します。

コンテンツに合わせる

テキストや画像など、ビューの中に表示するコンテンツの大きさにあわせたサイズにしたい場合はwrap_contentを指定します。レイアウトエディタでボタンなどを配置した際のデフォルト値になっています。

制約をもとに引っ張る

例えば「左の辺を画面の左端に合わせ、右の辺を画面の右端に合わせる」という制約をつけると、ビューは左右から引っ張られることになります。ビューのサイズを制約で引っ張って決めたい場合は、サイズを0dpにします。

中央に配置する

ビューのサイズをdp指定やwrap_contentにした状態で、制約で左右に引っ張った場合、中央に配置されます。

まとめ

ConstraintLayoutを使ったレイアウト方法を紹介しました。ConstraintLayoutには他にもいろんな機能が用意されていますが、今回紹介した範囲でかなり多くのパターンのレイアウトができます。慣れておきましょう。