Jetpack Compose Navigation 정리

Navigation 구성요소

Navigation은 크게 3가지 구성요소로 이뤄진다.


NavController: 대상(즉, 앱의 화면) 간 이동을 담당한다. 

NavGraph: 이동할 컴포저블 대상을 매핑을 담당

NavHost: NavGraph의 현재 대상을 표시하는 컨테이너 역할을 하는 컴포저블


NavController

NavController는 Navigation 구성요소의 중심 API로, 스테이트풀(Stateful)이며 앱의 화면과 각 화면 상태를 구성하는 컴포저블의 백 스택을 추적한다. 컴포즈 환경에서 NavController는 rememberNavController()를 이용하여 가져올 수 있다.

val navController = rememberNavController()

rememberNavController()를 호출하여 NavContoller 인스턴스를 생성할 때 유의해야 할 점은 상태 호이스팅(State Hoisting)에 유의해야 한다. 컴포저블 계층 구조에서 NavController를 만드는 위치는 이를 참조해야 하는 모든 컴포저블이 액세스할 수 있는 곳이어야 한다. 이러한 구조가 상태 호이스팅의 원칙을 준수하는 것이다.

왜냐하면 Navigation과 관련된 상태 정보를 스크린과 분리하며, NavController가 생성된 곳에 있는 상태 정보를 여러 스크린이 공유할 수 있기 때문이다.


 

NavGraph

NavGraph는 ID로 가져올 수 있는 NavDestination 노드의 집합이다. NavGraph는 '가상' 대상 역할을 합니다. NavGraph 자체는 백 스택에 나타나지 않지만 NavGraph로 이동하면 시작 대상이 백 스택에 추가된다. 새로운 NavGraph는 대상을 추가하고 시작 경로을 설정할 때까지 유효하지 않다. 대상을 추가하는 방법은 NavGraphBuilder.composable() 함수를 이용한다. 자세한 내용은 아래에서 설명한다.


NavHost

NavController는 하나의 NavHost와 연관되어 있어야 한다. NavHost는 NavController와 Navigation Graph를 연결하는 역할을 한다. 

지정된 NavGraphBuilder 내의 모든 컴포저블을 제공된 navController에서 탐색할 수 있다. 즉 각 NavController를 단일 NavHost 컴포저블과 연결해야 한다. NavHost는 내부적으로 구성 가능한 대상을 지정하는 NavGraph와 NavController를 연결한다. 이 연결을 통해 NavController는 이동한 컴포저블 대상을 파악하고 이동할 수 있게 된다.

화면 전환을 하면서 NavHost 안의 내용은 자동적으로 recompose된다.


public fun NavHost( navController: NavHostController, startDestination: String, modifier: Modifier = Modifier, route: String? = null, builder: NavGraphBuilder.() -> Unit ) NavHost의 원형을 살펴보면, 위와 같다

navController: NavHostController 클래스의 인스턴스이다. navigate() 메서드를 호출하여 다른 대상으로 이동하는 등의 방식으로 화면 간에 이동하는 데 이 객체를 사용할 수 있다.

startDestination: 앱에서 NavHost를 처음 표시할 때 기본적으로 표시되는 대상을 정의하는 문자열 경로이다.

builder: NavGraphBuilder로 그래프를 생성하기 위해 사용되는 빌더이다. 여기에 NavGraphBuilder의 composable() 함수를 이용하여 경로 대상을 정의 할 수 있다.


 

Compose Navigation 적용하기

