12-3 내비게이션 뷰 - 드로어 화면 구성

11장에서 androidx 라이브러리의 드로어 레이아웃을 살펴봤다. 처음엔 안 보이던 화면이 옆에서 끌려 나오면서 출력되는 기능이다. 이때 끌려나오는 화면을 어떻게 구성할지는 개발자 마음인데 대부분 앱에서는 다음과 같이 구성한다.

(책 이미지)

화면의 위쪽은 아이콘과 문자열 등을 배치했고 아래쪽은 메뉴항목을 나열했다.

만약 이런 모양으로 출력하려면 내비게이션 뷰(NavigationView)를 이용해야 한다. 내비게이션 뷰는 드로어 레이아웃으로 열린 화면에 출력되는 내용을 구성할 때 사용하는데, 보통은 메뉴 항목을 나열하는 형태로 구성한다.(androidx 라이브러리의 드로어 레이아웃은 드로어 화면이라는 '기능'을 담당하고 내비게이션 뷰는 그 화면의 '구성'을 담당한다. 12장의 머티리얼 라이브러리는 '디자인' 담당이란 것을 기억!)

 

내비게이션 뷰로 화면을 구성하려면 위쪽에 적용할 레이아웃 XML 파일과 아래쪽에 적용할 메뉴 XML 파일을 만든다. 두 XML 파일은 지금까지 살펴봤던 내용과 차이가 없다. 그런 다음 NavigationView의 속성으로 XML 파일을 알려주기만 하면 된다.

// 내비게이션 뷰 등록
<androidx.drawerlayout.widget.DrawerLayout ... 생략 ...> // 드로어 레이아웃에
    <LinearLayout ... 생략 ...>
    	(... 생략 ...)
    </LinearLayout>
    
    <com.google.android.material.navigation.NavigationView // 네비게이션 뷰를 등록
    	android:id="@+id/main_drawer_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header" // 윗칸인 headerLayout에 XML 파일 알려줌
        app:menu="@menu/menu_navigation" /> // 아랫칸인 menu에 XML 파일 알려줌
</androidx.drawerlayout.widget.DrawerLayout>

DrawerLayout 하위에 Navigation 뷰를 등록했다. 두 번째 태그로 NavigationView를 등록했으므로 끌려 나오는 화면을 내비게이션 뷰로 구성한 것이다. headerLayout 속성으로 내비게이션 뷰의 위쪽을 어떻게 출력할지를 지정했으며 menu 속성으로 아래쪽에 출력할 항목을 지정했다.

메뉴를 구성한 XML파일을 menu 속성에 지정만 해도 실행 결과처럼 항목이 자동으로 출력되며, 항목 선택 이벤트는 DrawerLayout의 setNavigationItemSelectedListener() 함수로 이벤트 핸들러를 지정하여 처리한다.

// 항목 선택 이벤트 핸들러
binding.mainDrawerView.setNavigationItemSelectedListener {
	Log.d("kkang", "navigation item click... ${it.title}")
    true
}