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

활동 및 인텐트 Codelab에서는 Words 앱에 인텐트를 추가하여 두 활동 간에 이동했습니다. 이는 알아두면 유용한 탐색 패턴이지만 앱의 동적 사용자 인터페이스를 만드는 작업의 일부일 뿐입니다. 대다수 Android 앱에는 화면마다 별도의 활동이 필요하지 않습니다. 실제로 여러 일반적인 UI 패턴(예: 탭)이 프래그먼트라는 섹션을 사용하는 단일 활동 내에 존재합니다.

프래그먼트는 재사용 가능한 UI의 부분입니다. 프래그먼트를 하나 이상의 활동에 재사용하고 삽입할 수 있습니다. 위 스크린샷에서 탭을 탭하면 다음 화면을 표시하기 위한 인텐트가 트리거되지 않습니다. 대신 탭을 전환하면 이전 프래그먼트가 다른 프래그먼트로 교체됩니다. 이 모든 작업은 다른 활동을 실행하지 않고 실행됩니다.

태블릿 기기의 마스터/세부정보 레이아웃과 같이 단일 화면에 여러 프래그먼트를 한 번에 표시할 수도 있습니다. 아래 예에서 왼쪽의 탐색 UI와 오른쪽의 콘텐츠는 모두 별도의 프래그먼트에 각각 포함될 수 있습니다. 두 프래그먼트가 동일한 활동에 동시에 존재합니다.

프래그먼트는 고품질 앱을 빌드하는 데 필수 요소임을 알 수 있습니다. 이 Codelab에서는 프래그먼트의 기본사항을 알아보고 프래그먼트를 사용하도록 Words 앱을 변환합니다. Jetpack 탐색 구성요소를 사용하고 탐색 그래프라는 새로운 리소스 파일을 사용하여 동일한 호스트 활동에서 프래그먼트 간에 이동하는 방법도 알아봅니다. 이 Codelab을 완료하면 앱에서 프래그먼트를 구현하는 기본적인 기술을 익히게 됩니다.

기본 요건

이 Codelab을 완료하기 전에 다음 사항을 알아야 합니다.

리소스 XML 파일과 Kotlin 파일을 Android 스튜디오 프로젝트에 추가하는 방법
활동 수명 주기의 개략적인 작동 방식
기존 클래스에서 메서드를 재정의하고 구현하는 방법
Kotlin 클래스의 인스턴스를 만들고 클래스 속성에 액세스하며 메서드를 호출하는 방법
null을 허용하는 값과 허용하지 않는 값에 관한 기본 지식과 null 값을 안전하게 처리하는 방법

학습할 내용

프래그먼트 수명 주기와 활동 수명 주기의 차이점
기존 활동을 프래그먼트로 변환하는 방법
탐색 그래프에 대상을 추가하고 Safe Args 플러그인을 사용하여 프래그먼트 간에 데이터를 전달하는 방법

빌드할 프로그램

단일 활동과 여러 프래그먼트를 사용하고 탐색 구성요소를 통해 프래그먼트 간에 이동하도록 Words 앱을 수정합니다.

필요한 항목

Android 스튜디오가 설치된 컴퓨터
활동 및 인텐트 Codelab의 Words 앱 솔루션 코드

이 Codelab에서는 활동 및 인텐트 Codelab을 마칠 때 Words 앱에서 중단한 부분부터 다시 시작합니다. 활동 및 인텐트 Codelab을 이미 완료했다면 그 코드를 시작 지점으로 사용하세요. 또는 GitHub에서 이 시점까지 코드를 다운로드해도 됩니다.

이 Codelab의 시작 코드 다운로드

이 Codelab은 시작 코드를 제공합니다. 이 Codelab에서 학습한 기능을 사용하여 시작 코드를 확장할 수 있습니다. 시작 코드에는 이전 Codelab을 통해 익숙한 코드가 포함될 수 있습니다. 익숙하지 않은 코드도 포함될 수 있으며 이에 관해서는 향후 Codelab에서 알아봅니다.

GitHub의 시작 코드를 사용하는 경우 폴더 이름은 android-basics-kotlin-words-app-activities입니다. Android 스튜디오에서 프로젝트를 열 때 이 폴더를 선택합니다.

이 Codelab의 코드를 가져와서 Android 스튜디오에서 열려면 다음을 실행합니다.

코드 가져오기

제공된 URL을 클릭합니다. 브라우저에서 프로젝트의 GitHub 페이지가 열립니다.
프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 대화상자를 엽니다.

Eme2bJP46u-pMpnXVfm-bS2N2dlyq6c0jn1DtQYqBaml7TUhzXDWpYoDI0lGKi4xndE_uJw8sKfwfOZ1fC503xCVZrbh10JKJ4iEHdLDwFfdvnOheNxkokITW1LW6UZTncVJJUZ5Fw

대화상자에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.

Android 스튜디오에서 프로젝트 열기

Android 스튜디오를 시작합니다.
Welcome to Android Studio 창에서 Open an existing Android Studio project를 클릭합니다.

Tdjf5eS2nCikM9KdHgFaZNSbIUCzKXP6WfEaKVE2Oz1XIGZhgTJYlaNtXTHPFU1xC9pPiaD-XOPdIxVxwZAK8onA7eJyCXz2Km24B_8rpEVI_Po5qlcMNN8s4Tkt6kHEXdLQTDW7mg

참고: Android 스튜디오가 이미 열려 있는 경우 File > New > Import Project 메뉴 옵션을 대신 선택합니다.

PaMkVnfCxQqSNB1LxPpC6C6cuVCAc8jWNZCqy5tDVA6IO3NE2fqrfJ6p6ggGpk7jd27ybXaWU7rGNOFi6CvtMyHtWdhNzdAHmndzvEdwshF_SG24Le01z7925JsFa47qa-Q19t3RxQ

