Jetpack Compose 頑張らないPreviewParameterProvider

Transcript

1. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Jetpack Compose
 頑張らないPreviewParameterProvider
 チームラボ 堀江

2. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 自己紹介
 堀江 達矢
 チームラボ 2013年入社
 スマホアプリエンジニア
 https://www.wantedly.com/id/tatsuya_horie_c
 

3. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Jetpack Compose Preview紹介
 @Previewでコンポーズ可能な関数のプレビューを表示できる

4. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Previewでパターンを試す場合
 @Previewで可能な範囲では簡単にPreviewできる

5. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Previewでパターンを試す場合
 データを入力する場合は個別に記述する必要がある

6. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Jetpack Compose PreviewPrameterProvider紹介
 @PreviewParameterアノテーション付きのパラメータを追加することで、サンプルデータを コンポーザブルのプレビュー関数に渡すことが可能

7. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. PreviewPrameterProviderでパターンを試す場合
 EntityごとにPreviewParameterProviderを全て作成していくのは少し手間
 部品単位のコンポーズ可能な関数はStringやBooleanなどの基本の形を引数に取ること が多い

8. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 基本の型のPreviewPrameterProvider
 StringやBoolean等の基本の型で宣言すると、桁数の多いときの表示や表示・非表示の パターンを作成したPreviewPrameterProviderを利用して確認できる

9. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 基本の型のPreviewPrameterProvider

10. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. PreviewPrameterProviderの制限
 複数のPreviewPrameterProviderは利用できない

11. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 2つ組み合わせのPreviewPrameterProvider

12. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 3つ組み合わせのPreviewPrameterProvider

13. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 基本の型のPreviewPrameterProviderを組み合わせ

14. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. まとめ
 ・基本の型のPreviewParameterProviderを利用して簡単にPreviewでパターンを表示
 ・基本の型のPreviewParameterProviderを組み合わせるPair / Tripleの PreviewParameterProviderを利用してPreviewでパターン表示
 参考
 ・https://developer.android.com/jetpack/compose/tooling?hl=ja#previewparameter
 ・https://alexzh.com/jetpack-compose-preview/
 ・https://speakerdeck.com/mochico/title-lets-preview-jetpack-compose