[ Jetpack ] - Navigation
2018 Google I/O 행사에서 Jetpack Navigation 기능이 소개 되었고,
Android Studio 3.3 Navigation Editor 기능이 생기면서, Apple Xcode 처럼 UI를 통한 Navigation 편집이 가능해졌다.
Navigation은 사용자가 탐색할 수 있는 앱의 어느곳에서나 발생한다.
_ 대상은 앱의 다른 콘텐츠 영역이고,
_동작은 사용자가 사용할 수 있는 경로를 나타내는 대상 간의 논리적 연결이다.
Jetpack을 사용한 Navigation을 구현해보려한다.
1. 새 프로젝트 생성하여 Empty Activity를 선택한다.
2. 언어는 Kotlin으로 선택한다.
3. Gradle을 설정해야 하는데 build.gradle (Module: app)을 선택하고 dependencies에 추가해준다.
-> implementation 'android.arch.navigation:navigation-fragment:1.0.0'
-> implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0'
4. Fragment을 생성한다.
MainActivity에 Fragment를 사용하여 화면을 구성할 것이기 때문에
3개의 Fragment를 사용하며 이 Fragment들이 순서대로 순환하며 화면이 이동할 것이다.
Fragment에서 paramete는 사용하지 않을 것이기때문에, 코드를 수정한다.
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.fragment_first, container, false)
}
}
5. Fragment 에서 보여질 화면을 구성한다.
-> 참고로 아래에서 구현할 Navigation Graph 작성을 위해선 Navigation Host가 필요하기 때문에
activity_main.xml에 다음을 추가해준다.
-> android:id = "@+id/fragment"
-> android:name = "androidx.navigation.fragment.NavHostFragment"
-> app:defaultNavHost = "true"
-> app:navGraph="@navigation/nav_graph" />
6. 이제부터 Nav Graph를 작성할 것이다.
res에서 오른쪽 마우스를 누르고 navigation 폴더를 추가해준다.
생겨난 navitation 폴더에서 새로운 navigation resource file 추가해준 이름을 nav_graph로 해준다.
7. nav_graph을 수정해보자.
- 미리 생성한 Fragment 3개를 추가한다.
- Graph Editor를 통해 Navigation 동선을 UI로 구성할 수 있다.
- 나머지 두개의 fragment도 넣어준다.
<fragment
android:id="@+id/firstFragment"
android:name="com.example.jetpack_navigation.FirstFragment"
android:label="fragment_first"
tools:layout="@layout/fragment_first" >
<action android:id="@+id/action_firstFragment_to_secondFragment"
app:destination="@id/secondFragment" />
</fragment>
8. 이제 Navigation 동작하도록 간단한 OnClickListener 작성을 해보자
- 다음은 FirstFragment이다.
class FirstFragment : Fragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_first, container, false)
view.findViewById<Button>(R.id.button1).setOnClickListener {
Navigation.findNavController(view).navigate(R.id.action_firstFragment_to_secondFragment)
}
return view
}
}
-> 나머지 두개의 fragment들도 동일하게 작성해주면, 간단하게 Navigation을 이용하여 만들어 볼 수 있다.
작성한 코드는 아래 Git에서 볼 수 있다.
github.com/rhkdhl23/Jetpack_Navigation
rhkdhl23/Jetpack_Navigation
Contribute to rhkdhl23/Jetpack_Navigation development by creating an account on GitHub.
github.com