Import Project 대화상자에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
프로젝트 폴더를 더블클릭합니다.
Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
Run 버튼 을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.
Project 도구 창에서 프로젝트 파일을 살펴보고 앱이 구현된 방식을 확인합니다.

프래그먼트는 간단하게 말해 앱의 사용자 인터페이스에서 재사용 가능한 부분입니다. 활동과 마찬가지로 프래그먼트는 수명 주기가 있고 사용자 입력에 응답할 수 있습니다. 프래그먼트는 활동이 화면에 표시될 때 활동의 뷰 계층 구조 내에 항상 포함됩니다. 재사용성과 모듈성을 강조하므로 단일 활동에서 여러 프래그먼트를 동시에 호스팅할 수도 있습니다. 각 프래그먼트는 별도의 자체 수명 주기를 관리합니다.

프래그먼트 수명 주기

활동과 마찬가지로 프래그먼트는 초기화되고 메모리에서 삭제될 수 있으며 존재하는 동안 화면에 표시되었다가 사라지고 다시 표시될 수 있습니다. 활동처럼 프래그먼트도 여러 상태의 수명 주기가 있고 이러한 상태 간 전환에 응답하도록 재정의할 수 있는 여러 메서드를 제공합니다. 프래그먼트 수명 주기에는 Lifecycle.State 열거형으로 표현되는 다섯 가지 상태가 있습니다.

INITIALIZED: 프래그먼트의 새 인스턴스가 인스턴스화되었습니다.
CREATED: 첫 번째 프래그먼트 수명 주기 메서드가 호출됩니다. 이 상태에서 프래그먼트와 연결된 뷰도 만들어집니다.
STARTED: 프래그먼트가 화면에 표시되지만 '포커스'가 없으므로 사용자 입력에 응답할 수 없습니다.
RESUMED: 프래그먼트가 표시되고 포커스가 있습니다.
DESTROYED: 프래그먼트 객체의 인스턴스화가 취소되었습니다.

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

onCreate(): 프래그먼트가 인스턴스화되었고 CREATED 상태입니다. 그러나 이에 상응하는 뷰가 아직 만들어지지 않았습니다.
onCreateView(): 이 메서드에서 레이아웃을 확장합니다. 프래그먼트가 CREATED 상태로 전환되었습니다.
onViewCreated(): 뷰가 만들어진 후 호출됩니다. 이 메서드에서 일반적으로 findViewById()를 호출하여 특정 뷰를 속성에 바인딩합니다.
onStart(): 프래그먼트가 STARTED 상태로 전환되었습니다.
onResume(): 프래그먼트가 RESUMED 상태로 전환되었고 이제 포커스를 보유합니다(사용자 입력에 응답할 수 있음).
onPause(): 프래그먼트가 STARTED 상태로 다시 전환되었습니다. UI가 사용자에게 표시됩니다.
onStop(): 프래그먼트가 CREATED 상태로 다시 전환되었습니다. 객체가 인스턴스화되었지만 더 이상 화면에 표시되지 않습니다.
onDestroyView(): 프래그먼트가 DESTROYED 상태로 전환되기 직전에 호출됩니다. 뷰는 메모리에서 이미 삭제되었지만 프래그먼트 객체는 여전히 있습니다.
onDestroy(): 프래그먼트가 DESTROYED 상태로 전환됩니다.

아래 차트는 프래그먼트 수명 주기와 상태 간 전환을 간략히 보여줍니다.

수명 주기 상태와 콜백 메서드는 활동에 사용된 것과 매우 비슷합니다. 그러나 onCreate() 메서드의 차이에 유의해야 합니다. 활동에서는 이 메서드를 사용하여 레이아웃을 확장하고 뷰를 바인딩합니다. 그러나 프래그먼트 수명 주기에서 onCreate()는 뷰가 만들어지기 전에 호출되므로 여기서 레이아웃을 확장할 수 없습니다. 대신 onCreateView()에서 확장합니다. 그런 다음 뷰를 만든 후 onViewCreated() 메서드가 호출되고 여기서 속성을 특정 뷰에 바인딩할 수 있습니다.

꽤 복잡하게 들릴 수 있지만 이제 프래그먼트의 작동 원리, 활동과의 유사점 및 차이점에 관한 기본사항을 알아봤습니다. 이 Codelab의 나머지 부분에서는 이러한 지식을 실전에 활용해보겠습니다. 먼저 프래그먼트 기반 레이아웃을 사용하기 위해 이전에 작업한 Words 앱을 이전합니다. 그런 다음 단일 활동 내에서 프래그먼트 간 탐색을 구현합니다.

활동과 마찬가지로 추가하는 각 프래그먼트는 두 개 파일로 구성됩니다. 레이아웃용 XML 파일과 데이터를 표시하고 사용자 상호작용을 처리하는 Kotlin 클래스입니다. 문자 목록과 단어 목록 모두에 프래그먼트를 추가합니다.

프로젝트 탐색기에서 app을 선택한 상태로 다음 프래그먼트(File > New > Fragment > Fragment (Blank))를 추가하면 클래스와 레이아웃 파일이 모두 각각 생성됩니다.

첫 번째 프래그먼트의 경우 Fragment Name을 LetterListFragment로 설정합니다. Fragment Layout Name이 fragment_letter_list로 채워집니다.

두 번째 프래그먼트의 경우 Fragment Name을 WordListFragment로 설정합니다. Fragment Layout Name이 fragment_word_list.xml로 채워집니다.

두 프래그먼트에 생성된 Kotlin 클래스에는 프래그먼트를 구현할 때 흔히 사용되는 상용구 코드가 많이 포함되어 있습니다. 그러나 프래그먼트를 처음 학습하고 있으므로 두 파일에서 LetterListFragment 및 WordListFragment의 클래스 선언을 제외하고 모든 것을 삭제해보세요. 모든 코드가 어떻게 작동하는지 알 수 있도록 프래그먼트를 처음부터 구현하는 방법을 살펴보겠습니다. 상용구 코드를 삭제하면 Kotlin 파일이 다음과 같이 표시됩니다.