의존성 추가

 (https://developer.android.com/jetpack/androidx/releases/navigation#declaring_dependencies)

dependencies {
    def nav_version = "2.5.3"
    implementation "androidx.navigation:navigation-compose:$nav_version"
}


경로 추가

앱에서 경로를 추가해야 한다. 경로는 탐색의 기본 개념 중 하나이다. 경로는 Destination에 상응하는 문자열이다. 보통 enum 클래스를 사용하여 경로를 정의하는 편이다.


enum class TestScreen() {
    First,
    Second,
    Third
}


NavController 추가

NavController는 위에서 설명했듯이 상태 호이스팅에 유의하여 rememberNavController() 를 이용하여 선언할 수 있다.


@Composable
fun TestApp(modifier: Modifier = Modifier){
    val navController = rememberNavController()
    ...
}

  

NavHost 추가 및 경로 정의

NavHost를 추가하고 내부에 NavGraphBuilder.composable() 함수를 이용하여 경로를 정의한다. composable은 2개의 매개변수가 필요하다.


route: 경로 이름에 해당하는 문자열입니다. 모든 고유 문자열을 사용할 수 있습니다. CupcakeScreen enum의 상수 이름 속성을 사용합니다.

content: 여기에서 특정 경로에 표시할 컴포저블을 호출할 수 있습니다.


route는 위에서 정의한 경로 (enum class를 사용했었다.)를 이용하여 route 매개변수를 전달하고, content는 컴포저블 함수로 Screen 등 표시할 컨텐츠가 포함된다.

@Composable
fun TestApp(modifier: Modifier = Modifier){
    val navController = rememberNavController()

    ...


    NavHost(
        navController = navController,
        startDestination = TestScreen.First.name,
        modifier = modifier.padding(innerPadding)

    ) {

        composable(route = TestScreen.First.name) {
            FirstScreen(
                ...
            )
        }

        composable(route = TestScreen.Second.name) {
            SecondScreen(
                ...
            )
        }

        composable(route = TestScreen.Third.name) {
            ThirdScreen(
                ...
            )
        }
    }
}
 

NavHost 의 매개변수를 살펴보면, 위에서 생성한 navController를 전달한다. 그리고 처음 시작점인 startDestination으로 TestScreen.First.name을 이용해 첫 경로를 설정하여 준다.

 

경로 간 이동하기 (navigate())

경로 간 이동을 위해 navController의 navigate() 함수를 이용한다. 아래 코드를 보면, FirstScreen의 버튼 클릭 이벤트에서 SecondScreen으로 이동하는 코드이다.

navigate(route)를 통해 destination을 인자로 주어 원하는 화면으로 전환이 가능하다. 이 때, 화면 전환과 함께 back stack에 전환 전의 화면이 추가된다. 다음과 같이 사용한다.


@Composable
fun TestApp(modifier: Modifier = Modifier){

    val navController = rememberNavController()
    ...

    NavHost(
        navController = navController,
        startDestination = TestScreen.First.name,
        modifier = modifier.padding(innerPadding)

    ) {

        composable(route = TestScreen.First.name) {

            FirstScreen(

                ...,

                onNextButtonClicked = {
                    navController.navigate(TestScreen.Second.name)

                }
            )

        }

        composable(route = TestScreen.Second.name) {
            SecondScreen(

                ...

            )
        }
    }

}
  

navController.navigate() 메서드의 옵션들
다양한 옵션들을 이용하여 back stack을 관리할 수 있다. 

- popUpTo(route) 
navigate에 전달한 인자에 해당하는 화면으로 전환하기 전에, route에 해당하는 화면이 나오기 전까지의 back stack을 뺀다. inclusive를 true로 하면 route에 해당하는 화면까지 back stack에서 뺀다. 

- launchSingleTop = true 
route에 해당하는 화면이 아닌 경우에만 route로 화면이 전환된다. back stack에 동일한 route가 중복으로 있는 것을 방지한다.

navController.navigate(item.route) {
    // 항목을 선택할 때 백스택에 대상스택이 많이 생성되는 것을 방지하기 위해 그래프의 시작 대상까지 팝업
    navController.graph.startDestinationRoute?.let { route ->
        popUpTo(route) {
            saveState = true
        }
    }
    
    // 백 스택에 동일한 route가 중복으로 있는 것을 방지
    launchSingleTop = true
    
    // 이전에 선택한 항목을 다시 선택할 때 상태 복원
    restoreState = true
}



navController.popBackStack()
- 이전화면으로 돌아갈때

navController.popBackStack(route, inclusive)
- route: 돌아가고 싶은 화면의 route
- inclusive: Boolean값. true이면 특정한 route를 삭제, false이면 모든 destination을 pop하고 start destination으로 이동

navController.popBackStack(
    TestScreen.First.name,
    false
)


참고

https://developer.android.com/jetpack/compose/navigation

Jetpack Compose 기초정리

 Jetpack Compose 기초는 다음의 링크에서 확인 가능

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko


*최근 진행중인 개인 프로젝트는 다음의 구조로 진행

MVVM 디자인 패턴(통신 Retrofit) + DI(Dagger Hilt) + Compose

프로젝트를 위해 접해보지 못했던 Compose를 먼저 이해해 보기로 함.



*Compose 정리

**Compose로 Layout을 어떻게 구성하는지 공부


1) 기본적으로 사용되는 레이아웃은 3가지가 있습니다. Column , Row, Box

