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

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

基本の配置

　では早速画面を作成していきましょう。

準備

　まず図3の画面を作ってみましょう。

図3　作成する画面

　activity_constraint_layout.xmlファイルを開いてください。デフォルトではTextモードが表示され、XMLタグが表示されています。ルートタグは、

<android.support.constraint.ConstraintLayout>

となっています。その中にTextViewタグが書かれていますが、まずはTextViewタグを削除し、ConstraintLayoutタグのみにしてください。その状態でDesignタブをクリックし、Designモードに変更してください。図4のように表示されるはずです。

図4　Designモードで表示したレイアウトエディタ

　ここから開始していきます。なお、レイアウトエディタの表示デバイスはエミュレータに合わせてNexus 5Xに変更しています。

制約の設定

　図3の一番上にある「必要な情報を…」と表示されているTextViewを追加しましょう。左上のPaletteから［TextView］をデザインエディタ上にドラッグ＆ドロップしてください。その上で、右側のPropertiesで以下の設定を行ってください。

• ID：tvTitle
• text：@string/tv_title

　すると、図5の画面が表示されます。

図5　新しいTextViewを追加

　この状態で、追加されたtvTitleの上下左右にある丸印（これを「制約ハンドル」といいます）のうち、上の印を親レイアウトの境界までドラッグします。同様に左もドラッグします（図6参照）。

図6　制約ハンドルのドラッグ

　すると、図7の通りtvTitleが左上に引き寄せられます。

図7　左上に引き寄せられたtvTitle

　これが制約です。なお、制約の詳細に関してはPropertiesのID欄の下にある下図の部分に表示されます。

図8　Propertiesの制約表示

　これを見ると左と上に制約が設定されているのが分かります。さらに、「8」の数字が書かれています。これはマージンです。レイアウトエディタで制約を追加した際、マージンが自動で設定されます。もちろんこの数字は変更可能です。

XMLの確認

　ここまではDesignモードで行ってきました。これがXMLではどのように書かれているのか確認しておきましょう。Textモードに切り替えてください。以下のTextViewタグが追加されています。

<TextView
    android:id="@+id/tvTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/tv_title"
    app:layout_constraintTop_toTopOf="parent"  (1)
    android:layout_marginTop="8dp"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"/>  (1)

　（1）の「app:layout_constraint…」と記載されている属性が制約です。この属性値に親部品の場合はparent、それ以外の場合はその画面部品のidを記述します。このようにXMLタグで記述しても同じことはできますが、Designモードの方が圧倒的に楽なことが分かると思います。

もうひとつTextViewを追加

　同様の手順で「名前」のラベルを追加してみましょう。［TextView］をドラッグ＆ドロップし、Propertiesで以下の設定を行ってください。

• ID: tvName
• text: @string/tv_name

　その上で、上の制約ハンドルをtvTitleの下の制約ハンドルまで、左の制約ハンドルを親レイアウトの境界までドラッグしてください。図9のようになります。

図9　tvNameの追加