こんにちは、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を置き換えるようにした
- navigationとFragmentはそのまま残して
-
簡単なパーツから徐々に画面を構成していった
-
ViewModelはほとんど修正せずにxmlコードが激減した
-
みんな使ってみてね！