Save 37% off PRO during our Black Friday Sale! »

Title : Let's Preview! Jetpack Compose

6eecc52120fba9d87d982684211182ec?s=47 mochico
October 20, 2021

Title : Let's Preview! Jetpack Compose

2021/10/20 DroidKaigi2021
https://droidkaigi.jp/2021/timetable?day=2

Jetpack ComposeによるUIをAndroid Studioに組み込まれたPreview機能を使ってスムーズにクオリティ高く構築するプラクティスを紹介します。

Summary :
・Jetpack Composeを使ったUI構築の特徴
・Compose Previewの基本的な使い方
・Previewでデプロイなしに多端末対応をスムーズにする
・複雑なデータ・画面に対応したプレビューのプラクティス
・Previewを使いこなして堅牢なUIを構築する - テストとUI構築

6eecc52120fba9d87d982684211182ec?s=128

mochico

October 20, 2021
Tweet

Transcript

  1. Let’s Preview! Jetpack Compose @mochico

  2. About me mochico(@_mochicon_) Android / Kotlin / Java / Jetpack

    Compose Techbooster / 技術書典
  3. What is Jetpack Compose

  4. Jetpack Composeを使ったUI構築の特徴 • 宣⾔的UIツールキット • Functionで定義する • すべてKotlinで記述する • 状態が変わるごとにすべてのUIの更新を⾏

    う • 変更点のみを再描画する再コンポーズに描 画制御を任せてどのようなデータに応じて どのような表⽰をするのかのみ宣⾔する
  5. Compose Preview

  6. Compose Previewを表⽰する

  7. @Previewアノテーションをつける

  8. Preview画⾯を開く

  9. Preivewにデータを表⽰する

  10. プレビュー表⽰⽤のデータを準備する • Composableの外側からデータを 渡せるようにする

  11. ⽅法1: プレビュー⽤のComposableを⽤意する • プレビュー⽤のデータを渡して対象 のComposableを呼び出すだけの Composableを作る

  12. ⽅法2: PreviewParameterを使う

  13. ⽅法2: PreviewParameterを使う

  14. プレビューでデータを使う時の注意点 • 安易にプレビュー⽤のデータをパッケージにvalなどで定義するとコンパ イル後のアプリに残る • PreviewProvider経由などのデータはfunctionで定義されるため呼び出し の起こらないアプリ本体ではShrink時に削除される

  15. Previewで さまざまな⾒た⽬に対応する

  16. Previewの表⽰を変更する • サムネイル画像とタイトル、説明テキ ストをもつカードUI

  17. Previewの表⽰を変更する • Previewの⾒た⽬はアノテー ションのパラメータで設定する

  18. Previewの表⽰を変更する

  19. Color Blindness Modes

  20. 様々な状態に対応する • Locale • API Level • Device model •

    画⾯サイズ • フォントサイズ • UIモード • ⾊覚異常
  21. DeployとInteractive Mode

  22. より実践的なPreviewの利⽤ ―画⾯全体をPreviewする

  23. MVVMアーキテクチャに沿ったアプリ

  24. • Dummy: 実際には使われない⽳埋めのためのオブジェクト • Fake: 実際に動作するが本番とは異なる実装をもつオブジェクト。UIのテ ストにも使われる • Stubs: レスポンスを返さない関数やオブジェクト

    • Spies: 呼び出され⽅によって呼び出しを記録するStub • Mocks: 期待値を返却する空実装 Test Double
  25. MVVMアーキテクチャに沿ったアプリ

  26. State / ViewModel interface

  27. Screen composable

  28. FakeViewModelを実装する

  29. フェイクのViewModelで画⾯全体をPreviewする

  30. フェイクを使ったテスト戦略 • プレビューだけでなくUnit Testでも再利⽤できる • Unit Testで実際に動作するオブジェクトを使ってテストできる • インターフェースの呼び出し回数の検証や関数単位での戻り値の偽装・確 認にはモックを使⽤する

    • フェイクを使うことで実際の動作に近い形でプレビューできるが、より堅 牢な開発のためにはピクセルレベルでテストできる画像⽐較や、バックエ ンドへのアクセスを含めたE2Eも併⽤するとよい
  31. ex. DroidKaigi2021アプリのViewModelとフェイク • CompositionLocalProvider を使って限定され たPreview⽤のComposableのスコープで ViewModelのproviderを上書きしフェイクの ViewModelを提供する • Unit

    testでフェイクの実装と本番の実装をパラ メータとして同時にテストし、フェイクの信頼 性を⾼める • → 信頼性の⾼いフェイクを実装時からプレ ビューで利⽤することで整合性をテストしなが ら開発できる https://github.com/DroidKaigi/conference-app-2021#how-to-make-fakes-viewmodel-reliable
  32. まとめ

  33. Compose Previewを使う利点 • 開発初期からCompose Previewを使ってさまざまな環境に対応したUIを構築できる • Previewを実装しやすいインターフェース、パーツ単位を⼼がけることで設計がき れいになる • 画⾯全体のプレビューではフェイクの実装を使うことで本番に近い形で確認しなが

    ら実装できる • 実際に動くモデルとプレビューをセットで共有することでチームで堅牢なUIを作れ る
  34. 今後の課題 • 実装コードの近くにフェイクがあるため本番のアプリに混⼊する可能性 がある • より複雑な画⾯単位でのプレビューをどうするか • フェイクデータの管理と更新 • フェイクを実装する⼿間

  35. Let’s Preview! Jetpack Compose

  36. References • Jetpack Compose | Android Developers https://developer.android.com/ jetpack/compose •

    Mocks Aren't Stubs https://martinfowler.com/articles/mocksArentStubs.html • GitHub - DroidKaigi/conference-app-2021: The Official App for DroidKaigi 2021 https://github.com/DroidKaigi/conference-app-2021 • Compose tooling | Jetpack Compose | Android Developers https:// developer.android.com/jetpack/compose/tooling