Android Kotlin基礎講座 02.3: レイアウトエディターを利用したレイアウトの位置制約付け

タスク：二つ目のテキストビューを追加し制約をつける

このタスクでは別のテキストビューをbonx_one_textの下に追加します。また新しいテキストビューをbox_one_textおよびレイアウトの親要素に制約付けます。

activity_main.xmlファイルを開き、Designタブで表示してください。
下の画像のように、パレットからデザインエディター上にTextViewをドラッグしてください。左にマージンがある状態でbox_one_textの下に配置してください。
デザインエディターで新しいテキストビューをクリックし、テキストビューの上辺の点の上にカーソルを当ててください。この点は制約ハンドルと呼ばれています。

新しく追加したテキストビューの上辺とBox Oneテキストビューの下辺をつなぐ制約を作成します：

新しいテキストビューの上辺の制約ハンドルにカーソルを当ててください。
制約ハンドルをクリックして上にドラッグしてBoxOneの下辺の点に繋げてください。

クリックを離すと制約が作成されます。同時にテキストビューがBoxOneの下辺に向かって16dp分のマージンを開けた距離まで上に移動します。（以前に設定したデフォルトマージンのおかげで新しいテキストビューは16dpのマージンを最初から持っています）

次に左側の制約を作ります：

Tip: ビューインスペクターを使って制約を作成することもできます。例えば、左側に制約をつくるためには以下のようにします：

この方法で制約をつくると、制約は親要素、またはそのビューに近いビューに制約が繋げられます。

<string name="box_two">Box Two</string>

今回の場合、テキストビューの高さと幅に固定されたサイズを設定しています。固定されたサイズは全てのデバイスやレイアウトで常に同じように固定されたサイズで表示したい場合のみ使用してください。

重要: 実際の世界でアプリを開発する際には、UI要素の高さや幅には柔軟性のある制約を用います。例えば、match_constraintやwrap_contentなどです。固定されたサイズのUI要素を使うと、違うサイズのスクリーンにレイアウトが対応できなくなります。