탐색 그래프 없이 화면 변경

이전에 작성한 글에서 NavHostController를 사용해 한 화면에서 다른 화면으로 이동하는 방법을 알아봤다.

https://small-stepping.tistory.com/926

Compose Navigation 경로 정의 및 NavHostController

 

Compose를 사용하면 런타임 변경 가능 상태를 사용하여 간단한 조건문으로도 화면을 변경시킬 수 있다. 이러한 방법들은 두 화면 간에만 전환하는 등의 작은 애플리케이션에서 사용하기 좋은 방식이다.

 

 

상태 변경을 사용하여 화면 변경하기

Compose에서는 상태 변경이 일어나면 화면이 재구성된다. 이러한 특성을 사용하여 간단한 조건문에 상태변경을 감지시키고 내부 컨텐츠로 화면 변경을 넣으면 되는 것이다.

 

예를들어 조건문을 사용해 사용자가 메인 홈 화면에 있을 때 홈 화면의 컨텐츠를 표시하고, 사용자가 홈 화면에 있지 않을 때에는 세부정보 화면을 표시하는 것이다.

 

@Composable
fun ReplyHomeScreen(
    replyUiState: ReplyUiState,
    onTabPressed: (MailboxType) -> Unit = {},
    onEmailCardPressed: (Int) -> Unit = {},
    onDetailScreenBackPressed: () -> Unit = {},
    modifier: Modifier = Modifier
) {

...

    if (replyUiState.isShowingHomepage) {
        ReplyAppContent(
            replyUiState = replyUiState,
            onTabPressed = onTabPressed,
            onEmailCardPressed = onEmailCardPressed,
            navigationItemContentList = navigationItemContentList,
            modifier = modifier

        )
    } else {
        ReplyDetailsScreen(
            replyUiState = replyUiState,
            onBackPressed = onDetailScreenBackPressed,
            modifier = modifier
        )
    }
}

 

예를들어 위와 같은 HomeScreen 컴포저블이 존재할 때, 컨텐츠 부분에 나온 if 조건문 처럼 상태에 따라 표시되게끔 AppContent를 래핑하면 된다.

 

replyUiState.isShowingHomepage가 true라면 ReplyAppContent를 띄울 것이고, false라면 ReplyDetailsScreen 화면을 띄울 것이다.

 

적용된 예시

 

이렇게 상태와 컴포저블을 사용해 NavHostController 없이 여러 화면 간의 탐색을 지원할 수 있다.

하지만 NavHost를 사용했을 때 장점으로는 이전 화면의 방향이 백스텍에 저장된다는 것이었다. 저장된 화면을 사용하면 호출 시 시스템 뒤로 버튼을 사용해 이전화면으로 쉽게 이동할 수 있었는데, 위와 같은 방식은 NavHost를 사용하지 않기 때문에 뒤로 버튼을 수동을 추가해야한다.

 

 

맞춤 뒤로가기 핸들러 만들기

 

다음과 같이 뒤로 버튼을 추가해야할 화면의 컴포저블에 매개변수를 넣고 BackHandler를 추가하면 된다.

@Composable
fun ReplyDetailsScreen(
    replyUiState: ReplyUiState,
    onBackPressed: () -> Unit = {},
    modifier: Modifier = Modifier
) {
    BackHandler {
        onBackPressed()
    }

    /..
}

@SuppressWarnings(value = {"MissingJvmstatic"})
@Composable
public fun BackHandler(
    enabled: Boolean = true,
    onBack: () -> Unit
): Unit

 

BackHandler는 JetpackCompose 내장 함수로 뒤로가기 이벤트가 감지되었을 때, enabled 속성이 true라면 onBack()을 실행한다. BackHandelr는 기본적으로 enabled 속성이 true인 상태이며, 이를 제어하면 뒤로가기를 원하는 상황에서 이뤄질 수 있도록 조절할 수가 있다.

 

간단하게 예를들어, 화면이 보여지고 있을때 뒤로가기 이벤트가 발생하면 그 땐 뒤로가야하지만, 화면이 보여지고 있지 않을때 뒤로가기 이벤트가 발생하면 화면은 보여지고 있지 않기 때문에 뒤로갈 필요가 없는 상황이라든지.

 

이러한 경우들 또한 상태를 사용하여 BackHandler의 enabled에 추가하면 된다.