Android Expand Horizontallyはみだしちゃう

[Codelabs for Android Developer Fundamentals　1.2 Part B: The layout editor]
(https://codelabs.developers.google.com/codelabs/android-training-layout-editor-part-b/index.html?index=..%2F..%2Fandroid-training#0)
を進めていて、あれうまくいかない

言われた通りにやってるんだけどな〜　たぶん

これはConstraintLayoutに関するものです。

#問題点

####期待する結果

２つのButtonを選択した状態でツールバーのExpand Horizontallyをクリックすると
均等に配置されるよ。と言うもの

![スクリーンショット 2020-10-22 18.38.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/19f53b84-6876-49b5-58e8-d2f3f005cfde.png)
![スクリーンショット 2020-10-22 18.38.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/e1b1a691-2e49-249b-5f59-fa8b2855d377.png)

####現状

COUNTボタンがはみ出ちゃう..

![スクリーンショット 2020-10-22 18.42.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/361d90f1-5c56-e4d8-a3dc-1b23e9da539d.png)

#Expand HorizontallyをクリックすることでXMLファイルはどのように変化しているのか

####クリック前

```xml:activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />
```

####クリック後

```xml:activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="382dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_count"
        android:layout_width="383dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />
```

デカデカと書いたけど、要するに、
<b>layout_widthに値が入っただけ</b> です
特に新しい行は増えてないみたい。行っていうか制約かな。
しかも382dp と 383dp で同じサイズでも無い

##解決策
とりあえず
<b>Expand Horizontallyをクリックすることをやめる</b>

以下の記事を参考にしました。
[[Android] ConstraintLayout レイアウト逆引きまとめ](https://qiita.com/tktktks10/items/62d85dabac4bdb8c1f94#%EF%BC%92%E3%81%A4%E3%81%AE%E5%A0%B4%E5%90%88)
[初めてのConstraintLayoutでChainStyleを利用してみた](https://qiita.com/kozoo/items/9105b6d6a90fb88abc6e)

つまるところ<b>Chainを使うといい</b>みたい

(1) ふたつのButtonを選択して、Create Horizontal Chain

![スクリーンショット 2020-10-22 19.09.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/11fbb0ec-b6ed-2f64-8701-2b625c3f3024.png)

(2) ふたつのButtonのXMLを
`android:layout_width="0dp"` に変更

片方のButtonのXMLに
`app:layout_constraintHorizontal_chainStyle="spread"` を指定する

```xml:activity_main.xml
<Button
        android:id="@+id/button_toast"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:background="@color/colorPrimary"
        android:onClick="showToast"
        android:text="@string/button_label_toast"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"/>

    <Button
        android:id="@+id/button_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:background="@color/colorPrimary"
        android:onClick="countUp"
        android:text="@string/button_label_count"
        android:textColor="@android:color/white"
        android:textSize="60sp"
        app:layout_constraintBaseline_toBaselineOf="@+id/button_toast"
        app:layout_constraintStart_toEndOf="@+id/button_toast" />
```

すると、
![スクリーンショット 2020-10-22 19.19.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/c0d59f9b-c67c-e078-4101-be15cf66b826.png)

惜しい！！！！
あとはCOUNTボタンに
`android:layout_marginEnd="8dp"`
`android:layout_marginRight="8dp"`
の制約をつけてあげると、

![スクリーンショット 2020-10-22 19.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677719/f9196353-8dee-3182-f1a8-159e8f212913.png)

うまいこといきました

やっぱりXMLでいじるのが大事ですねー