Navigation으로 Fragment를 전환시켜보자!

Navigation In JetPack

보통 Activity의 전환은 Intent, Fragment의 전환은 transaction을 사용했다.
Jetpack 라이브러리 내의 Navigation을 이용하면 프래그먼트간의 전환을 구현할 수 있다.

 

1. dependency 추가하기

build.gradle(app)에 다음과 같이 dependency를 추가해준다.

dependencies {  
    def nav_version =  "2.3.3"  
    implementation "androidx.navigation:navigation-fragment-ktx:$nav_version" 
    implementation "androidx.navigation:navigation-ui-ktx:$nav_version"  
 }

 

2. 프래그먼트 생성

액티비티에 담을 프래그먼트 3개를 생성하였다.
(MapFragment.kt, FriendsListFragment.kt, MyPageFragment.kt)

 

3. navigation xml 파일 생성

( res >> New >> Android Resource File )
다음과 같이 resource type은 navigation으로 설정해준다.

 

4. Navigation에 Fragment 추가

만들어준 navigation xml파일에 본인이 컨트롤 하고 싶은 fragment들을 추가하면 된다.

아래의 사진처럼 상단의 +버튼을 눌러서 앞서 만들어 두었던 fragment를 추가할 수 있다.

 

5. Activity에 NavHostFragment 추가하기

NavhostFragment는 프래그먼트를 담아놓고 네비게이션을 역할을 수행할 수 있도록 설정하는 빈 컨테이너라고 이해하면 된다.

• android:name 속성을 필수로 지정해주어야 한다.

• app:navGraph 속성에는 navigation xml파일의 layout id를 지정해준다.

• app:defaultNavHost 속성은 시스템의 뒤로가기 버튼을 가로챌 수 있도록 한다.

    <androidx.constraintlayout.widget.ConstraintLayout  
        xmlns:android="http://schemas.android.com/apk/res/android"  
        xmlns:app="http://schemas.android.com/apk/res-auto"  
        xmlns:tools="http://schemas.android.com/tools"  
        android:layout_width="match_parent"  
        android:layout_height="match_parent"  
        tools:context=".model.MainActivity">  
  
        <androidx.fragment.app.FragmentContainerView
             android:id="@+id/nav_host_fragment"  
             android:layout_width="0dp"  
             android:layout_height="0dp"  
             android:name="androidx.navigation.fragment.NavHostFragment"  
             app:layout_constraintTop_toTopOf="parent"  
             app:layout_constraintBottom_toBottomOf="parent"  
             app:layout_constraintStart_toStartOf="parent"  
             app:layout_constraintEnd_toEndOf="parent"  
             app:defaultNavHost="true"  
             app:navGraph="@navigation/navigation"/>  
  
    </androidx.constraintlayout.widget.ConstraintLayout>

 

6. navigation action설정하기

navigation.xml의 Design탭으로 들어가면 프래그먼트들간의 전환 액션을 쉽게 설정할 수 있다.
전환시키고 싶은 프래그먼트로 마우스로 드래그 하여 간편하게 action을 설정할 수 있다.

만약 위의 화면처럼 프래그먼트들의 프리뷰가 안나오고 빈 컨데이터로 나온다면,
아래처럼 fragment에 해당하는 layout을 설정해주면 된다.

 

7. Activity에 NavController 등록

Activity에 만들어주었던 NavHostFragment에 NavController를 달아준다.

class MainActivity : AppCompatActivity() {  
    private lateinit var binding: ActivityMainBinding  
    lateinit var navController: NavController  

    override fun onCreate(savedInstanceState: Bundle?) {  
        super.onCreate(savedInstanceState)  
        binding = ActivityMainBinding.inflate(LayoutInflater.from(this))  
        setContentView(binding.root)  

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

   }
}

 

8. Fragment에서 Action 이벤트 설정

MapFragment에 버튼을 만들어 두고 클릭시 navigation에서 만들어주었던 action이 실행되도록 설정하였다.

이처럼 다른 프래그먼트에서도 연관된 액션이 실행되도록 설정해주면 된다.

class MapFragment : Fragment() {  
    private lateinit var binding: FragmentMapBinding  

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

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {  
        super.onViewCreated(view, savedInstanceState)  
        goToFriendsListFragment()  
    }  

    private fun goToFriendsListFragment() {  
        val navController = Navigation.findNavController(binding.root)  
        binding.buttonNext.setOnClickListener {  
            navController.navigate(R.id.action_mapFragment_to_friendsListFragment)  
        }  
    }  
}