【Android開発】Kotlin入門 Navigationで画面遷移パターン（Jetpack Compose）の構築

はじめに

Android開発において、画面遷移はユーザー体験を向上させるために重要な要素です。Jetpack ComposeとNavigationコンポーネントを組み合わせることで、直感的で柔軟な画面遷移を実現できます。本記事では、Kotlinを用いてJetpack ComposeとNavigationを活用した画面遷移パターンの構築方法について詳しく解説します。

Navigationコンポーネントの基本

Navigationコンポーネントの導入

まずは、Navigationコンポーネントをプロジェクトに追加する方法を説明します。必要な依存関係をbuild.gradleファイルに追加します。

dependencies {
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
}

この依存関係を追加することで、Navigationコンポーネントを使用する準備が整います。

基本的な設定

Navigationコンポーネントを使用するためには、NavHostを設定する必要があります。以下は、基本的なNavHostの設定例です。

import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
    }
}

この例では、NavHostを使用して、homeとdetailsという2つの画面を定義しています。

画面遷移の実装

基本的な画面遷移

画面遷移を実装するためには、NavControllerを使用して目的地にナビゲートします。以下のコードは、ボタンをクリックして別の画面に遷移する例です。

@Composable
fun HomeScreen(navController: NavHostController) {
    Button(onClick = { navController.navigate("details") }) {
        Text("Go to Details")
    }
}

@Composable
fun DetailsScreen(navController: NavHostController) {
    Column {
        Text("This is the Details Screen")
        Button(onClick = { navController.navigate("home") }) {
            Text("Back to Home")
        }
    }
}

この例では、ホーム画面から詳細画面への遷移と、詳細画面からホーム画面への戻りを実装しています。

パラメータの渡し方

画面遷移時にパラメータを渡すことも可能です。以下は、パラメータを渡す方法の例です。

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details/{itemId}") { backStackEntry ->
            DetailsScreen(navController, backStackEntry.arguments?.getString("itemId"))
        }
    }
}

@Composable
fun HomeScreen(navController: NavHostController) {
    val itemId = "12345"
    Button(onClick = { navController.navigate("details/$itemId") }) {
        Text("Go to Details with Item ID")
    }
}

@Composable
fun DetailsScreen(navController: NavHostController, itemId: String?) {
    Column {
        Text("Details for item: $itemId")
        Button(onClick = { navController.navigate("home") }) {
            Text("Back to Home")
        }
    }
}

この例では、ホーム画面から詳細画面にアイテムIDを渡し、詳細画面でそのIDを表示しています。

ナビゲーショングラフの拡張

複数のパラメータ

複数のパラメータを渡す場合の方法について説明します。以下の例では、2つのパラメータを詳細画面に渡しています。

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details/{itemId}/{itemName}") { backStackEntry ->
            val itemId = backStackEntry.arguments?.getString("itemId")
            val itemName = backStackEntry.arguments?.getString("itemName")
            DetailsScreen(navController, itemId, itemName)
        }
    }
}

@Composable
fun HomeScreen(navController: NavHostController) {
    val itemId = "12345"
    val itemName = "SampleItem"
    Button(onClick = { navController.navigate("details/$itemId/$itemName") }) {
        Text("Go to Details with Item ID and Name")
    }
}

@Composable
fun DetailsScreen(navController: NavHostController, itemId: String?, itemName: String?) {
    Column {
        Text("Details for item: $itemId, Name: $itemName")
        Button(onClick = { navController.navigate("home") }) {
            Text("Back to Home")
        }
    }
}

この例では、アイテムIDとアイテム名の両方を詳細画面に渡し、それらを表示しています。

ナビゲーションのアニメーション

Jetpack Composeでは、ナビゲーションにアニメーションを追加することも可能です。以下は、画面遷移にアニメーションを追加する例です。

import androidx.navigation.NavOptionsBuilder
import androidx.navigation.compose.navArgument

@Composable
fun MyApp() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details/{itemId}") { backStackEntry ->
            DetailsScreen(navController, backStackEntry.arguments?.getString("itemId"))
        }
    }
}

@Composable
fun HomeScreen(navController: NavHostController) {
    val itemId = "12345"
    Button(onClick = {
        navController.navigate("details/$itemId") {
            anim {
                enter = android.R.anim.slide_in_left
                exit = android.R.anim.slide_out_right
                popEnter = android.R.anim.fade_in
                popExit = android.R.anim.fade_out
            }
        }
    }) {
        Text("Go to Details with Animation")
    }
}

@Composable
fun DetailsScreen(navController: NavHostController, itemId: String?) {
    Column {
        Text("Details for item: $itemId")
        Button(onClick = { navController.navigate("home") }) {
            Text("Back to Home")
        }
    }
}

この例では、画面遷移時にスライドイン・スライドアウトのアニメーションを適用しています。

高度なナビゲーションパターン

ナビゲーションの状態管理

ナビゲーションの状態を管理するために、ViewModelと組み合わせる方法について説明します。以下は、ViewModelを使用してナビゲーションの状態を管理する例です。

class MainViewModel : ViewModel() {
    private val _selectedItem = MutableLiveData<String>()
    val selectedItem: LiveData<String> get() = _selectedItem

    fun selectItem(item: String) {
        _selectedItem.value = item
    }
}

@Composable
fun MyApp(viewModel: MainViewModel = viewModel()) {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController, viewModel) }
        composable("details") { DetailsScreen(navController, viewModel) }
    }
}

@Composable
fun HomeScreen(navController: NavHostController, viewModel: MainViewModel) {
    val item = "SampleItem"
    Button(onClick = {
        viewModel.selectItem(item)
        navController.navigate("details")
    }) {
        Text("Go to Details with ViewModel")
    }
}

@Composable
fun DetailsScreen(navController: NavHostController, viewModel: MainViewModel) {
    val selectedItem by viewModel.selectedItem.observeAsState()
    Column {
        Text("Details for item: $selectedItem")
        Button(onClick = { navController.navigate("home") }) {
            Text("Back to Home")
        }
    }
}

この例では、ViewModelを使用して選択されたアイテムの状態を管理し、ナビゲーション間で共有しています。

まとめ

KotlinとJetpack Composeを使用したNavigationコンポーネントの画面遷移は、直感的で強力な方法です。基本的な設定から高度なナビゲーションパターンまでを理解することで、複雑なアプリケーションでも効率的に画面遷移を実装できます。