Android Studio ボタンレイアウト調整について

Android Studio 2.3.3にてボタンレイアウトを調整しています。

参考書なので右側に「Component Tree」が表示されていると思うのですが、
表示されなくボタン調整ができずに悩んでます。どのようにしたら表示できるようになりますでしょうか？

イメージ説明

xml
1<?xml version="1.0" encoding="utf-8"?>
2<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:layout_width="match_parent"
6    android:layout_height="match_parent"
7    tools:context="com.example.xxx.myapplication2.MainActivity">
8
9    <TextView
10        android:layout_width="wrap_content"
11        android:layout_height="wrap_content"
12        android:text="Hello World!"
13        app:layout_constraintBottom_toBottomOf="parent"
14        app:layout_constraintLeft_toLeftOf="parent"
15        app:layout_constraintRight_toRightOf="parent"
16        app:layout_constraintTop_toTopOf="parent"
17        app:layout_constraintVertical_bias="0.115" />
18
19    <Button
20        android:id="@+id/button2"
21        android:layout_width="wrap_content"
22        android:layout_height="wrap_content"
23        android:text="Button"
24        tools:layout_editor_absoluteX="419dp"
25        tools:layout_editor_absoluteY="291dp" />
26
27</android.support.constraint.ConstraintLayout>
28

やりたい事は「Hello World!」の下に「Button」を置きたく思います。

どうかご教授宜しくお願いします。

行動規範の内容に同意します

回答3件

イメージ説明

こんな感じでできました！
皆様ありがとうございました！

投稿2017/07/24 20:52

kumakumatan

総合スコア213

ベストアンサー

多分、Component Treeの表示とかそういう問題ではなく、ConstraintLayoutの使い方の問題でうまく配置ができないという話だと思うので、そのつもりで回答します。

ConstraintLayoutでは、パーツに「制約（Constraint）」を与えなければ実行時に正しく配置されません。質問のレイアウトでは、Buttonには何の制約もないため、実行すると左上隅に寄った表示になってしまうと思います。

制約を設定するには、まずレイアウトエディター上で配置したいパーツをクリックします。すると四辺の中央に丸印が表示されるでしょう。この丸印の上でマウス左ボタンを押しながらドラッグすると、矢印が伸びていきます。これを他のパーツまたはレイアウトの枠まで引っ張っていくと、連結されます。この状態でパーツを動かせば矢印も連動して伸び縮みして、置いた場所に応じて対象のパーツとの距離が設定されます。

正しく配置するには、少なくとも「上下のどちらか一方向」および「左右の一方向」の制約を与える必要があります。また、中央揃えをしたければ両側必要があります。

下記画像は、配置したボタンの上方向をTextViewと繋いで100dpの距離を設定し、左右はレイアウトの外枠に繋いで中央揃えした様子です。こんな感じでレイアウトを作成してみましょう。

ConstrainLayoutによるレイアウトデザインの例