Androidアプリの新レイアウト「ConstraintLayout」をCheck It Out！

Android Studioの新バージョン2.3をCheck It Out！ 後編

横並びに変更も簡単

　では名前とメールアドレスに関して、ラベルと入力欄を横並びにした図17の画面を作成するにはどのようにすればいいでしょうか。

図17　ラベルと入力欄が横並び

　実は、非常に簡単に実現できます。

　まずetNameの制約ハンドルについて、上をtvTitleの下側に、左をtvNameの右側に変更します。この時点で名前ラベルと名前入力欄が横並びになります。

　同様にetMailの制約ハンドルは、上をetNameの下側に、左をtvMailの右側に変更します。すると、図18の画面になるはずです。

図18　ラベルと入力欄が横並びに変更された

　これだけです。この状態でアプリを起動してみてください。無事、図17の画面が表示されたと思います。

ベースラインをそろえる

　図17ではラベルと入力欄の文字の位置（ベースライン）がそろっていません。そのため、最後にこれをそろえましょう。

図19　ラベルと入力欄のベースラインがそろった状態

　こちらも非常に簡単です。

　まずtvNameを選択し、をクリックしてください。すると、図20のようにベースラインを表す太めの線が表示されます。

図20　ベースラインが表示された状態

　この線はマウスを重ねると緑色に変化します。その状態でetNameまでドラッグしてください。etNameにも同様にベースラインが表示され緑色に変化したところでドロップします。すると、自動的にベースラインがそろいます。tvMailとetMailも同様に行います。この状態でアプリを起動してみてください。無事、図19の画面が表示されたと思います。

まとめ

　いかがでしたでしょうか？ このようにConstraintLayoutとレイアウトエディタを使うと、柔軟な画面作成を簡単に行うことができます。

　今回は紹介しきれませんでしたが、ConstraintLayoutは他にも画面部品をそろえるために制約の対象となる「ガイドライン」機能や、図11のようにセンタリングされた画面部品をちょうど真ん中に配置するのではなく、左右あるいは上下に偏らせて配置できる「バイアス」機能、複数の並んだ部品を均等配置したりくっつけたりできる「チェイン」機能があります。詳細はマニュアルなどを参照してください。

　今後はConstraintLayoutが標準として使われていくでしょう。本記事がそのお役に立てれば光栄です。