#70 Jetpack ComposeでToDoアプリを作る - ScaffoldとTopAppBar

2021 / 11 / 14

HiltとViewModelの準備ができたので、ようやく各画面の実装に入れます。

Scaffold

Scaffoldはアプリのベースとなるものを提供してくれるComposableです。画面にTopAppBarを表示したり、下ナビゲーションを表示したりする際には使うとよいでしょう。

今回は起動直後の画面に追加してみます。

@Composable
fun MainScreen(
  navController: NavController,
  viewModel: MainViewModel,
) {
  Scaffold(
    topBar = { MainTopBar() },
    floatingActionButton = { MainFAB(navController) }
  ) {
    // ToDoのリスト表示をここに書く
  }
}

起動直後の画面ではTopBarとFABを表示したいので、Scaffoldの該当パラメータでComposableを指定します。

MainToolBarはTopAppBarを表示するのみです。タイトルとしてアプリ名を表示してみます。

@Composable
fun MainTopBar() {
  TopAppBar(
    title = {
      Text(stringResource(id = R.string.app_name))
    },
  )
}

MainFABはFloatingActionButtonを表示するのみです。FAB内のアイコンはIconを使うとリソースを追加せずに済みます。

@Composable
fun MainFAB(navController: NavController) {
  FloatingActionButton(onClick = {
    // 作成画面へ画面遷移
    navController.navigate("create")
  }) {
    Icon(Icons.Filled.Add, "Add")
  }
}

FABがタップされたらToDo作成画面に遷移させたいので、onClick()内でNavControllerのnavigate()を呼びます。引数には遷移先となるルート名を指定します。

実行してみる

ここまで作成したらエミュレーター/実機で実行してみます。

ビルドは通るのですが、実行しようとすると落ちます。Logcatを見てみます（適度に改行をいれています）。

java.lang.RuntimeException: Unable to instantiate application com.mokelab.compose.todo.ToDoApplication
  package com.mokelab.compose.todo: java.lang.ClassNotFoundException: Didn't find class 
  "com.mokelab.compose.todo.ToDoApplication" on path: DexPathList[[zip file
  "/data/app/~~kRtLL5Kf7flCSsYo5QMvWg==/com.mokelab.compose.todo-UIxaqvhfTaNcTxy4_gxxdw==/base.apk"],
  nativeLibraryDirectories=[/data/app/~~kRtLL5Kf7flCSsYo5QMvWg==/
  com.mokelab.compose.todo-UIxaqvhfTaNcTxy4_gxxdw==/lib/x86_64, /system/lib64, /system_ext/lib64]]

どうもHiltがKSPに対応していないのが原因のようです。すいません。。。

仕方ないのでkaptをapp/build.gradleに追加します。

plugins {
  ...
  id 'dagger.hilt.android.plugin'
  // kaptを追加
  id 'kotlin-kapt'
}

そしてHiltでKSPを使っていた箇所をkaptにします。

dependencies {
  ...
  implementation "com.google.dagger:hilt-android:2.36"
  // 仕方ないのでkaptにする
  kapt "com.google.dagger:hilt-android-compiler:2.36"
  implementation 'androidx.hilt:hilt-navigation-compose:1.0.0-alpha03'
}

ビルドして実行すると、最初の画面が表示されました。右下のFABをタップすると真っ白な作成画面に遷移します。

ここまで作業したものはこちらにあります。