LetterListFragment.kt

package com.example.wordsapp

import androidx.fragment.app.Fragment

class LetterListFragment : Fragment() {

}

WordListFragment.kt

package com.example.wordsapp

import androidx.fragment.app.Fragment

class WordListFragment : Fragment() {

}

activity_main.xml의 콘텐츠를 fragment_letter_list.xml에 복사하고 activity_detail.xml의 콘텐츠를 fragment_word_list.xml에 복사합니다. fragment_letter_list.xml의 tools:context를 .LetterListFragment로 업데이트하고 fragment_word_list.xml의 tools:context를 .WordListFragment로 업데이트합니다.

변경 후 프래그먼트 레이아웃 파일은 다음과 같이 표시됩니다.

fragment_letter_list.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".WordListFragment">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:clipToPadding="false"
       android:padding="16dp" />

</FrameLayout>

fragment_word_list.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".WordListFragment">

   <androidx.recyclerview.widget.RecyclerView
       android:id="@+id/recycler_view"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:clipToPadding="false"
       android:padding="16dp"
       tools:listitem="@layout/item_view" />

</FrameLayout>

활동과 마찬가지로 레이아웃을 확장하고 개별 뷰를 바인딩해야 합니다. 프래그먼트 수명 주기로 작업할 때 사소한 차이점 몇 가지가 있습니다. LetterListFragment 설정 프로세스를 알아보고 나면 WordListFragment에 동일한 작업을 실행해 볼 수 있습니다.

LetterListFragment에서 뷰 바인딩을 구현하려면 먼저 null을 허용하는 FragmentLetterListBinding 참조를 가져와야 합니다. 이와 같은 바인딩 클래스는 build.gradle 파일의 buildFeatures 섹션에서 viewBinding 속성이 사용 설정될 때 Android 스튜디오에서 각 레이아웃 파일에 생성됩니다. FragmentLetterListBinding의 각 뷰에 프래그먼트 클래스의 속성을 할당하기만 하면 됩니다.

유형은 FragmentLetterListBinding?이어야 하고 초깃값은 null이어야 합니다. null을 허용해야 하는 이유는 무엇인가요? onCreateView()가 호출될 때까지 레이아웃을 확장할 수 없기 때문입니다. LetterListFragment의 인스턴스가 만들어지는 시점(수명 주기가 onCreate()로 시작될 때)과 이 속성을 실제로 사용할 수 있는 시점 사이에는 기간이 있습니다. 프래그먼트의 뷰는 프래그먼트의 수명 주기 동안 여러 번 만들어지고 소멸될 수 있다는 사실에도 유의해야 합니다. 이러한 이유로 다른 수명 주기 메서드 onDestroyView()에서도 값을 재설정해야 합니다.

LetterListFragment.kt에서 먼저 FragmentLetterListBinding 참조를 가져와서 참조의 이름을 _binding으로 지정합니다.

private var _binding: FragmentLetterListBinding? = null

null을 허용하므로 _binding 속성(예: _binding?.someView)에 액세스할 때마다 null 안전을 위해 ?를 포함해야 합니다. 그러나 null 값 하나 때문에 코드에 물음표를 다수 포함해야 한다는 의미는 아닙니다. 액세스할 때 값이 null이 아님을 확신하는 경우 유형 이름에 !!를 추가할 수 있습니다. 그런 다음 ? 연산자 없이 다른 속성처럼 액세스할 수 있습니다.

밑줄 없이 바인딩이라는 새 속성을 만들고 _binding!!와 동일하게 설정합니다.

private val binding get() = _binding!!

여기서 get()은 이 속성이 'get-only'임을 나타냅니다. 즉, 값을 가져올 수 있지만 여기서와 같이 할당되고 나면 다른 것에 할당할 수 없습니다.

onCreate()를 구현하려면 setHasOptionsMenu()를 호출하면 됩니다.

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

프래그먼트에서는 레이아웃이 onCreateView()에서 확장됩니다. 뷰를 확장하고 _binding 값을 설정한 다음 루트 뷰를 반환하여 onCreateView()를 구현합니다.

override fun onCreateView(
   inflater: LayoutInflater, container: ViewGroup?,
   savedInstanceState: Bundle?
): View? {
   _binding = FragmentLetterListBinding.inflate(inflater, container, false)
   val view = binding.root
   return view
}

binding 속성 아래에서 recycler 뷰 속성을 만듭니다.

private lateinit var recyclerView: RecyclerView

그런 다음 onViewCreated()에서 recyclerView 속성 값을 설정하고 MainActivity에서와 마찬가지로 chooseLayout()을 호출합니다. chooseLayout() 메서드를 LetterListFragment로 곧 이동하므로 오류에는 신경 쓰지 마세요.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   recyclerView = binding.recyclerView
   chooseLayout()
}

어떻게 바인딩 클래스가 이미 recyclerView 속성을 만들었고 각 뷰에 findViewById()를 호출하지 않아도 되는지 확인합니다.

마지막으로 onDestroyView()에서 뷰가 더 이상 없으므로 _binding 속성을 null로 재설정합니다.

override fun onDestroyView() {
   super.onDestroyView()
   _binding = null
}

한 가지 유의할 사항은 프래그먼트를 사용할 때 onCreateOptionsMenu() 메서드와 약간의 미묘한 차이가 있다는 점입니다. Activity 클래스에는 menuInflater라는 전역 속성이 있지만 프래그먼트에는 이 속성이 없습니다. 메뉴 인플레이터가 대신 onCreateOptionsMenu()로 전달됩니다. 또한 프래그먼트와 함께 사용되는 onCreateOptionsMenu() 메서드에는 return 문이 필요하지 않습니다. 다음과 같이 메서드를 구현합니다.

