91.発車予定画面の作成(1)

発車予定を表示する画面を:feature:depart:homeモジュールに作成します。

uiモジュールの作成と同様に、トップディレクトリで:feature:depart:homeを作成し、javaディレクトリ名の変更を行います。

ViewModelの準備

各feature画面は画面の表示データがありますのでViewModelを使用します。

Hiltと連携してViewModelを使用するためhilt-navigation-composeを導入します。
※navigation-composeは必要ありません。

バージョンカタログファイルにhilt-navigation-composeの定義を追記します。

[versions]
   :
hilt-navigation-compose = "1.3.0"   # https://mvnrepository.com/artifact/androidx.hilt/hilt-navigation-compose
   :
lifecycleRuntimeKtx = "2.9.4"
lifecycle = "2.9.4"
   :
[libraries]
   :
hilt-navigation-compose = { module = "androidx.hilt:hilt-navigation-compose", version.ref = "hilt-navigation-compose" }
   :
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
androidx-lifecycle-runtime-ktx = { module = "androidx.lifecycle:lifecycle-runtime-ktx", version.ref = "lifecycle" }
androidx-lifecycle-viewmodel-compose = { module = "androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "lifecycle" }
   :

3行目: コメント部分のURLを参照して、Kotlinバージョンに適した最新安定バージョンを指定します。
5行目～6行目: lifecycleRuntimeKtxを他のlifecycleライブラリでも使い、バージョンを統一したいのでlifecycleに変更します。
10行目: HiltのNavigation Compose依存ライブラリを追記します。
12行目～13行目: lifecycleRuntimeKtxをlifecycleに変更します。; 併せて、module表記に変更します。
14行目: ViewModelの依存ライブラリを追記します。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

Composite Buildへの対応

:core:uiモジュールで作成したLibraryConfigurePlugin.ktを使用してもいいのですが、画面が複数ありますので、画面用のビルドプラグインを作成することにします。

/build-logic/src/main/kotlin内に画面ライブラリモジュールのbuild.gradle.ktsで使用するビルドプラグインを作成します。
ファイル名をFeatureConfigurePlugin.ktにしています。

package jp.co.progress_llc.buildlogic

import com.android.build.api.dsl.LibraryExtension
import org.gradle.api.Plugin
import org.gradle.api.Project
import org.gradle.kotlin.dsl.configure
import org.gradle.kotlin.dsl.dependencies

class FeatureConfigurePlugin: Plugin<Project> {
  override fun apply(project: Project) = with(project) {
    with(pluginManager) {
      apply("com.android.library")
      apply("org.jetbrains.kotlin.android")
      apply("com.google.devtools.ksp")
      apply("com.google.dagger.hilt.android")
      apply("org.jetbrains.kotlin.plugin.compose")
    }
    extensions.configure<LibraryExtension> {
      configureCommonExtension(this)
      defaultConfig.consumerProguardFiles("consumer-rules.pro")
      buildTypes {
        release {
          isMinifyEnabled = false
          proguardFiles(
            getDefaultProguardFile("proguard-android-optimize.txt"),
            "proguard-rules.pro"
          )
        }
      }
      buildFeatures.compose = true
    }
    dependencies {
      add("implementation", project.libs().findLibrary("androidx-core-ktx").get())
      add("implementation", project.libs().findLibrary("androidx-appcompat").get())
      add("implementation", project.libs().findLibrary("material").get())
      add("implementation", project.libs().findLibrary("hilt-android").get())
      add("implementation", project.libs().findLibrary("hilt-navigation-compose").get())
      add("implementation", project.libs().findLibrary("androidx-lifecycle-runtime-ktx").get())
      add("implementation", project.libs().findLibrary("androidx-lifecycle-viewmodel-compose").get())
      add("implementation", platform(project.libs().findLibrary("compose-bom").get()))
      add("implementation", project.libs().findLibrary("compose-ui").get())
      add("implementation", project.libs().findLibrary("compose-material").get())
      add("implementation", project.libs().findLibrary("androidx-ui-tooling-preview").get())
      add("ksp", project.libs().findLibrary("hilt-compiler").get())
      add("debugImplementation", platform(project.libs().findLibrary("compose-bom").get()))
      add("debugImplementation", project.libs().findLibrary("androidx-ui-tooling").get())
    }
  }
}

12行目～13行目: Featureモジュールで使用するプラグインを定義しています。; /core/ui/build.gradle.kts内のpluginsブロックを参照して指定します。
14行目: KSPのプラグインを定義しています。
15行目: Hiltのプラグインを定義しています。
16行目: Jetpack Composeのプラグインを定義しています。
19行目: ConfigureExtension.ktで作成した全モジュールの共通定義を呼び出しています。
20行目: /feature/settings/build.gradle.kts内のandroid/defaultConfigブロックを参照して指定します。; minSdkはConfigureExtension.ktで定義済です。; testInstrumentationRunnerはビルドプラグインでは定義しません。
21行目～29行目: /feature/settings/build.gradle.kts内のandroid/buildTypesブロックを参照して指定します。
30行目: Jetpack Composeを有効にします。
33行目～35行目: dependenciesブロックの依存ライブラリを定義しています。; /feature/train/build.gradle.kts内のdependenciesブロックを参照して指定します。; テスト関連の依存ライブラリはビルドプラグインでは定義しません。; テストの必要に応じて、各モジュールのbuild.gradle.ktsで定義します。; バージョンカタログを参照しています。
36行目～37行目: Hiltの依存ライブラリをバージョンカタログを参照して定義しています。
38行目～43行目: Jetpack Composeの依存ライブラリをバージョンカタログを参照して定義しています。
44行目: kspの依存ライブラリをバージョンカタログを参照して定義しています。
45行目～46行目: テスト関連の依存ライブラリですが、画面作成時のプレビューで必要です。

FeatureConfigurePluginの適用

作成したビルドプラグインをモジュールのbuild.gradle.ktsで使用できるようにbuild-logic直下のbuild.gradle.ktsに追記します。

   :
gradlePlugin {
   :
  plugins {
    register("FeatureConfigurePlugin") {
      id = "build.logic.feature.configure"
      implementationClass = "jp.co.progress_llc.buildlogic.FeatureConfigurePlugin"
    }
  }
}

dependencies {
   :

5行目: 任意の名前で名称を定義しています。
6行目: 任意の名前でプラグインのidを定義しています。
7行目: プラグインを実装しているクラスを指定します。; /build-logic/src/main/kotlin内に作成したFeatureConfigurePlugin.ktで定義しているクラス名です。

追記後、『Sync Now』で内容をプロジェクトに反映させます。

:feature:depart:homeモジュールのbuild.gradle.ktsに作成したビルドプラグインを適用します。

plugins {
  alias(libs.plugins.android.library)
  alias(libs.plugins.kotlin.android)
  id("build.logic.feature.configure")
}

android {
  namespace = "jp.co.progress_llc.portal.feature.depart.home"
  compileSdk {
    version = release(36)
  }

  defaultConfig {
    minSdk = 28

    testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
    consumerProguardFiles("consumer-rules.pro")
  }

  buildTypes {
    release {
      isMinifyEnabled = false
      proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
    }
  }
  compileOptions {
    sourceCompatibility = JavaVersion.VERSION_11
    targetCompatibility = JavaVersion.VERSION_11
  }
  kotlinOptions {
    jvmTarget = "11"
  }
}

dependencies {

  implementation(libs.androidx.core.ktx)
  implementation(libs.androidx.appcompat)
  implementation(libs.material)
  testImplementation(libs.junit)
  androidTestImplementation(libs.androidx.junit)
  androidTestImplementation(libs.androidx.espresso.core)
}

2行目～3行目、9行目～15行目、17行目～32行目、37行目～39行目: ビルドプラグインで定義しているので削除します。
3行目: /build-logic/build.gradle.ktsで定義したビルドプラグインのidを指定します。
16行目、40行目～42行目: テストを行うときまで削除します。

適用後、『Sync Now』で内容をプロジェクトに反映させます。

UI(presentation)層の作成

UI層としてpresentationディレクトリを作成します。

表示画面の作成

発車予定画面として、暫定的にViewModelのないDepartHomeScreen.ktを作成します。

package jp.co.progress_llc.portal.feature.depart.home.presentation

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DepartHomeScreen(
) {
  var expanded by remember { mutableStateOf(false) }

  Column(
    modifier = Modifier
      .fillMaxSize()
      .background(MaterialTheme.colorScheme.background)
      .padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    Text(
      text = "発車予定",
      style = MaterialTheme.typography.headlineMedium
    )

    ExposedDropdownMenuBox(
      expanded = expanded,
      onExpandedChange = { expanded = !expanded }
    ) {
      OutlinedTextField(
        value = "",
        onValueChange = {},
        readOnly = true,
        label = { Text("経路を選択") },
        trailingIcon = {
          ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        },
        modifier = Modifier
          .fillMaxWidth()
      )

      ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
      ) {
        // 新規経路オプション
        DropdownMenuItem(
          text = {
            Text(
              text = "編集/新規経路...",
              color = MaterialTheme.colorScheme.primary
            )
          },
          onClick = {
            expanded = false
          }
        )
      }
    }
  }
}

@Preview(showBackground = true)
@Composable
fun DepartHomeScreenPreview() {
  DepartHomeScreen()
}

11行目: ドロップダウンリストのデフォルトスタイルを設定するExposedDropdownMenuDefaultsを使う際は必要になります。
29行目～62行目: ドロップダウンリストを表示します。
45行目～61行目: 追加で表示するドロップダウン項目を定義しています。
66行目～70行目: Android Studioで画面のプレビューを表示するための関数を定義しています。; なくても構いません。

ViwModelのインターフェースを作成

ViwModelのインターフェースDepartHomeUiLogic.ktを作成します。

package jp.co.progress_llc.portal.feature.depart.presentation

import jp.co.progress_llc.portal.core.data.Route
import kotlinx.coroutines.flow.StateFlow

interface DepartUiLogic {
  val routes: StateFlow<List<Route>>
}

7行目: 画面側で参照するViewModelのUiStateを定義しています。

本番用ViwModelを作成

本番用のViewModelとしてDepartViewModel.ktを作成します。

package jp.co.progress_llc.portal.feature.depart.presentation

import javax.inject.Inject
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import dagger.hilt.android.lifecycle.HiltViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.launch
import jp.co.progress_llc.portal.feature.depart.repository.DepartRepositoryImpl
import jp.co.progress_llc.portal.core.data.Route

@HiltViewModel
class DepartViewModel @Inject constructor(
  private val departRepositoryImpl: DepartRepositoryImpl
) : ViewModel(), DepartUiLogic {

  private val _routes = MutableStateFlow<List<Route>>(emptyList())
  override val routes: StateFlow<List<Route>> = _routes.asStateFlow()

  init {
    loadRoutes()
  }

  private fun loadRoutes() {
    viewModelScope.launch {
      try {
        val routeList = departRepositoryImpl.getAllRoute()
        _routes.value = routeList
      } catch (e: Exception) {
        _routes.value = emptyList()
      }
    }
  }
}

14行目～15行目: DI(Hilt)の注入対象ViewModelであることを定義しています。
17行目: ViwModelのインターフェースを実装します。
19行目: 更新可能な非同期(MutableStateFlow)のデータストリームを定義しています。
20行目: 外部に対して読み取り専用(StateFlow)のデータストリームをインターフェースを実装して提供しています。
26行目～35行目: MutableStateFlowデータストリームにRouteレコードを全件読み込みます。

プレビュー用ViwModelを作成

プレビュー用のViewModelが本番パッケージに含まれないようするため、debugソースセットを新規に作成します。

debugソースセット内に、プレビュー用のViewModelとしてFakeDepartViewModel.ktを作成します。

package jp.co.progress_llc.portal.feature.depart.presentation

import jp.co.progress_llc.portal.core.data.Route
import kotlinx.coroutines.flow.MutableStateFlow

class FakeDepartViewModel : DepartUiLogic {
  override val routes = MutableStateFlow<List<Route>>(emptyList())
}

6行目: ViwModelのインターフェースを実装します。
7行目: 外部に対して読み取り専用(StateFlow)のデータストリームをインターフェースを実装して提供しています。; 空のList<Route>を提供しています。

表示画面の作成

発車予定画面として、DepartHomeScreen.ktを作成します。

package jp.co.progress_llc.portal.feature.depart.presentation

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import jp.co.progress_llc.portal.core.data.Route

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DepartScreen(
  ui: DepartUiLogic
) {
  val routes by ui.routes.collectAsState()
  var expanded by remember { mutableStateOf(false) }
  var selectedRoute by remember { mutableStateOf<Route?>(null) }

  Column(
    modifier = Modifier
      .fillMaxSize()
      .padding(16.dp),
    verticalArrangement = Arrangement.spacedBy(16.dp)
  ) {
    Text(
      text = "発車予定",
      style = MaterialTheme.typography.headlineMedium
    )

    ExposedDropdownMenuBox(
      expanded = expanded,
      onExpandedChange = { expanded = !expanded }
    ) {
      OutlinedTextField(
        value = "",
        onValueChange = {},
        readOnly = true,
        label = { Text("経路を選択") },
        trailingIcon = {
          ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
        },
        modifier = Modifier.fillMaxWidth()
      )

      ExposedDropdownMenu(
        expanded = expanded,
        onDismissRequest = { expanded = false }
      ) {
        DropdownMenuItem(
          text = {
            Text(
              text = "編集/新規経路...",
              color = MaterialTheme.colorScheme.primary
            )
          },
          onClick = { }
        )
      }
    }
  }
}

@Preview(showBackground = true)
@Composable
fun DepartScreenPreview() {
  DepartScreen(ui = FakeDepartViewModel())
}

11行目: ドロップダウンリストのデフォルトスタイルを設定するExposedDropdownMenuDefaultsを使う際は必要になります。
31行目～60行目: ドロップダウンリストを表示します。
50行目～58行目: 追加で表示するドロップダウン項目を定義しています。
64行目～68行目: Android Studioで画面のプレビューを表示するための関数を定義しています。; なくても構いません。

リポジトリ層の作成

テーブルのDAO内には、テーブルを更新するインターフェースが含まれています。
:feature:departモジュールでは、テーブルを更新しませんので、インターフェースを隠蔽した方が安全です。

リポジトリ層を作成して実現します。

repositoryディレクトリ(新規に作成します)内にDepartRepositoryImpl.ktを作成します。
:feature:departモジュール内だけで使用し、ロジックらしきものがないのでインターフェース定義は作成しません。

package jp.co.progress_llc.portal.feature.depart.repository

import javax.inject.Singleton
import javax.inject.Inject
import jp.co.progress_llc.portal.core.data.Route
import jp.co.progress_llc.portal.core.data.repository.RouteRepository

/**
 * 発車予定画面専用のRouteリポジトリ実装
 * 発車予定画面固有のビジネスロジックを提供
 */
@Singleton
class DepartRepositoryImpl @Inject constructor(
  private val routeRepository: RouteRepository,
) {
  /**
   * すべてのRouteを取得
   */
  suspend fun getAllRoute(): List<Route> {
    return routeRepository.getAllRoute()
  }
}

12行目～13行目: DI(Hilt)の注入対象であることを定義しています。

目次

91.発車予定画面の作成(1)

ViewModelの準備

Composite Buildへの対応

FeatureConfigurePluginの適用

UI(presentation)層の作成

表示画面の作成

ViwModelのインターフェースを作成

本番用ViwModelを作成

プレビュー用ViwModelを作成

表示画面の作成

リポジトリ層の作成