現役AndroidエンジニアがAndroid Kotlin Fundamentalsコードラボに挑戦！その２

# 前回
https://qiita.com/hayashidamoka/items/88c72baa600dd383a823

# Lesson 2: Layouts
## 02.1: Linear layout using the Layout Editor
https://developer.android.com/codelabs/kotlin-android-training-linear-layout#0

### 内容
- プロフィールアプリの作成
 - LinearLayoutの解説
 - レイアウトエディッタの解説
 - TextViewの追加
 - パディングとマージンの追加
 - フォントの設定
 - スタイルの設定
 - ImageViewの追加
 - ScrollViewの追加
 - コーディングチャレンジ：ScrollView内にImageViewを追加


　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/fc2861e8-5a9c-2917-82cf-947f686fb4c3.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/2981c6f2-5be1-1c2e-d9bd-e18473cb862f.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/3bee0d75-f072-a4bd-7316-dbce71726c42.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/25dd85fc-d8b7-2dbf-703d-049e1e337f90.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/6b1fe438-962a-a05d-3db8-b07133ff58f3.png>

#### メモ
- ScrollViewは子ビューを1つしか含めることができない
  - 複数の子ビューを配置したいときは、ScrollViewの中にLinearLayoutなどのビューグループを配置する

## 02.2: Add user interactivity
https://developer.android.com/codelabs/kotlin-android-training-interactivity#0

#### 内容
- プロフィールアプリの作成
 - EditTextの追加
 - Buttonの設定
 - TextViewの追加,設定
 - クリックリスナーの設定
 - ビュー、キーボードの表示・非表示設定
 - フォーカスの設定


　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/0a184a01-5b0b-5410-c730-5d367db4ba45.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/5402b507-4dee-3832-2854-6b9390a7824c.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/4fcbec9f-7ca9-2e62-781c-c04d1ba86b75.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/dc0f63f4-338a-cbb5-fbe8-3ef08068832a.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/ed26260b-6510-4db3-2626-60b8d0325bd9.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/367c453e-6092-4d17-f09d-f64dc831bf28.png>

### メモ
- Android studioのアップデートにより、colorPrimary、colorPrimaryDark、colorAccentは設定しなくなった...?(もし間違えてたらコメントで指摘してください)
- android:background ではボタンの背景色が変わらず...
android:backgroundTint　で変更できた...なぜだ...?
- visibility属性
 - visible：ビュー表示。
 - Invisible：ビュー非表示。レイアウト内のスペースを占有。
 - gone：ビュー非表示。レイアウト内のスペースを占有しない。

## 02.3: ConstraintLayout using the Layout Editor
https://developer.android.com/codelabs/kotlin-android-training-constraint-layout#0

### 内容
- タップで色が変わるアプリの作成
 - ConstraintLayout の解説
 - TextView に style を設定
 - TextView に制約を追加
 - Chains の解説
 - TextView に clickHandler を設定
 - コーディングチャレンジ：ビューの背景を画像する
 - ベースライン制約の解説
 - コーディングチャレンジ：レイアウト全体をカラーボックスで埋めて色を変える

　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/27b399aa-37df-3a1f-6313-475166e7aedd.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/0acb9c5e-e616-29a9-e2a4-16b89a3fa884.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/3cbf3049-c2b4-1478-f23b-71633fa2ad12.png>　　　<img width="50%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/662f79d5-2f3d-df39-f230-0e9e7a9c6be5.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/db3879d0-2abb-d705-b72b-9f1077f07b72.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/138d592c-c28d-0327-b2b3-a3d8df18f1e5.png>　←ﾁｮｯﾄｷﾓｲw
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/7413d3dd-6f88-0925-b5c5-e8e1ad2f7f57.png>　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/75011d8c-9764-6000-3f5d-05d1907dfebf.png>
　　　<img width="30%" src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394720/d7a0060c-e680-1894-5efd-acb1b84bbe5a.png>


### メモ
- styles.xml は themes.xml に変更になったっぽい
- 書き方がかっこいいのでメモ。こんなスマートに書けるようになりたい。

```
private fun setListeners() {

        val boxOneText = findViewById<TextView>(R.id.box_one_text)
        val boxTwoText = findViewById<TextView>(R.id.box_two_text)
        val boxThreeText = findViewById<TextView>(R.id.box_three_text)
        val boxFourText = findViewById<TextView>(R.id.box_four_text)
        val boxFiveText = findViewById<TextView>(R.id.box_five_text)

        val rootConstraintLayout = findViewById<View>(R.id.constraint_layout)

        val clickableViews: List<View> =
            listOf(boxOneText, boxTwoText, boxThreeText,
                boxFourText, boxFiveText, rootConstraintLayout)

        for (item in clickableViews) {
            item.setOnClickListener { makeColored(it) }
        }
    }

    private fun makeColored(view: View) {
        when (view.id) {
            R.id.box_one_text -> view.setBackgroundColor(Color.DKGRAY)
            R.id.box_two_text -> view.setBackgroundColor(Color.GRAY)
            R.id.box_three_text -> view.setBackgroundColor(Color.BLUE)
            R.id.box_four_text -> view.setBackgroundColor(Color.MAGENTA)
            R.id.box_five_text -> view.setBackgroundColor(Color.BLUE)

            // 背景
            else -> view.setBackgroundColor(Color.LTGRAY)
        }
    }

```
- makeColored() の中で box_three_text達が使用できなかったので以下を参考にして引数を追加した
 - https://github.com/google-developer-training/android-kotlin-fundamentals-apps/issues/462

## 02.3: Data binding basics
https://developer.android.com/codelabs/kotlin-android-training-data-binding-basics#0

### 内容
- プロフィールアプリの作成
 - findViewById() を データバインディング に変更
 - スコープ関数applyの使用
 - データクラスを作成、ビューで使用

### メモ
- findViewById() を多用するとアプリが重くなるのでデータバインディングを使用するのが望ましい
- データバインディングの使い方
 - https://developer.android.com/codelabs/kotlin-android-training-data-binding-basics#5

### 感想
やっていくうちに、こんなに学べてとても楽しい教材が無料ということに改めて驚いた。Googleさまありがとうございます🙇‍♀️
第一章で Android studio もう入ってるから〜とインストールを吹っ飛ばしたせいでバージョンのずれにより使えなくなったものや書き方が変わってしまったものがあり手こずった。
ただ、どうせ最新バージョンを使っていくので手こずりながら変更点を知った方がよいのかもしれない...。
いつも findViewById() を使っていたのでデータバインディングがかっこよく感じた。アプリが重くなってしまうことを防げる上、慣れれば読みやすくなるようなので、使いこなして見慣れていきたい。
だけど、せっかくコードを綺麗にしてもアプリの見た目がほぼ変わらないのはちょっと切ないなぁ...🥺

かかった時間 約8時間