[Android Basics in Kotlin] Navigation: 프래그먼트 / 네이게이션 컴포넌트

https://developer.android.com/courses/android-basics-kotlin/unit-3

Android Kotlin Basics in Kotlin  |  Android Basics in Kotlin - Navigation  |  Android Developers

해당 글은 위 사이트의 PATHWAY 2 과정인 탐색 구성요소 소개를 공부하며 작성한 글입니다.

이 과정에서는 탐색 구성요소, 라이브러리 모음, 유용한 도구 및 권장 사항을 사용하여 인앱 화면 탐색을 간소화하는 방법을 배웁니다.

---

프래그먼트 및 탐색 구성요소

인텐트를 사용해 액티비티 간 이동하는 방식은 앱의 동적 사용자 인터페이스를 만드는 작업의 일부일 뿐이다.

대다수 Android 앱에는 화면마다 별도의 액티비티가 필요하지 않다.

실제로 여러 일반적인 UI 패턴은 프래그먼트(Fragment)를 사용하는 단일 액티비티 내에 존재한다.

 

프래그먼트는 앱의 사용자 인터페이스에서 재사용 가능한 UI로, 하나 이상의 액티비티에 재사용하고 삽입할 수 있다.

재사용성과 모듈성을 강조하므로 단일 활동에 여러 프래그먼트를 한 번에 표시할 수 있다.

 

Jetpack 탐색 구성요소를 사용하고 탐색 그래프라는 새로운 리소스 파일을 사용해 프래그먼트 간 이동

 

프래그먼트 수명 주기

프래그먼트 수명주기는 Lifecycle.State 열거형으로 표현되는 5가지 상태가 있다. 

또한 활동과 마찬가지로 프래그먼트 클래스는 수명 주기 이벤트에 응답하기 위해 재정의할 수 있는 여러 메서드를 제공한다.

아래 그림에 프래그먼트 수명 주기와 상태 간 전환을 쉽게 이해할 수 있게 표현되어 있다.

수명 주기 상태와 콜백 메서드는 활동에 사용된 것과 거의 비슷하지만 onCreate() 메서드의 차이를 주의해야 한다.

활동에서는 이 메서드를 사용해 레이아웃을 확장하고(inflate) 뷰를 바인딩한다.

하지만 프래그먼트 수명 주기에서 onCreate()는 뷰가 만들어지기 전에 호출되므로 여기서 레이아웃을 확장할 수 없고,

onCreateView()에서 확장하여 뷰를 만든 뒤, onViewCreated() 메서드가 호출되어 속성을 바인딩할 수 있다.

즉, 활동에서의 onCreate() 메서드에서 하는 작업을 프래그먼트에서는 세 메서드가 나눠서 한다고 생각하면 된다.

 

프래그먼트 구현

 

활동과 마찬가지로 레이아웃을 확장하고 개별 뷰를 바인딩 해야한다.

바인딩 클래스는 build.gradle 파일의 buildFeatures 섹션에서 viewBinding 속성이 사용 설정 될 때 생성된다.

이 후 각 뷰에 프래그먼트 클래스의 속성을 할당하면 된다.

 

LetterListFragment의 인스턴스가 만들어지는 시점(수명 주기가 onCreate()로 시작될 때)과 이 속성을 실제로 사용할 수 있는 시점 사이에는 텀이 있기 때문에 프래그먼트의 초기 유형은 FragmentLetterListBinding?이어야 하고 초깃값은 null이다. 

 

프래그먼트 구성 파일(레이아웃용 XML 파일, Kotlin 클래스) 작업이 완료되면 MainActivity 클래스에서 프래그먼트가 뷰에 표시되도록 레이아웃을 확장해야 한다. 

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   val binding = ActivityMainBinding.inflate(layoutInflater)
   setContentView(binding.root)
}

 

Jetpack 탐색 컴포넌트

 

Android Jetpack에서 제공하는 탐색 구성요소를 통해 앱에서 간단하거나 복잡한 탐색 구현을 처리할 수 있다.

 

- 탐색 그래프

탐색 그래프는 앱에서 탐색을 시각적으로 보여주는 XML 파일이다. 파일은 개별 활동 및 프래그먼트에 상응하는 대상과 한 대상에서 다른 대상으로 이동하려고 코드에서 사용할 수 있는 대상 사이의 작업으로 구성된다.

 

- NavHost

NavHost는 활동 내에서 탐색 그래프의 대상을 표시하는 데 사용된다.

프래그먼트 간에 이동하면 NavHost에 표시되는 대상이 업데이트 된다.

 

- NavController

NavController 객체를 사용하면 NavHost에 표시되는 대상 간 탐색을 제어할 수 있다.탐색 구성요소를 사용하면 NavController 의 navigate 메서드를 호출해 표시되는 프래그먼트를 교체할 수 있다.

 

탐색 그래프 사용

 

탐색 구성요소(Component)는 탐색, 특히 프래그먼트 간 탐색을 구현하기 위한 도구 모음을 뜻한다.프래그먼트 간 탐색을 구현하는 데 도움이 되는 편집기인 탐색 그래프(NavGraph)를 사용한다.

 

탐색 그래프란 앱 탐색의 가상 매핑이다. 각 화면(액티비티, 프래그먼트)는 이동 가능한 대상이 되고, NavGraph는 각 대상이 서로 관련되는 방식을 보여주는 XML 파일로 나타낼 수 있다. 배경에서는 실제로 NavGraph 클래스의 새 인스턴스가 생성된다. 그러나 탐색 그래프의 대상은 FragmentContainerView로 사용자에게 표시된다. XML 파일을 만들고 가능한 대상을 정의하기만 하면 된다. 그런 다음 생성된 코드를 사용하여 프래그먼트 간에 이동할 수 있다.즉, nav_graph.xml 파일에는 앱의 프래그먼트가 서로 이동할 수 있는 방법이 정의되어 있다.

 

탐색은 대상 간에 매개변수 전달도 지원하면서 안전한 유형을 사용해 이를 실행한다.

 

예제 실행 순서는 다음과 같다.   

 

   1. activity_main에서 FragmentContainerView 사용   

   2. 탐색 그래프 파일(nav_graph) 생성   

   3. 탐색 작업 만들기     

       - NavHost(화면) 추가 -> 화살표 이어주기       

       - 인수 지정       

       - 시작 대상 설정: FragmentContainerView가 먼저 표시할 프래그먼트를 인식하기 위해 지정해줘야 함   

   4. 탐색 작업 실행       

       - 탐색 작업 검색 

val action = LetterListFragmentDirections.actionLetterListFragmentToWordListFragment(letter = holder.button.text.toString())

       - NavController 참조 가져와 navigate 호출

holder.view.findNavController().navigate(action)

   5. MainActivity 구성

      - FragmentContainerView 참조 가져와 navController 속성에 할당

      - setupActionBarwithNavcontroller() 호출해 navController 전달

      - onSupportNavigateUp() 구현

 

요약