안녕하세요 진짜 초보개발자 아보카도🥑입니다. 오늘은 간단한 예제와 함께 JetPack의 Navigation을 알아보겠습니다.
저는 처음에 공부할 때 intent와 transaction으로만 화면 이동을 했었는데, 레이아웃이 복잡해질수록 코드도 꼬이고 불편했습니다.
쉽게 쉽게 하고싶지만 모든 앱이 그렇게 간단하지 않다는 것 .. !
이제는 쓰지 않으면 불편한 navigation 기능을 예제와 함께 볼게요
네비게이션으로 연결한 예제
위에서 언급한 Android JetPack은 훌륭한 안드로이드 앱을 만들기 위한 컴포넌트, 도구, 안내서의 세트입니다.
특히 아키텍쳐 부분을 하나씩 공부해보면 좋을 것 같아요.
네비게이션은 총 세가지 파트로 나눕니다
1. Navigation graph (New XML Resource)
새로운 리소스 타입인 네비게이션 그래프는 모든 정보가 모여있어요. XML 코드로도 확인할 수 있습니다.
각각의 스크린들은 destination이라는 이름을 갖고 있고 가고싶은 곳으로 연결을 할 수 있습니다.
한눈에 보이니까 너무 좋지 않나요?
그리고 모두 프레그먼트 입니다. 구글이 하나의 액티비티 + 여러개의 프레그먼트 구성을 밀고 있기 때문이죠.
자세한 내용은 영상으로 youtu.be/2k8x8V77CrU
2. NavHostFragment (Layout XML view)
빈 창이라고 보면 되는데요, 프레그먼트 네비게이션을 위한 빈 위젯이라고 생각하면 됩니다.
3. NavController (Kotlin / Java object)
findNavController().navigate(<Destination or Action id>)
말 그대로 네비게이션을 컨트롤합니다. NavHostFragment는 개별적으로 NavController를 가지고 있어요.
네비게이션 그래프 정보를 바탕으로 네비게이션 간 이동(액션)을 담당합니다.
이제 다 만들어진 페이지들을 네비게이션으로 연결해보겠습니다.
먼저 build.gradle 파일에 navigation dependency(의존성)를 추가해줍니다.
코틀린 기준입니다.
자바는 implementation "androidx.navigation:navigation-fragment:2.3.0"
implementation "androidx.navigation:navigation-ui:2.3.0"
sync까지 해주면 추가 완료!
네비게이션 파일을 만듭니다
res > new > Android Resource File
file name은 nav_graph, resource type은 navigation으로 해줍니다.
이렇게 하면 네비게이션 폴더와 그 안에 네비게이션 파일이 생성되었습니다.
완성된 네비게이션 파일에 프레그먼트(페이지) 추가
네비게이션 내에서 destination 이라고 하는, 우리가 미리 만든 페이지들을(프레그먼트와 레이아웃 파일) 추가해주겠습니다.
킵고잉 킵고잉 ~
activity_main.xml 파일에 NavHostFragment 추가
XML 파일에 기본으로 들어가 있는 텍스트를 지우고 프레그먼트를 넣어줍니다.
(developer.android.com/guide/navigation/navigation-getting-started 네비게이션 가이드 참고)
가이드에선 FragmentContainerView를 넣으라고 하지만 저는 fragment(소문자)를 넣었습니다. (코드는 동일)
이것이 하나의 액티비티 + 여러 개의 프레그먼트의 시작입니다.
위에서 언급한 NavHostFragment가 id에서 보이시나요? 이제 이 액티비티 안에 있는 프레그먼트가 빈 창을 만들어줍니다.
프레그먼트 연결
nav_graph 파일을 들어가서 연결하려고 보니 페이지의 프리뷰가 안나옵니다. 페이지가 보이게 하고 싶어서 코드 한줄 넣어주겠습니다.
네비게이션 파일의 코드에서 프레그먼트와 해당 레이아웃을 tools:layout="@layout/layout_name" 이걸로 연결해줍니다.
네비게이션에도 tools가 있어야 에러가 안 뜨니 추가해주세요
드디어 연결을 해보겠습니다. 화살표를 쭈욱 땡겨서 가고싶은 페이지로 연결을 해줍니다.
연결을 해주면 코드 상에서도 연결해준 "액션"이 나타납니다
action_출발_to_도착 이라고 보면 됩니다.
저는 퀴즈가 틀리면 다시 시작페이지로 돌아가는 액션까지 만들어주었습니다.
이제 끝났나? ! 싶지만 실질적인 연결, 즉 NavController를 사용할 때가 왔습니다.
저는 버튼을 통해 페이지 이동을 하니, 버튼을 만져주겠습니다.
버튼 연결
버튼을 연결해주기 전에, 각 버튼에 정확한 id를 레이아웃 파일에서 설정해주세요.
그리고 Main Activity에서 NavController를 정의해줍니다.
onCreate에 findNavController 메소드를 사용하여 NavController를 검색할 수 있습니다.
전의 액티비티에서 발견한 NavHost를 찾는 메소드입니다.
첫 시작 프레그먼트로 가서 버튼에 액션을 추가해주겠습니다.
아까와 동일하게 NavController를 선언해주고 onViewCreated에서 받아온 view를 통해 NavController를 정의해줍니다.
마지막으로 버튼의 아이디를 가져와, setOnClickListener를 사용해줍니다.
R.id.action_출발_to_도착 기억하시죠?
NavController를 이용해 "액션"을 탐색하는 겁니다.
이렇게 하면 네비게이션 그래프에서 설정했듯이 다음 페이지로 넘어가게 됩니다.
다른 프레그먼트도 동일하게 적용하면 네비게이션이 성공적으로 되는 것을 알 수 있습니다.
˙참고자료
Android Get Started with the Navigation component developer.android.com/guide/navigation/navigation-getting-started
'Development > Android (Kotlin)' 카테고리의 다른 글
| 안드로이드에 Material Design 적용하기 (0) | 2020.11.01 |
|---|---|
| 안드로이드 Constraint Layout, Linear Layout 어떤걸 써야할까? (0) | 2020.10.11 |
| Android Studio의 기본 Directory & Hello, World 예제 (0) | 2020.07.08 |
| Activity와 Fragment의 수명주기에 대해 알아보자! (0) | 2020.07.02 |
| [Android] Application과 기본요소! (0) | 2020.06.30 |
댓글