(단순한 컨테이너로, Compose의 레이아웃을 구성하는데 사용)

- 수직 Column

- 수평 Row

- 중첩 Box



2) 수정자 (Modifier.함수()로 사용 )

- **Modifiers는 순서가 매우 중요함

- Composable의 크기, 레이아웃, 동작 및 모양 변경

- 접근성 라벨과 같은 정보 추가

- 사용자 입력 처리

- UI요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가


Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxWidth()) 
    {
    	Text(text = "Hello,")
    	Text(text = name)
    }


(1) 지정한 크기가 레이아웃의 상위 요소를 무시하고 Composable의 크기를 고정해야 하는 경우 requiredSize 수정자를 사용


Box(Modifier.size(90.dp, 150.dp).background(Color.Green)) {
    Box(Modifier.requiredSize(100.dp, 100.dp).background(Color.Red))
}


    - 가장 하위에 있는  Box가 상위 Box 90.dp 크기를 무시하고 100.dp로 설정

    

(2) 레이아웃의 상위 요소 크기에 상위요소가 허용하는 만큼 하위요소가 꽉 채우고 싶은 경우 

    fillMaxSize(), fillMaxWidth(), fillMaxHeight() 등등을 골라서 사용


Box(Modifier.background(Color.Green).size(50.dp).padding(10.dp)) {
    Box(Modifier.background(Color.Blue).fillMaxSize())
}

    

    -fillMaxSize() 사용으로 상위 UI요소 만큼 하위 UI요소의 크기가 지정됨

    -padding을 넣엇기 때문에 패딩이 10dp가 적용됨 

    

(3) 하위 레이아웃을 상위 요소와 동일한 크기로 설정하려면 matchParentSize 수정자를 사용합니다.   

    Modifier.matchParentSize().background(Color.Green)

    

    

(4) 레이아웃 상단에서 기준선까지 특정 거리가 유지되도록 패딩을 추가하려면 paddingFromBaseline 수정자를 사용


 Box(Modifier.background(Color.Yellow)) {
    Text("Hi there!", Modifier.paddingFromBaseline(top = 32.dp))
}

    

3) Offset    

- 원래 위치를 기준으로 레이아웃을 배치해줌

- offset 수정자를 추가해서 x축 , y축을 설정해서 사용함

- 양수 혹은 음수일 수 있음

- offset의 측정값은 변경되지 않음 

- offset 수정자는 레이아웃 방향에 따라 가로로 적용

- LTR 컨텍스트에서 양수 offset은 요소를 오른쪽으로 이동시킴

- RTL 컨텍스트에서는 요소를 오른쪽으로 이동합니다.

- aboluteOffset은 레이아웃 방향 상관없이 항상 오른쪽으로 이동시킴


Text(
    "Layout offset modifier sample",
    Modifier.offset(x = 15.dp, y = 20.dp)
)

    

4) 반응형 레이아웃

(1) Row 및 Column의 가중치 수정자


Row(Modifier.width(210.dp)) {
    Box(Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(Modifier.weight(1f).height(50.dp).background(Color.Red))
}


(2) 제약 조건

- 상위 요소의 제약 조건에 따라 레이아웃을 디자인하려면 BoxWithConstraints를 사용 

- 측정 제약조건은 콘텐츠 람다의 범위에서 확인 가능 

- 측정 제약 조건을 사용하여 다양한 화면 구성에 따라 다양한 레이아웃을 구성이 가능 



5) Surface

일반적으로 카드 또는 패널과 같은 요소를 나타내는데 사용된다. 

그림자, 경계선, 배경색 등과 같은 시각적 효과를 자동으로 처리하며, 표면에 콘텐츠를 배치하는데 사용 (배경색이나 배경 테두리 등을 설정)

- ex) 카드 또는 팝업창을 만들 때, Surface를 사용


Surface(
    color = MaterialTheme.colors.primarySurface,
    border = BorderStroke(1.dp, MaterialTheme.colors.secondary),
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp
) {
    Text(
        text = "example",
        modifier = Modifier.padding(8.dp)
    )
}


Android Compose Animation

나타남 /  사라짐 애니메이션 AnimatedVisibility 의 enter 및 exit 매개변수를 사용하면 컴포저블이 표시되고 사라질 때의 동작을 구성할 수 있습니다. 자세한 내용은  전체 문서 를 참고하세요. 컴포저블의 가시성을 애니메이션화하는 ...