基本の配置
では早速画面を作成していきましょう。
準備
まず図3の画面を作ってみましょう。
activity_constraint_layout.xmlファイルを開いてください。デフォルトではTextモードが表示され、XMLタグが表示されています。ルートタグは、
<android.support.constraint.ConstraintLayout>
となっています。その中にTextViewタグが書かれていますが、まずはTextViewタグを削除し、ConstraintLayoutタグのみにしてください。その状態でDesignタブをクリックし、Designモードに変更してください。図4のように表示されるはずです。
ここから開始していきます。なお、レイアウトエディタの表示デバイスはエミュレータに合わせてNexus 5Xに変更しています。
制約の設定
図3の一番上にある「必要な情報を…」と表示されているTextViewを追加しましょう。左上のPaletteから［TextView］をデザインエディタ上にドラッグ＆ドロップしてください。その上で、右側のPropertiesで以下の設定を行ってください。
- ID：tvTitle
- text：@string/tv_title
すると、図5の画面が表示されます。
この状態で、追加されたtvTitleの上下左右にある丸印（これを「制約ハンドル」といいます）のうち、上の印を親レイアウトの境界までドラッグします。同様に左もドラッグします（図6参照）。
すると、図7の通りtvTitleが左上に引き寄せられます。
これが制約です。なお、制約の詳細に関してはPropertiesのID欄の下にある下図の部分に表示されます。
これを見ると左と上に制約が設定されているのが分かります。さらに、「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のようになります。
