Jetpack ComposeでMaterial You実装する方法(Material 3)

LeoAndo commented 2 years ago

Jetpack Compose layoutの詳細

状態をUIに変換する仕組みはどのように行われているか？？(内部実装について) https://youtu.be/zMKMwh9gZuI?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=79 以下の3ステップで構成される

Composition(構成) -> Layout -> Drawing(描画) Compositionは、UIを発行できる構成可能な関数を実行しUIツリーを作成する例えば以下のように https://youtu.be/zMKMwh9gZuI?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=92

Layoutでは、各ノードは幅と高さ及び x, y座標が決定される Drawingで全ての要素がレンダリングされる

Menu Windowが大きくなると機能しない問題の対策は、 IntrinsicSize.Maxを使用する。子Viewは列の幅を埋めることができる。

LeoAndo commented 2 years ago

Composeで状態管理ができていないコードの例 https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=139
状態管理には、rememberと Compose State APIの組み合わせを使用する https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=171 StateとMutableStateがある以下のようなコードを書く https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=236
Activityの再生成でも状態を破棄したくない場合は、rememberではなく、rememberSaveableを使用する rememberSaveable は、一時的なアニメーションには向かない https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=279
状態をUIと分離するサンプル(JetSnackAppState) https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=796
ViewModelでComposableのStateを持ってはいけない(ViewModelインスタンスの方が生存期間が長いためメモリリーク) https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=980
jetpack composeのサンプルアプリのアーキテクチャ https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=1205 https://youtu.be/rmv2ug-wW4U?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=1226

LeoAndo commented 2 years ago

composeのanimationサンプルは以前以下のrepositoryにて作成した https://github.com/LeoAndo/android-jetpack-compose-animation-samples

LeoAndo commented 2 years ago

ユーザの好みによって色が動的に調整される https://youtu.be/4bguZJwHqsQ?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=84
Material Youは、個別のカラーエクスペリエンスをサポートするアルゴリズムシステムである
Material Youはどのように動作するのか？？
- ユーザの壁紙から始まり、ソースカラーが抽出され５つのキーカラーが生成される
- 各キーカラーは１３トーンのトーンパレットに解釈される https://youtu.be/4bguZJwHqsQ?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=99
配色について
- 配色は色相や16進値ではなく色調によって定義されるので、デフォルトで配色にアクセスできるようにするには、色調パレットシステムが不可欠
- 60の発光スプレッドがある https://youtu.be/4bguZJwHqsQ?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=295
Dynamic Colorを使用すると、ユーザが気にいる規制のアクセス可能なカラーパレッドを作成可能 https://youtu.be/4bguZJwHqsQ?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=364
Dynamic color実装方法 https://youtu.be/4bguZJwHqsQ?list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&t=531