[Android Compose] 버튼의 onClick으로 화면 이동하는 법

바텀 네비게이션 바가 아니라 버튼을 눌렀을 때 화면을 이동하는 방법을 확인한다.

바텀 네비게이션 바로 화면 이동을 구현한 코드와 같은 코드를 쓰기 때문에 세세한 코드는 이전 포스팅을 참고한다.

 

https://onlyfor-me-blog.tistory.com/764

[Android Compose] 컴포즈 화면 이동 구현하는 법

 

아래는 전체 예시 코드다.

 

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.composepractice.ui.theme.ComposePracticeTheme

class ButtonActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposePracticeTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize()
                ) { innerPadding ->
                    Navigation()
                }
            }
        }
    }

    @Composable
    fun Navigation() {
        val navController = rememberNavController()
        NavHost(navController = navController, startDestination = Screen.Home.route) {
            composable(route = Screen.Home.route) { HomeScreen(navController) }
            composable(route = Screen.Profile.route) { ProfileScreen() }
        }
    }

    @Composable
    fun HomeScreen(navController: NavHostController) {
        var visible by remember { mutableStateOf(true) }
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Home")
            Button(
                onClick = {
                    navController.navigate(Screen.Profile.route)
                    visible = false
                },
                modifier = Modifier.alpha(if (visible) 1f else 0f)
            ) {
                Text("Profile로 이동")
            }
        }
    }

    @Composable
    fun ProfileScreen() {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center,
        ) {
            Text("Profile")
        }
    }

}

 

앱을 실행하면 아래처럼 작동한다.

 

 

HomeScreen에서 ProfileScreen으로 넘어가기 위해 onClick에 어떤 함수를 사용한 걸 볼 수 있다.

 

Button(
    onClick = {
        navController.navigate(Screen.Profile.route)
        visible = false
    },
    modifier = Modifier.alpha(if (visible) 1f else 0f)
) {
    Text("Profile로 이동")
}

 

NavController.navigate()를 사용하고 매개변수로 이동할 화면의 route 값을 넘기고 있다. 디벨로퍼의 navigate() 문서는 아래와 같다.

 

https://developer.android.com/reference/androidx/navigation/NavController#navigate(kotlin.Any,androidx.navigation.NavOptions,androidx.navigation.Navigator.Extras)

NavController  |  Android Developers

현재 네비게이션 그래프에 있는 객체에서 route로 이동한다. 유효하지 않은 경로가 지정되면 IllegalArgumentException이 발생한다. 대상 NavDestination은 KClass의 route로 생성된 것이어야 한다. NavOptions.restoreState에 NavOptions pass가 true면 route의 일부로 여기에 전달된 모든 매개변수는 복원된 매개변수로 재정의된다

@MainThread
public final void <T extends Object> navigate(
    @NonNull T route,
    NavOptions navOptions,
    Navigator.Extras navigatorExtras
)

 

route는 반드시 String이어야 할 필요가 없다. navOptions, navigatorExtras는 필요하다면 적절하게 정의해서 사용한다.

참고로 디벨로퍼에서 네비게이션 그래프를 설계하는 것에 대한 참고문서가 있으니 이걸 바탕으로 설계하면 좋을 것이다.

 

https://developer.android.com/guide/navigation/design?hl=ko

탐색 그래프 설계  |  Android Developers