override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
   inflater.inflate(R.menu.layout_menu, menu)

   val layoutButton = menu.findItem(R.id.action_switch_layout)
   setIcon(layoutButton)
}

MainActivity에서 chooseLayout(), setIcon(), onOptionsItemSelected()의 나머지 코드를 그대로 이동합니다. 한 가지 주의할 차이점은 활동과 달라서 프래그먼트는 Context가 아니라는 것입니다. this(프래그먼트 객체 참고)를 레이아웃 관리자의 컨텍스트로 전달할 수 없습니다. 그러나 프래그먼트는 대신 사용할 수 있는 context 속성을 제공합니다. 나머지 코드는 MainActivity와 동일합니다.

private fun chooseLayout() {
   when (isLinearLayoutManager) {
       true -> {
           recyclerView.layoutManager = LinearLayoutManager(context)
           recyclerView.adapter = LetterAdapter()
       }
       false -> {
           recyclerView.layoutManager = GridLayoutManager(context, 4)
           recyclerView.adapter = LetterAdapter()
       }
   }
}

private fun setIcon(menuItem: MenuItem?) {
   if (menuItem == null)
       return

   menuItem.icon =
       if (isLinearLayoutManager)
           ContextCompat.getDrawable(this.requireContext(), R.drawable.ic_grid_layout)
       else ContextCompat.getDrawable(this.requireContext(), R.drawable.ic_linear_layout)
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
   return when (item.itemId) {
       R.id.action_switch_layout -> {
           isLinearLayoutManager = !isLinearLayoutManager
           chooseLayout()
           setIcon(item)

           return true
       }

       else -> super.onOptionsItemSelected(item)
   }
}

마지막으로 MainActivity에서 isLinearLayoutManager 속성을 복사하여 recyclerView 속성 선언 바로 아래에 배치합니다.

private var isLinearLayoutManager = true

이제 모든 기능을 LetterListFragment로 이동했으므로 MainActivity 클래스에서 해야 할 작업은 프래그먼트가 뷰에 표시되도록 레이아웃을 확장하는 것뿐입니다. MainActivity에서 onCreate()를 제외하고 모든 항목을 삭제해보세요. 변경 후 MainActivity에는 다음 내용만 포함됩니다.

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

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

직접 해보기

지금까지 MainActivity를 LettersListFragment로 이전했습니다. DetailActivity 이전 작업도 거의 동일합니다. 다음 단계를 따라 코드를 WordListFragment로 이전하세요.

DetailActivity의 컴패니언 객체를 WordListFragment로 복사합니다. WordAdapter의 SEARCH_PREFIX 참조가 WordListFragment를 참조하도록 업데이트되었는지 확인합니다.
_binding 변수를 추가합니다. 변수는 null을 허용해야 하고 초깃값으로 null을 보유해야 합니다.
_binding 변수와 동일한 바인딩이라는 get-only 변수를 추가합니다.
onCreateView()에서 레이아웃을 확장하여 _binding 값을 설정하고 루트 뷰를 반환합니다.
onViewCreated()에서 나머지 설정을 실행합니다. recycler 뷰 참조를 가져와 레이아웃 관리자 및 어댑터를 설정하고 항목 장식을 추가합니다. 인텐트에서 문자를 가져와야 합니다. 프래그먼트는 intent 속성이 없으므로 일반적으로 상위 활동의 인텐트에 액세스하면 안 됩니다. 현재로서는 DetailActivity의 intent가 아닌 activity.intent를 참조하여 extras를 가져옵니다.
onDestroyView에서 _binding을 null로 재설정합니다.
DetailActivity에서 나머지 코드를 삭제하여 onCreate() 메서드만 남깁니다.

계속 진행하기 전에 직접 단계를 따라 시도해보세요. 다음 단계에서는 자세한 설명이 제공됩니다.

DetailActivity를 WordListFragment로 잘 이전했기를 바랍니다. MainActivity를 LetterListFragment로 이전하는 작업과 거의 같습니다. 언제든지 도움이 필요하다면 아래 간략하게 설명된 단계를 참고하세요.

먼저 컴패니언 객체를 WordListFragment에 복사합니다.

companion object {
   val LETTER = "letter"
   val SEARCH_PREFIX = "https://www.google.com/search?q="
}

그런 다음 인텐트를 실행하는 LetterAdapter의 onClickListener()에서 putExtra() 호출을 업데이트하여 DetailActivity.LETTER를 WordListFragment.LETTER로 바꿔야 합니다.

intent.putExtra(WordListFragment.LETTER, holder.button.text.toString())

마찬가지로 WordAdapter에서 단어의 검색결과로 이동하는 onClickListener()를 업데이트하여 DetailActivity.SEARCH_PREFIX를 WordListFragment.SEARCH_PREFIX로 바꿔야 합니다.

val queryUrl: Uri = Uri.parse("${WordListFragment.SEARCH_PREFIX}${item}")

다시 WordListFragment에서 FragmentWordListBinding? 유형의 바인딩 변수를 추가합니다.

private var _binding: FragmentWordListBinding? = null

그런 다음 ?를 사용하지 않고도 뷰를 참조할 수 있도록 get-only 변수를 만듭니다.

private val binding get() = _binding!!

다음으로 레이아웃을 확장하여 _binding 변수를 할당하고 루트 뷰를 반환합니다. 프래그먼트의 경우에는 onCreate()가 아니라 onCreateView()에서 이 작업을 실행합니다.

override fun onCreateView(
   inflater: LayoutInflater,
   container: ViewGroup?,
   savedInstanceState: Bundle?
): View? {
   _binding = FragmentWordListBinding.inflate(inflater, container, false)
   return binding.root
}

