$30 off During Our Annual Pro Sale. View Details »

Title : Let's Preview! Jetpack Compose

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構築

mochico

October 20, 2021
Tweet

More Decks by mochico

Other Decks in Technology

Transcript

  1. Let’s Preview!
    Jetpack Compose
    @mochico

    View Slide

  2. About me
    mochico(@_mochicon_)
    Android / Kotlin / Java / Jetpack Compose
    Techbooster / 技術書典

    View Slide

  3. What is Jetpack Compose

    View Slide

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

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

    View Slide

  5. Compose Preview

    View Slide

  6. Compose Previewを表⽰する

    View Slide

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

    View Slide

  8. Preview画⾯を開く

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ⽅法2: PreviewParameterを使う

    View Slide

  13. ⽅法2: PreviewParameterを使う

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. Previewの表⽰を変更する

    View Slide

  19. Color Blindness Modes

    View Slide

  20. 様々な状態に対応する
    • Locale
    • API Level
    • Device model
    • 画⾯サイズ
    • フォントサイズ
    • UIモード
    • ⾊覚異常

    View Slide

  21. DeployとInteractive Mode

    View Slide

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

    View Slide

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

    View Slide

  24. • Dummy: 実際には使われない⽳埋めのためのオブジェクト
    • Fake: 実際に動作するが本番とは異なる実装をもつオブジェクト。UIのテ
    ストにも使われる
    • Stubs: レスポンスを返さない関数やオブジェクト
    • Spies: 呼び出され⽅によって呼び出しを記録するStub
    • Mocks: 期待値を返却する空実装
    Test Double

    View Slide

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

    View Slide

  26. State / ViewModel interface

    View Slide

  27. Screen composable

    View Slide

  28. FakeViewModelを実装する

    View Slide

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

    View Slide

  30. フェイクを使ったテスト戦略
    • プレビューだけでなくUnit Testでも再利⽤できる
    • Unit Testで実際に動作するオブジェクトを使ってテストできる
    • インターフェースの呼び出し回数の検証や関数単位での戻り値の偽装・確
    認にはモックを使⽤する
    • フェイクを使うことで実際の動作に近い形でプレビューできるが、より堅
    牢な開発のためにはピクセルレベルでテストできる画像⽐較や、バックエ
    ンドへのアクセスを含めたE2Eも併⽤するとよい

    View Slide

  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

    View Slide

  32. まとめ

    View Slide

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

    View Slide

  34. 今後の課題
    • 実装コードの近くにフェイクがあるため本番のアプリに混⼊する可能性
    がある
    • より複雑な画⾯単位でのプレビューをどうするか
    • フェイクデータの管理と更新
    • フェイクを実装する⼿間

    View Slide

  35. Let’s Preview! Jetpack Compose

    View Slide

  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

    View Slide