AndroidDevSummit2022

From Views to Composeのまとめと実践

Transcript

1. Android Dev Summit ‘22
   From Views to Compose: Where can I start?
   サイボウズ株式会社 藤⽥真輔(@fujipon1126)
   

   View Slide

2. なぜこのセッションを選んだ？
   • 継続的にJetpack Composeについて学習したい
   • プロダクトにJetpack Composeを導⼊したい
   

   View Slide

3. セッション概要
   • 以下のページの内容を説明した感じで、それ以上でもそれ以下
   でもない
   • https://developer.android.com/jetpack/compose/interop/migration-
   strategy
   • 既存プロダクトのComposeへの移⾏は3つの戦略で進めると良い
   1. New Features(新機能の作成)
   2. Common UI(UIコンポーネントのライブラリ作成)
   3. Existing Features(既存機能の置き換え)
   ※プロダクトの規模などにより適切に対応する
   

   View Slide

4. 1. New Features(新機能)
   • Composeを利⽤して新機能を作る場合でも、既存アーキテク
   チャの制約下で実施する
   • FragmentとNavigationコンポーネントを利⽤してる場合は、
   Fragmentを作成しComposeViewを返す
   • 新しい機能が既存の画⾯の⼀部になる場合は、他のビューと同
   様に、ComposeView を UI 階層に追加する
   

   View Slide

5. 2. Common UI(UIコンポーネントのライブラリモ
   ジュール作成)
   • Compose を使⽤して機能を作成する場合、結果としてコン
   ポーネントのライブラリを構築することになるはず
   • モジュールを作成することで、コンポーネントの信頼できる唯
   ⼀の情報源を保持して、再利⽤性を促進できる
   • アプリのサイズに応じて、このライブラリは別個のパッケージ、
   モジュール、ライブラリ モジュールにすることができる
   

   View Slide

6. 3. Existing Features(既存機能の置き換え)
   • 既存機能を段階的に移⾏することが可能
   • まずはシンプルな画⾯を置き換え(少量のコードで書き直せる)
   • ViewとComposeが混在してる画⾯も完全移⾏の有⼒候補
   • 複雑さに応じて段階的に移⾏を繰り返し画⾯全体がComposeに
   なるまで⾏う(ボトムアップアプローチ)
   • 最終的にUI全てがComposeになると、Fragmentを使⽤するメ
   リットがほぼ無いので、Composeを利⽤したナビゲーションを
   検討する
   

   View Slide

7. その他
   • 既存のテーマを再利⽤できる
   • MDC ライブラリを使⽤中→MDC Compose Theme Adapter ライブ
   ラリを使⽤
   • AppCompatXMLテーマを使⽤中→AppCompat Compose Theme
   Adapter を使⽤
   

   View Slide

8. 内容踏まえて実践してみた
   • サンプルプロジェクトを以下の条件で作成(migration-view-to-compose)
   SingleActivity & Viewベース & NavigationComponentで画⾯遷移
   - MainActivity
   - NavigationComponentによる画⾯遷移を提供
   - MainFragment
   - 各サブ画⾯への遷移ボタンがある
   - Sub1Fragment
   - Buttonを押すとEditTextに⼊⼒された⽂字をTextViewにコピー
   - Sub2Fragment
   - ImageViewとButtonがあって、SeekBarも置いてる
   - Sub3Fragment
   - RecyclerViewに50アイテム表⽰
   

   View Slide

9. New Featuresの実践
   • Sub4画⾯をComposeで作る(Sub4Fragment/Sub4Screen)
   Sub4Fragment抜粋
   

   View Slide

10. Common UIの実践
    • common-uiモジュールを作りCommonButtonコンポーザブル
    を作る（共通ボタン）
    • appモジュールでcommon-uiの
    CommonButtonを参照する
    

    View Slide

11. Existing Featuresの実践(画⾯の⼀部)
    • ボタンが複数ある画⾯の⼀部(Sub1ボタン)だけComposeに置
    き換える
    • レイアウト/コード
    

    View Slide

12. Existing Featuresの実践(画⾯全体)
    • RecyclerViewの画⾯をComposeで置き換え
    View Compose
    

    View Slide

13. 引⽤元
    • From Views to Compose: Where can I start? -
    YouTube
    • Compose をアプリに導⼊する - Android Developers
    • 移⾏戦略 – Android Developers
    • fujipon1126/migration-view-to-compose
    

    View Slide