이제 onViewCreated()를 구현합니다. DetailActivity의 onCreateView()에서 recyclerView를 구성하는 것과 거의 같습니다. 그러나 프래그먼트는 인텐트에 직접 액세스할 수 없으므로 activity.intent를 사용하여 참조해야 합니다. 하지만 onCreateView()에서 이 작업을 실행해야 합니다. 활동이 수명 주기 초기에 존재한다는 보장이 없기 때문입니다.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
   val recyclerView = binding.recyclerView
   recyclerView.layoutManager = LinearLayoutManager(requireContext())
   recyclerView.adapter = WordAdapter(activity?.intent?.extras?.getString(LETTER).toString(), requireContext())

   recyclerView.addItemDecoration(
       DividerItemDecoration(context, DividerItemDecoration.VERTICAL)
   )
}

마지막으로 onDestroyView()에서 _binding 변수를 재설정하면 됩니다.

override fun onDestroyView() {
   super.onDestroyView()
   _binding = null
}

이 모든 기능을 WordListFragment로 이전했으므로 이제 DetailActivity에서 코드를 삭제할 수 있습니다. onCreate() 메서드만 남습니다.

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

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

DetailActivity 삭제

이제 DetailActivity의 기능을 WordListFragment로 성공적으로 이전했으므로 더 이상 DetailActivity는 필요하지 않습니다. DetailActivity.kt와 activity_detail.xml을 모두 삭제해보고 매니페스트를 약간 변경할 수도 있습니다.

먼저 DetailActivity.kt를 삭제합니다.

Safe Delete가 선택 해제되어 있는지 확인하고 OK를 클릭합니다.

다음으로 activity_detail.xml을 삭제합니다. 다시 Safe Delete가 선택 해제되어 있는지 확인합니다.

마지막으로 DetailActivity가 더 이상 없으므로 AndroidManifest.xml에서 다음을 삭제합니다.

<activity
   android:name=".DetailActivity"
   android:parentActivityName=".MainActivity" />

세부정보 활동을 삭제하면 프래그먼트 두 개(LetterListFragment와 WordListFragment)와 활동 하나(MainActivity)가 남습니다. 다음 섹션에서는 Jetpack 탐색 구성요소를 알아보고 activity_main.xml을 수정하여 정적 레이아웃을 호스팅하는 대신 프래그먼트를 표시하고 프래그먼트 간에 이동할 수 있도록 합니다.

Android Jetpack에서 제공하는 탐색 구성요소를 통해 앱에서 간단하거나 복잡한 탐색 구현을 처리할 수 있습니다. 탐색 구성요소에는 Words 앱에서 탐색을 구현하는 데 사용할 세 가지 주요 부분이 있습니다.

탐색 그래프: 탐색 그래프는 앱에서 탐색을 시각적으로 보여주는 XML 파일입니다. 파일은 개별 활동 및 프래그먼트에 상응하는 대상과 한 대상에서 다른 대상으로 이동하려고 코드에서 사용할 수 있는 대상 사이의 작업으로 구성됩니다. 레이아웃 파일과 마찬가지로 Android 스튜디오는 탐색 그래프에 대상과 작업을 추가하는 시각적 편집기를 제공합니다.
NavHost: NavHost는 활동 내에서 탐색 그래프의 대상을 표시하는 데 사용됩니다. 프래그먼트 간에 이동하면 NavHost에 표시되는 대상이 업데이트됩니다. MainActivity에서 NavHostFragment라는 기본 제공 구현을 사용합니다.
NavController: NavController 객체를 사용하면 NavHost에 표시되는 대상 간 탐색을 제어할 수 있습니다. 인텐트를 사용할 때는 startActivity를 호출하여 새 화면으로 이동해야 했습니다. 탐색 구성요소를 사용하면 NavController의 navigate() 메서드를 호출하여 표시되는 프래그먼트를 교체할 수 있습니다. NavController를 사용하면 시스템 '위로' 버튼에 응답하여 이전에 표시된 프래그먼트로 다시 이동하는 것과 같은 일반적인 작업을 처리할 수도 있습니다.

프로젝트 수준 build.gradle 파일의 buildscript > ext에서 material_version 아래의 nav_version을 2.3.1로 설정합니다.

buildscript {
    ext {
        appcompat_version = "1.2.0"
        constraintlayout_version = "2.0.2"
        core_ktx_version = "1.3.2"
        kotlin_version = "1.3.72"
        material_version = "1.2.1"
        nav_version = "2.3.1"
    }

    ...

}

앱 수준 build.gradle 파일에서 종속 항목 그룹에 다음을 추가합니다.

implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

Safe Args 플러그인

Words 앱에서 탐색을 처음 구현할 때는 두 활동 간에 명시적 인텐트를 사용했습니다. 두 활동 간에 데이터를 전달하려면 putExtra() 메서드를 호출하여 선택된 문자를 전달했습니다.

Words 앱에 탐색 구성요소를 구현하기 전에 프래그먼트 간에 데이터를 전달할 때 유형 안전성을 지원하는 Gradle 플러그인인 Safe Args라는 항목도 추가해야 합니다.

다음 단계를 따라 SafeArgs를 프로젝트에 통합합니다.

최상위 build.gradle 파일의 buildscript > dependencies에서 다음 클래스 경로를 추가합니다.

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

앱 수준 build.gradle 파일의 상단에 있는 plugins 내에서 androidx.navigation.safeargs.kotlin을 추가합니다.

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
    id 'androidx.navigation.safeargs.kotlin'
}

Gradle 파일을 수정하면 프로젝트를 동기화하라고 요청하는 노란색 배너가 상단에 표시될 수 있습니다. 'Sync Now'를 클릭하고 Gradle이 변경사항을 반영하도록 프로젝트의 종속 항목을 업데이트하는 동안 1~2분 정도 기다립니다.

