layout_width／height
次に名前の入力欄であるEditTextを追加しながら、ConstraintLayoutで独特の働きをするlayout_width／heightについて解説していきましょう。
EditTextの追加
先ほどと同様の手順で、今度はPaletteから［Plain Text］をドラッグ＆ドロップし、PropertiesでIDを「etName」と設定を行ってください。さらに［Text］に記述されている「Name」を削除してください。その上で、上の制約ハンドルをtvNameの下の制約ハンドルまで、左の制約ハンドルを親レイアウトの境界までドラッグしてください。
図10のようになります。
センタリング
この状態ではetNameは左に寄ってしまっているので、センタリングします。これは右の制約を追加することで可能となります。右の制約ハンドルを親レイアウトの境界までドラッグしてください。図11のように無事センタリングされました。
Match Constraints
ただ、この状態は当初の目標と異なります。etNameの幅を親いっぱいまで広げないといけません。これまでの考えですぐに思い浮かぶのはlayout_width属性にmatch_parentを設定することですが、残念ながらConstraintLayoutでmatch_parentは使ってはいけないことになっています。代わりに使うのがMatch Constraintsという設定で、これは制約の中でいっぱいに広げることを意味しています。ただし、match_constraintsという設定値はなくlayout_widthの値として0dpを設定します。
では早速Propertiesから設定します。layout_width項目に直接入力してもいいですが、ここでは別の方法を紹介します。現在、Propertiesの制約表示部分は図12のようになっています。
この、
の部分をクリックしてください。
すると、、
、
の3種類に変化します。ConstraintLayoutでは、この3種類のlayout_width／heightを設定することが可能で、それぞれ名前がついています。
Wrap Content
が該当し、設定値はwrap_contentです。これは通常のレイアウトのwrap_contentと同じです。
Fixed
が該当し、設定値は具体的な数値です。
Match Constraints
が該当し、設定値は0dpです。
ここでは、Match Constraintsを選択してください。図13のように、親部品いっぱいまでetNameが広がっていることが確認できます。
残りの部品の配置
では、残りの部品を配置していきましょう。
「メールアドレス」ラベル
［TextView］をドラッグ&ドロップし、Propertiesで以下の設定を行ってください。
- ID：tvMail
- text：@string/tv_mail
その上で、上の制約ハンドルをetNameの下の制約ハンドルまで、左の制約ハンドルを親レイアウトの境界までドラッグしてください。
「メールアドレス」入力欄
［Plain Text］をドラッグ＆ドロップし、PropertiesでIDを「etMail」と設定を行ってください。さらに［Text］に記述されている「Name」を削除しておいてください。その上で、上の制約ハンドルをtvMailの下の制約ハンドルまで、左右の制約ハンドルを親レイアウトの境界までドラッグしてください。最後にlayout_widthの値として0dp、Match Constraintsの設定を行ってください。
「質問内容」ラベル
［TextView］をドラッグ＆ドロップし、Propertiesで以下の設定を行ってください。
- ID：tvComment
- text：@string/tv_comment
その上で、上の制約ハンドルをetMailの下の制約ハンドルまで、左の制約ハンドルを親レイアウトの境界までドラッグしてください。
「質問内容」入力欄
質問内容は複数行のため［Multiline Text］を使用します。これをドラッグ＆ドロップし、PropertiesでIDを「etComment」と設定を行ってください。上の制約ハンドルから、tvCommentの下の制約ハンドルまで、左右の制約ハンドルを親レイアウトの境界までドラッグしてください。最後にlayout_widthの値としてMatch Constraintsの設定を行ってください。
ここまでの手順を行うと、図14のようになります。
layout_heightにMatch Constraints
ただ、このままではetCommentが縦方向に広がっていません。これを修正しましょう。これはMatch Constraintsをlayout_heightに適用するだけです。まず、etCommentの下側の制約ハンドルを親レイアウトの境界までドラッグしてください。すると、図15のように縦方向にセンタリングされます。
その上で、縦方向のをに変更し、layout_heightにMatch Constraintsを設定します。すると図16のように変化します。
この状態でアプリを起動してみてください。無事、図3の画面が表示されたと思います。
