[Android/안드로이드] navigation 사용하기(2) - 구성요소 사용방법

Navigation의 구성요소 사용방법에 대해 알아보겠습니다. 

Navigation 구성요소 (지난 포스트 참고)

• Navigation graph : 모든 대상 및 작업을 포함하는 리소스 파일 
• NavHostFragment : navigation graph에서 대상을 표시하는 빈 컨테이너 
• NavContoller : NavHost에서 앱 탐색을 관리하는 객체입니다. NavController는 사용자가 앱 내에서 이동할 때 NavHost에서 대상 콘텐츠의 전환을 오케스트레이션합니다. 

 

1. build.gradle(:app) 에 의존성 추가 

dependencies {
	...
    
    //navigation - start
    // Java language implementation
    implementation "androidx.navigation:navigation-fragment:$nav_version"
    implementation "androidx.navigation:navigation-ui:$nav_version"

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

    // Dynamic Feature Module Support
    implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

    // Testing Navigation
    androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"
    //navigation - end
}

 

2. Navigation graph 만들기 

 

• res 디렉토리에 "navigation" 디렉토리 추가  
• "navigation" 디렉토리 우클릭 New > Navigation Resource File 생성 

res/navigation 에 nav_home 추가

(nav_home.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" android:id="@+id/navigation">

</navigation>

위의 코드처럼 <navigation> 태그로 구성된 리소스 파일이 생성됨 

 

 

3. NavHostFragment 만들기 

 

* 저는 activity_main 을 navHost로 사용할것이므로 MainActivity와 activity_main을 활용하겠습니다. 

 

• activity_main.xml 의 Palette 창에서 "NavHostFragment" 검색 
• activity_main에 검색결과로 나온 "NavHostFragment" 드래그하여 추가

(activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_home" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

- android:name : NavHost 구현의 클래스 이름을 포함합니다.
- app:navGraph : NavHostFragment를 탐색 그래프와 연결합니다. 탐색 그래프는 사용자가 이동할 수 있는 이 NavHostFragment의 모든 대상을 지정합니다. (위에 작성한 nav_home으로 지정) 
- app:defaultNavHost="true" 속성을 사용하면 NavHostFragment에서 시스템 뒤로 버튼을 차단합니다. 하나의 NavHost만 기본값으로 지정할 수 있습니다. 동일한 레이아웃에 여러 개의 호스트가 있다면(예: 창 두 개 레이아웃) 하나만 기본 NavHost로 지정해야 합니다.

 

3. Nav_home 에 대상연결 

 

- 저는 탭을 두개를 구성하여 각각 다른 프레그먼트를 호출하도록 구성하였습니다 

 

(nav_home.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_home"
    app:startDestination="@id/view_fragment">


    <fragment
        android:id="@+id/view_fragment"
        android:name="net.soy.watermelon.MainFragment"
        tools:layout="@layout/fragment_main"
        >
        <action
            android:id="@+id/action_all_list"
            app:destination="@+id/fragment_all_list"/>
        <action
            android:id="@+id/action_my_list"
            app:destination="@+id/fragment_my_list"/>
    </fragment>

    <fragment
        android:id="@+id/fragment_all_list"
        android:name="net.soy.watermelon.AllListFragment"/>

    <fragment
        android:id="@+id/fragment_my_list"
        android:name="net.soy.watermelon.MyListFragment"/>
</navigation>

 

- <navigation app:StartDestination : 사용자가 앱을 열 때 처음으로 표시되는 화면이며 사용자가 앱을 종료할 때 마지막으로 보는 화면

- <action app:destination : 이동할 fragment 지정 

- <fragment android:name : 구현의 클래스 이름을 포함

 

4. NavContoller 설정 (대상 이동)

자세한 내용 참고 : 대상으로 이동 참고 

- navigation을 동작시키기 위해 fragment_main.xml 에 이벤트와 action을 연결해줘야함 

 

(MainFragment.xml)

class MainFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view =  inflater.inflate(R.layout.fragment_main, container, false)

        view.findViewById<Button>(R.id.all_list).setOnClickListener {
            view.findNavController().navigate(R.id.action_all_list)
        }
        view.findViewById<Button>(R.id.my_list).setOnClickListener {
            view.findNavController().navigate(R.id.action_my_list)
        }

        return view

    }

}

 

- fragment_main 의 id: all_list 버튼을 누를 경우 nav_host.xml 의 <action id: action_all_list 에 연결되어있는 fragment_all_list 로 이동 

 

이렇게 간단하게 navigation을 구현할 수 있다 

 

끝 

 

자세한 내용은 안드로이드 개발자 참고