[Kotlin] Jetpack Navigation 라이브러리 사용법

우리가 사용하는 대부분의 앱은 하나의 화면으로 이뤄져 있지 않다. 앱이 새로운 기능을 추가함에 따라, 개발자들은 그 기능을 수용할 새로운 화면을 만든다. 간단한 예를들어, 카카오톡의 친구 목록에 가면 친구의 리스트들이 보이고, 친구의 프로필 사진을 보고싶으면 친구의 프로필을 눌러 사진을 봐야한다. 얼핏 보면 간단한 작업처럼 보이지만, 속을 보면 그렇지 않다. 

 

• 친구 목록을 보여주는 화면에서 친구의 프로필을 눌러 친구 프로필에 대한 정보를 보려면 단순히 친구 프로필을 띄우는게 아니라 다른 페이지로 이동해서 그 새로운 창을 유저에게 보여줘야 한다.(카톡의 정확한 UI로직은 나도 모른다 그냥 예를 든것 뿐!)
  
  Jetpack 라이브러리의 Navigation 구성 요소는 화면을 정의하고 그들 사이의 경로를 정의한 다음 그 탐색을 수행할 도구를 제공한다. 이 라이브러리의 핵심은 탐색 그래프에 의존하는데, 이 그래프는 화면 목적지 그룹과 그들 사이의 경로를 정의한다. 탐색 그래프는 XML 파일에 포함되어 있으며, 아래 예시를 보자.

먼저, 우리는 하나의 액티비티와 여러개의 fragment가 있다고 가정해보자. 각각의 fragments(조각)들은 각 화면의 역할을 한다. 즉, 조각 1은 친구 목록을 보여주는 화면 역할을 할 수 있고, 조각 2는 친구의 세부 정보를 보여주는 화면일 수 있고, 조각 3은 또 다른 화면을 보여주는 조각이라고 생각 할 수 있다. 이때, 존재하는 단 하나의 액티비티는 조각들을 담아서 화면에 보여주는 역할을 하는 '컨테이너' 역할을 한다.

 

자, 그럼 이제 자유자재로 이 프래그먼트들을 넘나들며 UI를 화면에 보여주는 실습을 해 보자.

 

1. 항상 dependencies를 먼저 추가해준다.

 

App.build.gradle에 

    implementation "androidx.navigation:navigation-fragment-ktx:2.4.1"
    implementation "androidx.navigation:navigation-ui-ktx:2.4.1"

 

를 추가해주고, 동기화를 바로바로 해준다.(안드로이드 스튜디오에서 앱을 개발할땐 의존성을 추가하거나 gradle 파일에 어떠한 변경 사항이 만들어지면 즉시 동기화를 해주는걸 잊지 말자!

 

2. 탐색 그래프를 저장할 파일을 생성한다.

 

Navigation 파일 생성

 

위와 같이 res 폴더를 우클릭 -> Android Resource File을 누르고 위와 같이 설정한다. Resource type을 꼭 Navigation으로 해줘야 하는걸 잊지 말자!

 

OK버튼을 누르면 안드로이드 스튜디오는 자동으로 nav_graph.xml을 자동으로 열어줄 것이다. 오른쪽 위에 3개의 옵션중 'Design'을 선택하면 아래와 같이 보일것이다.

 

Navigation 탐색 그래프

 

현재 이 탐색 그래프는 비어있다 - 사용자에게 표시하거나 탐색할 수 있는 화면이 없다 :( . 탐색 그래프를 더 유용하게 만들려면 사용자에게 표시할 수 있는 화면을 정의하는 목적지를 그래프에 추가해야 한다. 에디터 중앙의 텍스트에 나와 있는대로, 에디터의 왼쪽 상단에 있는 "An empty navigation graph Add Destination" 아이콘을 클릭한다.

 

아이콘을 클릭하면 아래와 같은 모습이 보일텐데, 여기서는 CrimeListFragment를 먼저 navigation destination에 추가 할 것이다. 이CrimeListFragment가 맨 처음 추가된 destination이므로, 이 CrimeListFragment 화면이 유저들에게 가장 먼저 보이는 화면이 될 것이다.

 

 

이렇게 하면 기본적인 Navigation과 destination이 추가 된 것이다. 포스팅이 너무 길어지므로 다음 포스팅에서 계속 하도록 하겠다!