동기화가 완료되면 다음 단계로 진행하여 탐색 그래프를 추가하면 됩니다.

프래그먼트와 그 수명 주기를 기본적으로 알아봤으므로 이제 좀 더 흥미로운 내용을 살펴보겠습니다. 다음 단계는 탐색 구성요소를 통합하는 것입니다. 탐색 구성요소는 탐색, 특히 프래그먼트 간 탐색을 구현하기 위한 도구 모음을 나타냅니다. 프래그먼트 간 탐색을 구현하는 데 도움이 되는 새로운 시각적 편집기인 탐색 그래프(또는 줄여서 NavGraph)를 사용합니다.

탐색 그래프(또는 줄여서 NavGraph)는 앱 탐색의 가상 매핑입니다. 각 화면(또는 이 경우의 프래그먼트)는 이동할 수 있는 가능한 '대상'이 됩니다. NavGraph는 각 대상이 서로 관련되는 방식을 보여주는 XML 파일로 나타낼 수 있습니다.

배경에서는 실제로 NavGraph 클래스의 새 인스턴스가 생성됩니다. 그러나 탐색 그래프의 대상은 FragmentContainerView로 사용자에게 표시됩니다. XML 파일을 만들고 가능한 대상을 정의하기만 하면 됩니다. 그런 다음 생성된 코드를 사용하여 프래그먼트 간에 이동할 수 있습니다.

MainActivity에서 FragmentContainerView 사용

이제 레이아웃이 fragment_letter_list.xml과 fragment_word_list.xml에 포함되어 있으므로 activity_main.xml 파일에는 앱의 첫 번째 화면 레이아웃이 더 이상 포함되지 않아도 됩니다. 대신 MainActivity의 용도를 변경하여 프래그먼트의 NavHost 역할을 할 FragmentContainerView를 포함합니다. 이 시점부터 앱의 모든 탐색은 FragmentContainerView 내에서 실행됩니다.

androidx.recyclerview.widget.RecyclerView인 activity_main.xml의 FrameLayout 콘텐츠를 FragmentContainerView로 바꿉니다. nav_host_fragment라는 ID를 제공하고 높이와 너비를 match_parent로 설정하여 전체 프레임 레이아웃을 채웁니다.

아래 내용을

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        ...
        android:padding="16dp" />

다음과 같이 바꿉니다.

<androidx.fragment.app.FragmentContainerView
   android:id="@+id/nav_host_fragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

ID 속성 아래에 name 속성을 추가하고 androidx.navigation.fragment.NavHostFragment로 설정합니다. 이 속성의 특정 프래그먼트를 지정할 수 있지만 NavHostFragment로 설정하면 FragmentContainerView가 프래그먼트 간에 이동할 수 있습니다.

android:name="androidx.navigation.fragment.NavHostFragment"

layout_height 및 layout_width 속성 아래에 app:navHost라는 속성을 추가하고 "true"와 동일하게 설정합니다. 이렇게 하면 프래그먼트 컨테이너가 탐색 계층 구조와 상호작용할 수 있습니다. 예를 들어 시스템 뒤로 버튼을 누르면 컨테이너는 새 활동이 표시될 때와 마찬가지로 이전에 표시된 프래그먼트로 다시 이동합니다.

app:defaultNavHost="true"

app:navGraph라는 속성을 추가하고 "@navigation/nav_graph"와 동일하게 설정합니다. 이는 앱의 프래그먼트가 서로 이동할 수 있는 방법을 정의하는 XML 파일을 가리킵니다. 지금은 Android 스튜디오에 해결되지 않은 기호 오류가 표시됩니다. 다음 작업에서 이 문제를 해결합니다.

app:navGraph="@navigation/nav_graph"

마지막으로 앱 네임스페이스가 있는 두 속성을 추가했으므로 FrameLayout에 xmlns:app 속성을 추가해야 합니다.

<xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

여기까지가 activity_main.xml의 모든 변경사항입니다. 이제 nav_graph 파일을 만듭니다.

탐색 그래프 파일(File > New > Android Resource File)을 추가하고 입력란을 다음과 같이 채웁니다.

파일 이름: nav_graph.xml. app:navGraph 속성에 설정한 이름과 동일합니다.
리소스 유형: Navigation. 그러면 Directory Name이 탐색으로 자동 변경됩니다. 'navigation'이라는 새 리소스 폴더가 생성됩니다.

XML 파일을 만들면 새 시각적 편집기가 표시됩니다. FragmentContainerView의 navGraph 속성에서 nav_graph를 이미 참조했으므로 새 대상을 추가하려면 화면 상단 왼쪽에서 새로 만들기 버튼을 클릭하여 각 프래그먼트의 대상을 만듭니다(fragment_letter_list용 하나, fragment_word_list용 하나).

추가되면 이러한 프래그먼트는 화면 가운데 탐색 그래프에 표시됩니다. 왼쪽에 표시되는 구성요소 트리를 사용하여 특정 대상을 선택할 수도 있습니다.

letterListFragment에서 wordListFragment 대상 간에 탐색 작업을 만들려면 letterListFragment 대상 위로 마우스를 가져가서 오른쪽에 표시되는 원에서 wordListFragment 대상으로 드래그합니다.

이제 두 대상 간의 작업을 나타내는 화살표가 만들어진 것을 확인할 수 있습니다. 화살표를 클릭하면 이 작업의 이름이 action_letterListFragment_to_wordListFragment이고 코드에서 참조할 수 있음을 속성 창에서 확인할 수 있습니다.

WordListFragment의 인수 지정

인텐트를 사용하여 활동 사이를 이동할 때 선택된 문자가 wordListFragment에 전달될 수 있도록 'extra'를 지정했습니다. 탐색은 대상 간에 매개변수 전달도 지원하면서 유형에 안전한 방식으로 이를 실행합니다.

