[2017.11.29] 81. NavigationView 개념과 실습

도입

이번 포스팅에서는 NavigationView 개념을 알아보고 실습할 예정이다.

개념

Navigation View 앞서 안드로이드에서 Navigation의 의미가 궁금했다. Navigation이라는 단어를 들었을 때 '나침판, 항해, 등' 이런 느낌으로 다가왔다. 안드로이드에서 Navigation은 '화면 탐색'이라고 생각하면 좋을 것 같다. Navigation bar는 화면의 이동을 정하는 bar이고 지금 정리할 Navigation View는 '화면 탐색을 도와주는 View'이다.

안드로이드 공식 홈페이지에서 Navigation View의 의미는

Navigation View은 앱에서 표준 Navigation 메뉴를 의미한다.

실습

Navigation View는 공식 홈페이지에 '일반적으로 DrawerLayout 안에 배치된다'고 한다. 그림으로 레이아웃 계층을 확인해보면

레이아웃 계층	실제 뷰

Step1. 레이아웃 설정

위 그림과 같이 레이아웃을 설정한다. 

(※ DrawerLayout 안에는 NavigationView를 제외하고는 1개의 View or ViewGroup만 존재할 수 있다고 한다.)

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
 
    // Data Binding 공부 중이라 Layout만 보면된다.
    <data>
        <variable
            name="view"
            type="com.heepie.soundhub.view.ListView"/>
        <variable
            name="viewModel"
            type="com.heepie.soundhub.viewmodel.ListViewModel"/>
    </data>
 
    <!-- DrawerLayout에는 NavigationView를 제외한 오직 1개의 View or ViewGroup만 설정 가능 -->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
 
            <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:expanded="false"
                >
 
                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/colorPrimary"
                    android:minHeight="?attr/actionBarSize"
                    android:theme="?attr/actionBarTheme"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
 
                <android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
 
                </android.support.design.widget.TabLayout>
            </android.support.design.widget.AppBarLayout>
 
            <android.support.design.widget.CoordinatorLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
 
                <android.support.v7.widget.RecyclerView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:context="@{view}"
                    app:setOuterViewModel="@{viewModel}"
                    >
 
                </android.support.v7.widget.RecyclerView>
            </android.support.design.widget.CoordinatorLayout>
        </LinearLayout>
 
        <!-- app:menu는 메뉴 설정 -->
        <android.support.design.widget.NavigationView
            android:id="@+id/navigation"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start|left"
            app:menu="@menu/drawer"
            />
 
    </android.support.v4.widget.DrawerLayout>
</layout>

Step2. Navigation View에 들어갈 메뉴가 정해져 있는 xml 설정

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        // 해당 메뉴 아이콘, 타이틀 설정
        <item
            android:id="@+id/nav_dashboard"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Dashboard" />
        <item
            android:id="@+id/nav_explore"
            android:icon="@drawable/ic_launcher_foreground"
            android:title="Explore" />
 
    </group>
 
    <item android:title="Sub menu">
        <menu>
            <item
                android:icon="@drawable/ic_launcher_foreground"
                android:title="Event" />
            <item
                android:icon="@drawable/ic_launcher_foreground"
                android:title="Home" />
        </menu>
    </item>
</menu>

문제점

레이아웃까지 설정했지만.. 다음과 같이 메뉴를 선택하는 햄버거 버튼이 나오지 않는다.

해결책 

아래와 같이 Toogle을 설정해야 햄버거 버튼이 생성된다.

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, 0, 0);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();

스크린 샷

#NavigationView #네비게이션뷰 #NavigationView 햄버거 #NavigationView 햄버거 버튼