こんにちは、tkyです。

個人で作成しているアプリをJetpackComposeで書き直したものを先日リリースしました。
どんなことを考えて実際に移行したのか記録として残しておこうと思います。

対戦ゲームの勝敗記録アプリ
みんな使ってね！

■できること
・勝/負　の戦績を記録する
・勝敗にメモを残す
・戦績をゲームタイトルやイベント毎に記録する
・日、週、月ごとの対戦数と勝率をグラフで確認する
・過去にさかのぼって戦績を記録する
・記録した戦績の勝敗を編集する

画面構成

全部で4つの画面を持つ小規模なアプリです。

ゲーム一覧画面
戦績記録画面
分析画面（グラフのライブラリに依存するためリプレースはしませんでした）
設定画面

戦績をグラフで表示する分析画面はグラフ表示ライブラリに大きく依存するためリプレースはしませんでした。

元のアプリの構成

Single Activityの4 Fragment 構成です。
NavigationとFragmentも密接に関わっているのでこのあたりはAndroid Frameworkに任せてしまって
各View（赤文字の部分）をjetpack compose化することに決めました。

いきなり全部やると破綻するし、末端の細かいパーツやUIから作ったほうが楽だなと思いました。

最初にどこから作る？

記録画面がメインとなる画面なのでそこから作り始めました。
一覧の画面からいきなり作っても良いですが、細かいパーツとか先に作っておいたほうがやりやすいかなという予測のもとメインの画面から着手しています。

ボタンから作りました

コードとしてもかんたんでCircleButtonという元のボタンを作って勝ったときのボタンと負けたときのボタンをそれぞれ作っています。


@Composable
fun ResultWinButton(onClick: () -> Unit, modifier: Modifier = Modifier) {
    CircleButton(text = "Win", modifier.size(96.dp), onClick = onClick)
}

@Composable
fun ResultLoseButton(onClick: () -> Unit, modifier: Modifier = Modifier) {
    CircleButton(text = "Lose", modifier.size(96.dp), onClick = onClick)
}

@Composable
private fun CircleButton(
    modifier: Modifier,
    text: String,
    onClick: () -> Unit,
) {
    Button(
        onClick = {
            onClick()
        },
        modifier = modifier,
        shape = CircleShape,
    ) {
        Text(text = text)
    }
}

次にカードを作りました

こちらについてはおおよそ以下の記事にまとめています。

Row/Column方式で作りました。

ダイアログをどうするか問題

ダイアログについてはjetpack composeで書くこともできるのですが、今のままだと状態管理がちょっと手間だなというのと
既存のDialogFragmentそのまま流用できたので画面単位のjetpack compose化に集中しました。

ダークテーマについて

jetpack compose化する前から対応しています。
jetpack composeでもこのようなApplicationTheme上にUIを配置することでダークテーマに対応できます。

基本マテリアルデザインで提供されているデフォルトのカラーを使っています。

@Composable
fun ApplicationTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

CardViewがelevationでSurfaceカラーが変わる？

ダークテーマ上の動作確認をしていてわかりましたがelevationの値によって自動で色が変わるみたいです。

上が8dp,下が16dpのElevationを設定しています。

これはマテリアルデザインガイドラインのダークテーマ、Elevationの節で
高さによって白色透過色がオーバーレイされるという記述があります。

これを再現しているということになります。

デザイン上「カードの色はこれ」というように決まるかもしれませんが、マテリアルデザインのダークテーマ上だと「カードのelevation対して白色のオーバーレイが背景色に加算された色」

ということになるので齟齬が生まれやすいポイントかなと思いました。

背景に対して要素のelevationがどれだけあるかで背景色が決まることを知識として持っておきたいところですね。

style.xmlとJetpackComposeテーマの２つが共存しているということ

めちゃめちゃ混乱しました。
基本的にstyle.xmlの色を使ってくれますが、微妙に想定した色と違ったりして、どこの色を変更したら良いのかわからなくなってきたり。。。

途中でMaterial Degin Componentを使うようにスタイルの変更もしたため
ダイアログのボタンのテキストカラーがColorAccent->ColorPrimaryに変更されていたりでボタンの色が見えなくなっていたり

動作確認しているとポロポロと色が見えない部分があって大変でした。

jetpack composeを利用するにあたって、色定義周りをしっかりしておいたほうが良いなと痛感しました・・・

- Theme.AppCompat.DayNight.NoActionBar
+ Theme.MaterialComponents.DayNight.NoActionBar

    <style name="ThemeOverlay.MyApp.MaterialCalendar" parent="ThemeOverlay.MaterialComponents.MaterialCalendar">
        <item name="buttonBarButtonStyle">@style/Widget.MyApp.Button.TextButton.Dialog
        </item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.MyApp.Button.TextButton.Dialog
        </item>
    </style>

    <style name="Widget.MyApp.Button.TextButton.Dialog" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">@color/colorAccent</item>
    </style>

ViewModelを変更することはなかった

ViewModelに関しては特に何も変更せずにfragment_gaems.xmlが GamesScreen()というコンポーザブル関数になるだけでほぼ完結しました。
しっかりとMVVMで作られているプレジェクトであれば結構すんなり置き換えできるかもしれないなと思いました。

Experimental APIは使わなかった

アプリ自体がリスト表示、カード、ボタンとかの標準的な使い方のみだった為だと思います。
プロダクトに導入するにあたってはリスト表示するような簡単な画面からやり始めるのが良いのかなと思います。

今後の展望

ダイアログ周りもjetpack compose化していきたい
Navigationはそのまま残すかも
jetpack compose関係ないけどデータ移行機能追加したい
jetpack compose関係ないけどworlのweb版作りたい

まとめ

個人アプリをjetpack composeで書き直してリリースした
どこをjetpack composeにするか
- navigationとFragmentはそのまま残して fragment_{screen_name}.xml を置き換えるようにした
簡単なパーツから徐々に画面を構成していった
ViewModelはほとんど修正せずにxmlコードが激減した
みんな使ってみてね！