wordListFragment 대상을 선택하고 속성 창의 Arguments에서 더하기 버튼을 클릭하여 새 인수를 만듭니다.

인수는 letter라고 하고 유형은 String이어야 합니다. 여기에서 이전에 추가한 Safe Args 플러그인이 필요합니다. 이 인수를 문자열로 지정하면 탐색 작업이 코드에서 실행될 때 String이 예상됩니다.

시작 대상 설정

NavGraph는 필요한 모든 대상을 인식하고 있지만 FragmentContainerView는 먼저 표시할 프래그먼트를 어떻게 알 수 있나요? NavGraph에서 문자 목록을 시작 대상으로 설정해야 합니다.

letterListFragment를 선택하고 Assign start destination 버튼을 클릭하여 시작 대상을 설정합니다.

여기까지가 현재로서 NavGraph 편집기로 해야 하는 작업입니다. 이제 프로젝트를 빌드해 봅니다. 그러면 탐색 그래프에 기반한 코드가 생성되어 방금 만든 탐색 작업을 사용할 수 있습니다.

LetterAdapter.kt를 열어 탐색 작업을 실행합니다. 여기에는 두 단계만 필요합니다.

버튼의 onClickListener() 콘텐츠를 삭제합니다. 대신 방금 만든 탐색 작업을 검색해야 합니다. onClickListener()에 다음을 추가합니다.

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

이러한 클래스 및 함수 이름 중 일부를 인식하지 못할 수도 있는데 이는 프로젝트를 빌드한 후에 자동으로 생성되었기 때문입니다. 여기서 첫 번째 단계에서 추가한 Safe Args 플러그인이 필요합니다. NavGraph에서 만든 작업이 사용할 수 있는 코드로 전환됩니다. 그러나 이름은 상당히 직관적이어야 합니다. LetterListFragmentDirections를 사용하면 letterListFragment부터 가능한 모든 탐색 경로를 참조할 수 있습니다. actionLetterListFragmentToWordListFragment() 함수는

wordListFragment.로 이동할 특정 작업입니다.

탐색 작업 참조가 있으면 NavController(탐색 작업 실행을 허용하는 객체) 참조를 가져와서 작업을 전달하는 navigate()를 호출하면 됩니다.

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

MainActivity 구성

마지막 설정 단계는 MainActivity에 있습니다. MainActivity에서 몇 가지만 변경하면 모두 다 잘 작동합니다.

navController 속성을 만듭니다. onCreate에서 설정되므로 lateinit로 표시됩니다.

private lateinit var navController: NavController

그런 다음 onCreate()에서 setContentView()를 호출한 후 nav_host_fragment(FragmentContainerView의 ID임) 참조를 가져와서 navController 속성에 할당합니다.

val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.nav_host_fragment) as NavHostFragment
navController = navHostFragment.navController

그리고 onCreate()에서 setupActionBarWithNavController()를 호출하여 navController를 전달합니다. 이렇게 하면 LetterListFragment의 메뉴 옵션과 같은 작업 모음(앱 바) 버튼이 표시됩니다.

setupActionBarWithNavController(navController)

마지막으로 onSupportNavigateUp()을 구현합니다. XML에서 defaultNavHost를 true로 설정하는 것과 함께 이 메서드를 사용하면 위로 버튼을 처리할 수 있습니다. 그러나 활동이 구현을 제공해야 합니다.

override fun onSupportNavigateUp(): Boolean {
   return navController.navigateUp() || super.onSupportNavigateUp()
}

이때 모든 구성요소는 탐색이 프래그먼트로 작동하도록 제자리에 있습니다. 그러나 이제 탐색이 인텐트 대신 프래그먼트를 사용하여 실행되므로 WordListFragment에서 사용하는 문자의 인텐트 extra가 더 이상 작동하지 않습니다. 다음 단계에서는 WordListFragment를 업데이트하여 letter 인수를 가져옵니다.

이전에는 WordListFragment에서 activity?.intent를 참조하여 letter extra에 액세스했습니다. 이 방법은 효과적이지만 권장사항은 아닙니다. 프래그먼트가 다른 레이아웃에 삽입될 수 있고 큰 앱에서는 프래그먼트가 속하는 활동을 추측하기가 훨씬 더 어렵기 때문입니다. 또한 nav_graph를 사용하여 탐색을 실행하고 안전 인수를 사용하면 인텐트가 없으므로 인텐트 extras에 액세스하려고 해도 효과가 없습니다.

다행히 안전 인수 액세스는 아주 간단하며 onViewCreated()가 호출될 때까지 기다리지 않아도 됩니다.

WordListFragment에서 letterId 속성을 만듭니다. lateinit로 표시하면 null을 허용하도록 만들지 않아도 됩니다.

private lateinit var letterId: String

그런 다음 onCreateView()나 onViewCreated()가 아닌 onCreate()를 재정의하고 다음을 추가합니다.

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

    arguments?.let {
        letterId = it.getString(LETTER).toString()
    }
}

arguments는 선택사항일 수 있으므로 let()을 호출하여 람다를 전달합니다. 이 코드는 arguments가 null이 아닌 것으로 가정하고 실행되어 it 매개변수의 null이 아닌 인수를 전달합니다. 그러나 arguments가 null이면 람다는 실행되지 않습니다.

실제 코드의 일부는 아니지만 Android 스튜디오에서는 it 매개변수를 알 수 있도록 유용한 힌트를 제공합니다.

Bundle이 정확히 무엇인가요? 활동 및 프래그먼트와 같은 클래스 간에 데이터를 전달하는 데 사용되는 키-값 쌍으로 생각하면 됩니다. 실제로 이 앱의 첫 번째 버전에서 인텐트를 실행하며 intent?.extras?.getString()을 호출할 때 이미 번들을 사용했습니다. 프래그먼트 작업 시 인수에서 문자열을 가져오는 것은 정확히 동일한 방식으로 작동합니다.

