[안드로이드 기능 분석 #1] NavigationDrawer

안드로이드 Navigation Architecture를 사용해서 Navigation Drawer를 구현 해 볼 것이다. Navigation Architecture에는 NavigationUI클래스가 포함되어 있다. 해당 클래스에는 Top app bar, Navigation Drawer, bottom navigation 관련 메서드들이 있다. NavigationDrawer은 상단 앱바 왼쪽의 아이콘을 클릭 시 나오는 메뉴 창 이다.

 

 

DrawerLayout을 추가하려면 DrawerLayout을 root로 설정해야 한다.

 

<?xml version="1.0" encoding="utf-8"?>
    <!-- Use DrawerLayout as root container for activity -->
    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
        <fragment
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:id="@+id/nav_host_fragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph" />

        <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true" />

    </android.support.v4.widget.DrawerLayout>

 

NavigationUI는 AppBarConfiguration 객체를 사용해서 앱 상단 왼쪽의 탐색버튼을 관리한다. 기본적으로 탐색버튼은 사용자가 탐색 그래프의 최상위 대상에 있을 때 (Navigation Drawer를 열었을 때 )숨겨지고 그 외 다른 대상에서는 버튼이 표시된다.

 

navigation graph에 정의 된 내용을 전부 사용하려면 navigation graph 전체를 전달 하면 된다.

 

val appBarConfiguration = AppBarConfiguration(navController.graph)

 

맞춤 설정하려면 아래와 같이 대상 ID 집합을 생성자에게 전달 한다.

 

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.android))

 

그리고 DrawerLayout을 AppBarConfiguration에 전달하여 NavigationGraph에 연결한다.

 

val appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

 

AppBarConfiguration에서 제공하는 Builder를 사용하는 방법도 있다.

 

appBarConfiguration =
	AppBarConfiguration.Builder(R.id.tasks_fragment_dest, R.id.statistics_fragment_dest)
    	.setDrawerLayout(drawerLayout)
        .build()

 

위에서 사용한 ID값 R.id.task_fragment_dest, R.id.statistics_fragment_dest들은 navigation graph에 정의된 action의 id값이다. 그러면 맨 위 gif의 NavigationDrawer의 TaskList, Statistics같은 이름은 어디서 정의해 줘야 할까. 이 부분은 app:menu에 menu resource파일을 정해줌으로 써 가능하다. 

 

    <!-- Navigation Drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:itemIconTint="@drawable/drawer_item_color"
        app:itemTextColor="@drawable/drawer_item_color"
        app:menu="@menu/drawer_actions" />

 

아래는 menu resource인 drawer_actions의 코드 이다. 메뉴 item들이 정의되어 있다. 이 메뉴 item의 id값은 해당 item을 클릭 했을 때 동작하길 원하는 navigation graph의 action id와 동일한 값이다.

 

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@id/tasks_fragment_dest"
        android:icon="@drawable/ic_list"
        android:title="@string/list_title" />
    <item
        android:id="@id/statistics_fragment_dest"
        android:icon="@drawable/ic_statistics"
        android:title="@string/statistics_title" />
</menu>

 

NavigationDrawer의 Header 부분을 꾸미고 싶다면 headerLayout부분에 원하는 layout파일을 할당 해 주면 된다.

 

 

그 후 Activity에서 NavigationView의 setupWithNavController()를 호출한다.

 

val navController = findNavController(R.id.nav_host_fragment)
        findViewById<NavigationView>(R.id.nav_view)
            .setupWithNavController(navController)