[Android - Kotlin] Jetpack Compose - 7

민채·2024년 2월 20일

Android - Codelab

목록 보기

7/10

NavController: 대상(즉, 앱의 화면) 간 이동을 담당
NavGraph: 이동할 컴포저블 대상을 매핑
NavHost: NavGraph의 현재 대상을 표시하는 컨테이너 역할을 하는 컴포저블

대상 경로 정의

enum class를 사용하는 것이 좋음

enum class CupcakeScreen() {
    Start,
    Flavor,
    Pickup,
    Summary
}

NavHost

지정된 경로를 기반으로 다른 컴포저블 대상을 표시하는 컴포저블
-navController
- NavHostController 클래스의 인스턴스
- navigate() 메서드를 호출하여 다른 대상으로 이동하는 등의 방식으로 화면 간에 이동하는 데 이 객체를 사용할 수 있음
- 구성 가능한 함수에서 rememberNavController()를 호출하여 NavHostController를 가져올 수 있음
startDestination : 앱에서 NavHost를 처음 표시할 때 기본적으로 표시되는 대상을 정의하는 문자열 경로

사용법

NavHost의 함수 내에서 composable() 함수를 호출
- route : 경로 이름에 해당하는 문자열로 모든 고유 문자열을 사용할 수 있음, 위에서 만든 enum의 상수 이름 속성을 사용
- content : 특정 경로에 표시할 컴포저블을 호출할 수 있음

 NavHost(navController = navController,
 	startDestination = CupcakeScreen.Start.nameation = CupcakeScreen.Start.name`ation = CupcakeScreen.Start.nameation = CupcakeScreen.Start.name`,
	modifier = Modifier.padding(innerPadding)
) {
	composable(route = CupcakeScreen.Start.name) {
		StartOrderScreen(
			quantityOptions = DataSource.quantityOptions,
			modifier = Modifier
				.fillMaxSize()
                .padding(dimensionResource(R.dimen.padding_medium))
			)
	}

    composable(route = CupcakeScreen.Flavor.name) {
		val context = LocalContext.current

		SelectOptionScreen(
			subtotal = uiState.price,
			options = DataSource.flavors.map { id -> 				onSelectionChanged = { viewModel.setFlavor(it) },
			modifier = Modifier.fillMaxHeight()
		)
	}

	composable(route = CupcakeScreen.Pickup.name) {
		SelectOptionScreen(
			subtotal = uiState.price,
			options = uiState.pickupOptions,
   			onSelectionChanged = { viewModel.setDate(it) },
			modifier = Modifier.fillMaxHeight()
		)
	}

	composable(route = CupcakeScreen.Summary.name) {
		OrderSummaryScreen(
			orderUiState = uiState,
            modifier = Modifier.fillMaxHeight()
		)
	}

}

경로 간 이동

각 화면으로 이동하고 이전 화면으로 이동하는 부분

https://developer.android.com/codelabs/basic-android-kotlin-compose-navigation?hl=ko&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-4-pathway-2%3Fhl%3Dko%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-navigation#4

다른 앱으로 이동

기존에 자주 사용하던 Intent를 사용하면 된다!

// 다른 앱으로 이동
private fun shareOrder(context: Context, subject: String, summary: String) {
    val intent = Intent(Intent.ACTION_SEND).apply {
        type = "text/plain"
        putExtra(Intent.EXTRA_SUBJECT, subject)
        putExtra(Intent.EXTRA_TEXT, summary)
    }

    context.startActivity(
        Intent.createChooser(
            intent,
            context.getString(R.string.new_cupcake_order)
        )
    )
}

전체 코드

https://github.com/MinchaeKwon/AndroidCompose/tree/master/Chapter4/Cupcake

실행 화면

Compose에서는 상태 변경이 발생하면 화면이 재구성됨 -> 간단한 조건문으로 화면을 변경할 수 있음
ViewModel을 사용하면 쉽게 이동 가능

사용법

시작 코드 가져오기

https://github.com/google-developer-training/basic-android-kotlin-compose-training-reply-app/tree/starter

ReplyHomeScreen.kt

ReplyHomeScreen의 매개변수 중 하나인 상태 객체 replyUiState 이용
replyUiState의 변수인 isShowingHomepage를 이용
replyUiState 객체의 isShowingHomepage 속성이 변경되면 ReplyHomeScreen 컴포저블이 재구성되고 if/else 문이 런타임에 다시 실행
isShowingHomepage는 ViewModel 클래스의 resetHomeScreenStates(), updateDetailsScreenStates() 메서드 안에서 값이 바뀜

// 사용자가 홈 화면에 있을 때는 홈 화면의 콘텐츠를 표시하고 사용자가 홈 화면에 있지 않을 때는 세부정보 화면의 콘텐츠를 표시
    if (replyUiState.isShowingHomepage) {
        ReplyAppContent(
            replyUiState = replyUiState,
            onTabPressed = onTabPressed,
            onEmailCardPressed = onEmailCardPressed,
            navigationItemContentList = navigationItemContentList,
            modifier = modifier
        )
    } else {
        ReplyDetailsScreen(
            replyUiState = replyUiState,
            onBackPressed = onDetailScreenBackPressed,
            modifier = modifier
        )
    }