마지막으로 recycler 뷰의 어댑터를 설정할 때 letterId에 액세스할 수 있습니다. onViewCreated()의 activity?.intent?.extras?.getString(LETTER).toString()을 letterId로 바꿉니다.

recyclerView.adapter = WordAdapter(letterId, requireContext())

축하합니다. 잠시 시간을 내어 앱을 실행합니다. 이제 인텐트 없이 모두 한 활동에서 두 화면 간에 이동할 수 있습니다.

프래그먼트를 사용하도록 두 화면을 모두 성공적으로 변환했습니다. 변경되기 전에 각 프래그먼트의 앱 바에는 앱 바에 포함된 각 활동에 관한 구체적인 제목이 있었습니다. 그러나 프래그먼트를 사용하도록 변환한 후 이 제목은 세부정보 활동에서 누락되어 있습니다.

프래그먼트에는 상위 활동이 앱 바에서 알고 사용할 제목을 설정할 수 있는 "label"이라는 속성이 있습니다.

strings.xml에서 앱 이름 뒤에 다음 상수를 추가합니다.

<string name="word_list_fragment_label">Words That Start With {letter}</string>

탐색 그래프에서 각 프래그먼트의 라벨을 설정할 수 있습니다. nav_graph.xml로 돌아가 구성요소 트리에서 letterListFragment를 선택하고 속성 창에서 라벨을 app_name 문자열로 설정합니다.

wordListFragment를 선택하고 라벨을 word_list_fragment_label로 설정합니다.

축하합니다. 지금까지 수고 많으셨습니다. 앱을 한 번 더 실행하면 Codelab을 시작할 때처럼 모든 것이 표시됩니다. 다만, 이제는 모든 탐색이 각 화면에 별도의 프래그먼트가 있는 단일 활동에서 호스팅됩니다.

이 Codelab의 솔루션 코드는 아래 표시된 프로젝트에 있습니다.

이 Codelab의 코드를 가져와서 Android 스튜디오에서 열려면 다음을 실행합니다.

코드 가져오기

제공된 URL을 클릭합니다. 브라우저에서 프로젝트의 GitHub 페이지가 열립니다.
프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 대화상자를 엽니다.

Eme2bJP46u-pMpnXVfm-bS2N2dlyq6c0jn1DtQYqBaml7TUhzXDWpYoDI0lGKi4xndE_uJw8sKfwfOZ1fC503xCVZrbh10JKJ4iEHdLDwFfdvnOheNxkokITW1LW6UZTncVJJUZ5Fw

대화상자에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.

Android 스튜디오에서 프로젝트 열기

Android 스튜디오를 시작합니다.
Welcome to Android Studio 창에서 Open an existing Android Studio project를 클릭합니다.

Tdjf5eS2nCikM9KdHgFaZNSbIUCzKXP6WfEaKVE2Oz1XIGZhgTJYlaNtXTHPFU1xC9pPiaD-XOPdIxVxwZAK8onA7eJyCXz2Km24B_8rpEVI_Po5qlcMNN8s4Tkt6kHEXdLQTDW7mg

참고: Android 스튜디오가 이미 열려 있는 경우 File > New > Import Project 메뉴 옵션을 대신 선택합니다.

PaMkVnfCxQqSNB1LxPpC6C6cuVCAc8jWNZCqy5tDVA6IO3NE2fqrfJ6p6ggGpk7jd27ybXaWU7rGNOFi6CvtMyHtWdhNzdAHmndzvEdwshF_SG24Le01z7925JsFa47qa-Q19t3RxQ

Import Project 대화상자에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
프로젝트 폴더를 더블클릭합니다.
Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
Run 버튼 을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.
Project 도구 창에서 프로젝트 파일을 살펴보고 앱이 구현된 방식을 확인합니다.

프래그먼트는 활동에 삽입할 수 있는 재사용 가능한 UI의 부분입니다.
프래그먼트 수명 주기는 활동 수명 주기와 다르며 뷰 설정이 onCreateView()가 아닌 onViewCreated()에서 발생합니다.
FragmentContainerView는 프래그먼트를 다른 활동에 삽입하는 데 사용되고 프래그먼트 간 탐색을 관리할 수 있습니다.

탐색 구성요소 사용

FragmentContainerView의 navGraph 속성을 설정하면 활동 내에서 프래그먼트 간에 이동할 수 있습니다.
NavGraph 편집기를 사용하면 탐색 작업을 추가하고 다양한 대상 간에 인수를 지정할 수 있습니다.
인텐트를 사용하여 탐색하려면 extras를 전달해야 하지만 탐색 구성요소는 SafeArgs를 사용하여 탐색 작업의 클래스와 메서드를 자동 생성하므로 인수를 통해 유형 안전성을 보장합니다.

프래그먼트 사용 사례

탐색 구성요소를 사용하면 여러 앱이 단일 활동 내에서 전체 레이아웃을 관리할 수 있으며 모든 탐색은 프래그먼트 간에 발생합니다.
프래그먼트를 통해 태블릿의 마스터/세부정보 레이아웃이나 동일한 활동 내의 여러 탭과 같은 일반적인 레이아웃 패턴이 가능해집니다.

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

기본 요건

학습할 내용

빌드할 프로그램

필요한 항목

이 Codelab의 시작 코드 다운로드

코드 가져오기

Android 스튜디오에서 프로젝트 열기

프래그먼트 수명 주기

직접 해보기

DetailActivity 삭제

탐색 종속 항목

Safe Args 플러그인

탐색 그래프란 무엇인가요?

MainActivity에서 FragmentContainerView 사용

탐색 그래프 설정

탐색 작업 만들기

WordListFragment의 인수 지정

시작 대상 설정

탐색 작업 실행

MainActivity 구성

코드 가져오기

Android 스튜디오에서 프로젝트 열기