[안드로이드 스튜디오 독학#50] Navigation

이 게시물은 다음 링크를 참조하여 학습했습니다.

탐색 구성요소 시작하기  |  Android 개발자  |  Android Developers

안드로이드(Android) - Navigation 사용법

안드로이드 Navigation Components로 Fragment들을 전환해 보자.

프레그먼트 전용 컨테이너 FragmentContainerView | 찰스의 안드로이드

FragmentContainerView  |  Android Developers

 

이번 게시물은 Navigation 이다.

Navigation Component는 Fragment에서 화면간의 이동을 쉽게 구현하도록 도와주는 역할을 한다.

그리고 스토리보드 형식으로 전체적인 화면간의 흐름을 볼 수 있다.

 

1. FragmentContainerView

기존에 Fragment를 사용할 때 FrameLayout을 사용했는데, Navigation을 사용할 때는 FragmentContainerView를 사용한다.

FragmentContainerView는 FrameLayout의 보완된 버전이라 생각하면 된다.

트랜잭션을 안정적으로 처리할 수 있고, 프래그먼트 동작을 조정할 수 있다.

 

FragmentContainerView는 다음과 같이 사용한다.

<androidx.fragment.app.FragmentContainerView
            android:id="@+id/nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
 
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph" />

android:name 속성에는 NavHostFragment를 넣어준다.

app:defaultNavHost 속성에는 host를 지정해주는 역할을 한다. system back button에 대한 권한을 가져온다고 한다.

app:navGraph 속성은 우리가 만들게 될 Navigation을 넣어주면 된다.

 

2. Navigation

네비게이션은 코드로 작성할수도 있고, 디자인 탭에서 스토리보드처럼 확인하고 수정할수도 있다.

nav_graph.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation
    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:id="@+id/nav_graph"
    app:startDestination="@id/fragment_1">
 
    <fragment
        android:id="@+id/fragment_1"
        android:name="com.example.navigationexample.Fragment1"
        android:label="Fragment1"
        tools:layout="@layout/fragment_1">
        <action
            android:id="@+id/action_fragment_1_to_fragment_2"
            app:destination="@id/fragment_2" />
        <action
            android:id="@+id/action_fragment_1_to_fragment_3"
            app:destination="@id/fragment_3" />
    </fragment>
 
    <fragment
        android:id="@+id/fragment_2"
        android:name="com.example.navigationexample.Fragment2"
        android:label="Fragment2"
        tools:layout="@layout/fragment_2">
        <action
            android:id="@+id/action_fragment_2_to_fragment_1"
            app:destination="@id/fragment_1" />
    </fragment>
 
    <fragment
        android:id="@+id/fragment_3"
        android:name="com.example.navigationexample.Fragment3"
        android:label="Fragment3"
        tools:layout="@layout/fragment_3">
 
        <action
            android:id="@+id/action_fragment_3_to_fragment_4"
            app:destination="@id/fragment_4" />
    </fragment>
 
    <fragment
        android:id="@+id/fragment_4"
        android:name="com.example.navigationexample.Fragment4"
        android:label="Fragment4"
        tools:layout="@layout/fragment_4">
 
    </fragment>
 
</navigation>

nav_graph.xml에서 fragment를 작성해주고 디자인탭에서 화살표를 지정해 액션을 넣어주거나 코딩을 통해 넣어주면 된다.

startDestination 속성을 이용해 시작 프래그먼트를 지정해주거나 디자인탭에서 프래그먼트를 클릭하고 집모양 버튼을 눌러주면 시작 프래그먼트를 설정해줄 수 있다.

navigation 디자인 탭

 

3. Action

navigation에서 만든 action은 아래처럼 사용하면 된다.

    lateinit var navHostFragment: NavHostFragment
    lateinit var navController: NavController
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
 
   navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
        navController = navHostFragment.navController
 
 
        binding.btnTest.setOnClickListener {
            navController.navigate(R.id.action_fragment_1_to_fragment_2)
        }
 
        binding.btnTest2.setOnClickListener {
            navController.navigate(R.id.action_fragment_2_to_fragment_1)
        }
 
    }

1. 먼저 NavHostFragment를 supportFragmentManager.findFragmentById()를 통해 지정해주고,

2. NavController를 지정해준다.

3. NavController.navigate()에 action ID값을 넣어주면 action이 동작하게 된다.

 

Fragment에서 action을 사용하고 싶을때는 아래처럼 사용하면 된다.

override fun initView() {
        binding.btnF1.setOnClickListener {
            it.findNavController().navigate(R.id.action_fragment_1_to_fragment_3)
        }
    }