【Android-Codelabs】8/36 〜 ConstraintLayoutの使い方② 〜


2019年にGoogleから，Web上でAndroidを学べるコースが提供されました．([Android Kotlin Fundamentals Course](https://codelabs.developers.google.com/android-kotlin-fundamentals/))
この記事では，そのコースを実際にやってみてアウトプットしてみるといった内容です．
何かツッコミなどあれば編集リクエストかコメントかTwitterでいただければ修正いたします :pray:

#今回学ぶこと
・BaseLine Constraintの使い方
・ボタンのチェーンの使い方

#目指す成果物

ここでは前回に引き続き，ConstraintLayoutの使い方②をやっていきます．
前回やった[ConstraintLayoutの使い方①](https://qiita.com/syuheifujita/items/b0ce95a148863d748da4)をみていない方は，[ここから](https://github.com/syuheifujita/android-codeLab-fundamental-2-3)ソースコードをダウンロードしてください．

さて前回使ったアプリに，新たな制約を加えてこのようなものを作っていきましょう．

![2-3-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/419373fc-4610-6181-edfc-f5611646d947.png)


#ステップ
###1. BaseLine Constraintを追加する

BaseLine Constraintというのは，ビューのテキストのベースラインにそろえることを言います．
特にフォントサイズが異なる場合に有効です．

![2-3-19 .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/6ea3c1a5-8246-c1e0-a12b-30983c1cc88b.png)


コードは次のように書きます．

```
<Button
   android:id="@+id/buttonB"
   ...   
   android:text="B"
   app:layout_constraintBaseline_toBaselineOf="@+id/buttonA" />
```

次に，ユーザーにアプリの使用方法を知らせるために，２つの`TextView`を追加します．
1つはラベル用で，もう1つは指示情報用です．

まずラベル用のTextViewの属性はこのようにします．

```
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/label_text"
    app:layout_constraintTop_toBottomOf="@id/box_two_text"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_margin="16dp"
    android:textSize="24sp"
    android:textStyle="bold"/>
```

もう一つの指示情報用のTextViewは，このようにします．

```
<TextView
    android:id="@+id/info_text"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:text="@string/tap_the_boxes_and_buttons"
```

しかしこのままだと制約がないのでエラーが起こります．
まず右端と左端の制約をこのように定義します．

![2-3-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/a020c60e-800a-9f20-8c7b-a4680e84dc6a.png)


```
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/label_text"
```

次に先程の，２つの`TextView`のベースラインを揃えていきます．
レイアウトエディターで２つのビューを選択して，cntr+クリックでダイアログが表示されます．
`constrain`>`infotext`>`to baseline of labeltext`をクリックするとつけることができます．

アプリを実行するとこのようになります．

![2-3-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/2c48e698-a198-0cbb-97ea-2e8dcf97f913.png)


###2. ボタンのチェーンを追加します

ここでは３つの`Button`ビューを追加し，それらをチェーンを使って連結していきます．

まず３つの`Button`ビューを追加してください．

![2-3-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/a9951300-7339-c206-2ae1-57e4b8ab3bf8.png)


属性はこのようになります．

```activity_main.xml
<Button
    android:id="@+id/red_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_red” />

<Button
    android:id="@+id/yellow_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_yellow” />

<Button
    android:id="@+id/green_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_green” />
```

```string.xml
<string name="button_red">RED</string>
<string name="button_yellow">YELLOW</string>
<string name="button_green">GREEN</string>
```

次にボタンを互いにそろえたいので，ベースラインの制約をつけます．

![2-3-23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/a17dc111-c980-9100-40cd-b0f2e1b51d1d.png)


次に３つのボタンを，水平にチェーンの制約をつけます．
`Chains`>`Crate Horizontal Chains`をクリックします．

![2-3-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/8c01aacd-40cc-323d-1331-66c3d105616d.png)


最終的なコードはこのようになります．

```
<Button
    android:id="@+id/red_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/button_red"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/yellow_button"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/yellow_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="32dp"
    android:text="@string/button_yellow"
    app:layout_constraintBaseline_toBaselineOf="@+id/red_button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/green_button"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/red_button" />

<Button
    android:id="@+id/green_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:layout_marginBottom="32dp"
    android:text="@string/button_green"
    app:layout_constraintBaseline_toBaselineOf="@+id/red_button"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/yellow_button" />
```

###3. Buttonにクリックハンドラーを追加する

ここでは各`Button`ビューに，クリックハンドラーを追加していきます．
クリックハンドラーは`TextView`の色を変化させるように実装します．

まず，`res`>`values`>`colors.xml`ファイルに次の色を追加します．

```colors.xml
<color name="my_green">#12C700</color>
<color name="my_red">#E54304</color>
<color name="my_yellow">#FFC107</color>
```

次に，MainActivityでButtonのビューを取得します．

```
val redButton = findViewById<TextView>(R.id.red_button)
val greenButton = findViewById<TextView>(R.id.green_button)
val yellowButton = findViewById<TextView>(R.id.yellow_button)
```

リストに値を追加します．

```
listOf(boxOneText, boxTwoText, boxThreeText,boxFourText, boxFiveText, rootConstraintLayout,
redButton, greenButton, yellowButton)
```

テキストビューの色を変更するコードを入れます．

```
R.id.red_button -> box_three_text.setBackgroundResource(R.color.my_red)
R.id.yellow_button -> box_four_text.setBackgroundResource(R.color.my_yellow)       
R.id.green_button -> box_five_text.setBackgroundResource(R.color.my_green)
```

アプリを実行するとこのようになります．

![2-3-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/a2b8beb0-6d05-fef0-670d-81c9ed1a08a8.png)


#まとめ
・チェーンは，ビュー同士を互いに連結させて，双方向の制約を持たせるもの
・BaseLine Constraintは，ビューのベースラインを他のベースラインにそろえるもので，フォントサイズが違う場合に有効

#宿題
>・アプリからテキストとボタンを削除し、レイアウト全体をカラーボックス（TextViewビュー）で埋めてみてください


#クイズ
>1問目
次の制約タイプのうち、コンテンツに合わせて必要なだけビューを展開する制約タイプはどれですか？

・Wrap content
・Match constraint
・Fixed constraint
・Baseline constraint

###クイズの正解
１問目    Wrap content

#参考資料

###言葉の定義
・BaseLine Constraint
ビューのベースラインを他のベースラインにそろえるもので，フォントサイズが違う場合に有効

###CodeLabs by Google
https://codelabs.developers.google.com/android-kotlin-fundamentals/
![スクリーンショット 2020-02-05 4.07.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249786/3ad2d3c9-d57f-1b4b-85cf-1c92a57b464b.png)