[안드로이드] Navigation Drawer 사용하기

Navigation Drawer

이것또한 많은 App에서 볼 수 있는 형태로 서랍을 여는 듯한 애니메이션을 가지고 있다

이 것은 기본으로 들어있진 않고 gradle에 추가해야 사용이 가능하다

compile 'com.android.support:design:24.0.0'

먼저 Navigation Drawer를 사용하기 위해서는 Layout을 만들어줘야 하는데

상위 레이아웃에 리니어나 릴레이티브를 사용하지 않고 DrawerLayout을 가장 상위 레이아웃으로 설정한다

이후 RelativeLayout, NavigationView를 하위 레이아웃으로 설정한다

RelativeLayout 내부에는 Toolbar를 넣어주도록 한다

Component Tree는 다음과 같다 (xml > Design 탭에서 확인이 가능하다)

- res/values/styles.xml

AppTheme의 속성을 변경한다

Toolbar를 사용하기 위해 ActionBar가 없는 것으로 변경해준다

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>

- activity_main.xml

위에 보여준 component Tree대로 레이아웃을 설정한다

설명한대로 DrawerLayout이 최상위 뷰인 것을 볼 수 있다

Toolbar를 배치해주는데 이때 처음보는 글들이 있다

?attr/ -> 이것은 현재 테마에 지정된 값을 사용한다는 의미이다

Toolbar의 높이를 설정해야하므로 actionBarSize와 동일하게 한다. 이걸 누락하면 전체화면을 툴바가 덮는다

배경은 colorPrimary라고 되어있는데 이것은 res/values/color.xml에서 확인이 가능하다

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark">
 
        </android.support.v7.widget.Toolbar>
 
    </RelativeLayout>
 
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/drawer"></android.support.design.widget.NavigationView>
 
    <fragment
        android:id="@+id/main_fragment"
        android:name="com.dev.choihyesun.studyapp.MainFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
</android.support.v4.widget.DrawerLayout>

NavigationView를 설정하여 주고 반드시 layout_gravity속성을 추가하여준다

start로 하면 왼쪽에서 오른쪽으로 창이 열리며

end로 하면 오른쪽에서 왼쪽으로 창이 열리게 된다

NavigationView에 메뉴를 출력하게 하기 위해서 app:menu속성에 @menu/drawer를 추가한다

- drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:gravity="bottom">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Navigation Drawer"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
 
</LinearLayout>
 

- res/menu/drawer.xml

res폴더에 menu폴더를 새로 생성한다. 이곳에는 menu와 관련된 레이아웃이 위치한다

여기서 만드는 xml은 자동으로 menu, group, item형식으로 짜여진다

<?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/navigation_item_wordbook"
            android:checked="true"
            android:title="@string/nav_menu_1" />
        <item
            android:id="@+id/navigation_item_camera"
            android:title="@string/nav_menu_2" />
        <item
            android:id="@+id/navigation_item_write"
            android:title="@string/nav_menu_3" />
 
        <item
            android:id="@+id/navigation_item_settings"
            android:title="@string/nav_menu_4" />
    </group>
</menu>
 

Preview상태에서 보면 등록한 메뉴는 다음과 같이 뜨게 된다

기본적으로 메뉴는 아래와 같은 아이콘을 누르면 뜨게 되는데 우리는 이것을 NavigationView에 위치하게 한 것이다.

@string/nav_menu_1 은 res/values/string.xml에서 정의할 수 있다.

이제 MainActivity.java에서 생성한 툴바, 네비게이션뷰를 연결하여준다

우선 변수에 대해서는 전역변수로 선언해주었다. 이때 private으로 해주는 것이 좋다

Toolbar를 초기화하고 연결해주고 ic_menu.png파일을 보이도록 setHomeAsUpIndicator()메소드에 매개변수로 넣어준다

NavigationView의 아이템을 클릭하면 이벤트가 일어나도록 하기 위해 OnNavigationItemSelectedListener()를 사용한다

아이템이란 메뉴라고 생각하면 되고 눌린 아이템의 아이디를 가져와서 그에 해당하는 소스코드를 실행한다.

익명클래스로 사용한다

...
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mainFragment = (MainFragment) getSupportFragmentManager().findFragmentById(R.id.main_fragment);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        navigationView = (NavigationView) findViewById(R.id.navigation_view);
 
        // 툴바 생성 및 세팅하는 부분
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        actionBar.setDisplayHomeAsUpEnabled(true);
 
        // 네비게이션 뷰 아이템 클릭시 이뤄지는 이벤트
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                item.setChecked(true);
                drawerLayout.closeDrawers();
 
                int id = item.getItemId();
                // 각 메뉴 클릭시 이뤄지는 이벤트
                switch (id){
                    case R.id.navigation_item_wordbook:
                        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
                        break;
 
                    case R.id.navigation_item_camera:
                        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
                        break;
 
                    case R.id.navigation_item_write:
                        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
                        break;
 
                    case R.id.navigation_item_settings:
                        Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_LONG).show();
                        break;
                }
 
                return true;
            }
        });
        Log.e("Frag", "Fragment");
    }
 
    // 햄버거 버튼 클릭 시 드로어 열리도록 하는 곳
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
 
        switch (id){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
...

또한 햄버거버튼(가로로 세줄있는 버튼)이 클릭되었을 때로 드로어가 열리도록 하기 위해 함수를 사용한다

@Override라고 되어있는 것은 모두 상속 클래스에 정의되어있는 것이다.

버튼이 클릭된 경우 openDrawer()메소드를 이용하고 매개변수로 GravityCompat.START를 넘긴다

start는 왼쪽에서 오른쪽으로 열리도록 하는 것이다.

이렇게 하면 아주 잘 열리는 NavigationDrawer를 만들 수 있다!!

이미지 파일은 첨부파일에 있다

ic_menu.png.zip