Jetpack Composeの動画で驚いたこと、知らなかったこと

Jetpack ComposeのonCommitとonActiveの違いなどがコードを見ていてもよくわからなかったりしたのなど、見ることで色々すっきりしたので、見た感想を書いておきます。
今月末ぐらいに11 weeks of androidのUIの回があるので、また新しい動画などが出てくるかもです。
https://www.youtube.com/watch?v=U5BwfqBpiWU

---

**Compose Runtime = AndroidやUIに関連するコードはなく、ツリー状で操作するだけでUI以外のものを処理することもできる**
Compose UI Core = 入力管理、計測、描画、レイアウト
Compose UI Foundation = 行や列、デフォルトのインタラクションなど
Compose UI Material = マテリアルデザインに必要なものが入っている



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/1f5eb78e-9e7a-a6ce-8c82-7ce1a7b3a617.png)
https://youtu.be/U5BwfqBpiWU?t=334 より

---

**ドキュメント内でComposeのプレビューを見ることができるので、コード補完するときにどのように表示されるのかがわかる。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/99f9de40-0249-a2b9-e2e6-423854e79dff.png)
https://youtu.be/U5BwfqBpiWU?t=477 より

---

以前PaddingというComposable functionがあったがネストになりすぎるという問題があったため、今はModifierになっている。

**Modifierを使ってクリックを処理したり、リップルを処理したり、CutCornerEdgeの処理をできたりして、色々できてすごい**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/25b7b066-999c-2478-42e5-fe689f617fc9.png)
https://youtu.be/U5BwfqBpiWU?t=637 より

---

ComposeはLiveDataやRxJavaやFlowに対応していて、使うにはCompose stateとして観測する必要がある。
liveData.observeAsState()という関数を使うとCompose stateとして受けとることができる。 ([今はLazyRowなどに名前に変わっているみたいです](https://android-review.googlesource.com/c/platform/frameworks/support/+/1372804))
以下の例ではliveDataの値が変更されるとラムダの中が実行されて、recomposeされる。
**シンプル**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/505bfd6f-701e-fbc0-0335-0846efa1abaa.png)
https://youtu.be/U5BwfqBpiWU?t=742 より

---


ConstraintLayoutは、constraintSetを作って、それと対応するコンポーネントを下に書く方法で書いていく。対応付はModifier.tag(タグ名)で設定する。 (**これは[最近書き方が変わっている説があります。](https://android-review.googlesource.com/c/platform/frameworks/support/+/1321040/8/ui/ui-layout/integration-tests/layout-demos/src/main/java/androidx/ui/layout/demos/ConstraintLayoutDemo.kt)**)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/10553b86-b81f-f415-841a-91b7e8a6355c.png)
https://youtu.be/U5BwfqBpiWU?t=832 より

**条件を書いて制約を変えるなどがコードで直接書くことができるので、xmlとコードを使う方法よりも便利に使うことができる。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/3cf04801-76e0-eeaa-a9d2-aaac7adcc764.png)
https://youtu.be/U5BwfqBpiWU?t=897 より

---

**アイテムを押したときに左上が丸くなるAnimationがこれだけで動く**
リスナーやコールバックやクリーンアップなどは必要なし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/7a91108d-8747-8dd7-7121-fa802ce2d683.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/b4e840cd-199b-76d9-3fe3-99c669f23db1.png)
https://youtu.be/U5BwfqBpiWU?t=1024 より

---

相互互換性

ComposeはKotlinから影響を受けており、KotlinではJavaのアプリケーションから自分のペースでKotlinのコードを追加していけた。**Composeを適応したいときは新しい画面、新しい部品など少しずつ適応していくことができる**


既存のViewを使うにはAndroidViewというのを使い、ラムダでviewが渡ってくるのでそれで処理ができる。
そのViewをstateに保存させることでComposeから操作させられる。
**onActivce{}はUIのツリーに追加されたときに最初に呼び出される。ここでセットアップなどができる。(今回はコールバックを設定)**そしてonDiposeで後処理などを行うことができる。
**データの変更に対応して色を変えたりするにはonCommit(){}を利用する。追跡するデータをパラメーターにわたす。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/d519e166-280c-7572-19e9-f57db45b9881.png)
https://youtu.be/U5BwfqBpiWU?t=1194 より

---

テスト

TestTagで設定しておいて、テストから利用する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/e61fef6c-52ff-c6cb-e4b0-1980762ea654.png)
https://youtu.be/U5BwfqBpiWU?t=1227 より

Espressoなどではなく、ユニットテストで以下のようなコードを書くことでテスト可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27388/f52f968d-fd84-a62c-3846-aa7029f7576f.png)

https://youtu.be/U5BwfqBpiWU?t=1314 より