들어가기 전에

Play스토어에 올라가 있는 앱들을 보면 위쪽에 있는 타이틀의 왼쪽에 햄버거 모양의 아이콘이 있는 경우가 있습니다.

그리고 그 아이콘을 누르면 왼쪽이나 오른쪽에서 스윽~ 하고 화면이 나타나죠.

이 화면을 바로가기 메뉴 화면이라고 부를 수 있습니다.

안드로이드에서는 NavigationDrawer라는 이름으로 만들어서 제공하고 있습니다.

바로가기 메뉴도 프래그먼트로 구성되기 때문에 프래그먼트에 대해 잘 이해하고 있으면 쉽게 만들 수 있습니다.

바로가기 메뉴를 어떻게 만드는지 알아봅시다.

학습 목표

1. 바로가기 메뉴를 만들어봅시다.
2. 바로가기 메뉴의 화면에 보이는 부분이 프로젝트 내의 어떤 코드와 일치하는지 설명해봅시다.

핵심 단어

• 바로가기 메뉴
• NavigationDrawer
• 프래그먼트 (Fragment)

학습하기

바로가기 메뉴의 구성

바로가기 메뉴는 어떤 화면의 좌상단에 위치한 햄버거 모양 아이콘을 눌렀을 때 나타나는 화면을 말합니다.

웹이나 앱에서 자주 사용되는 기능이며 안드로이드에서는 NavigationDrawer라는 이름의 클래스로 제공됩니다.

바로가기 메뉴는 몇 개의 화면에서 공통으로 보이도록 할 수 있기 때문에 빠르게 메뉴 기능에 접근하고자 할 때 사용합니다.

따라서 여러 개의 화면에 공통으로 적용되어야 합니다.

NoActionBar 스타일 설정

바로가기 메뉴는 화면에 보이는 부분이므로 XML 레이아웃에서 넣어주는 것이 좋습니다.

다만 위쪽 타이틀 부분을 포함해서 화면의 전체적인 구성을 모두 넣어주어야 하므로 조금 많은 코드가 필요합니다.

하지만 한 번 익숙해지면 그대로 복사해서 사용할 수 있습니다.

액션바라 불리는 타이틀 부분이 XML 레이아웃에서 추가되므로 액티비티의 스타일은 액션바가 없는 NoActionBar로 설정해야 합니다.

AndroidManifest.xml 파일에서 액티비티에 스타일을 적용합니다.

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:theme="@style/AppTheme.NoActionBar">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

AppTheme.NoActionBar 스타일은 /res/styles.xml 파일에 추가합니다.

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

XML 레이아웃 정의

XML 레이아웃에서는 상단에 AppBarLayout 태그로 화면 상단에 액션바를 보여주도록 합니다.

그리고 그 아래에는 FrameLayout으로 메인 화면에 보여줄 내용을 중첩해서 넣을 수 있도록 해줍니다.

그 아래에 있는 NavigationView가 바로가기 메뉴를 위한 뷰인데 평소에는 보이지 않다가 햄버거 모양 아이콘을 눌렀을 때 보이게 됩니다.

다음은 XML 레이아웃의 기본 구조입니다. (속성은 일부 생략되어 있습니다.)

<android.support.v4.widget.DrawerLayout>

    <android.support.design.widget.CoordinatorLayout>

        <android.support.design.widget.AppBarLayout>

            <android.support.v7.widget.Toolbar />

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

        </FrameLayout>

    </android.support.design.widget.CoordinatorLayout>

    <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"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

바로가기 메뉴를 위한 뷰에서는 상단에 보이는 것이 nav_header_main.xml에 들어가 있고 하단에 보이는 것이 menu 폴더 안의 activity_main_drawer에 들어가 있다는 것을 알 수 있습니다.

바로가기 메뉴 선택 시의 기능

소스 코드에서는 약간의 코드가 들어가 있는 것을 볼 수 있습니다.

그 코드를 그대로 두고 필요한 부분만 수정합니다.

바로가기 메뉴 뷰에서 메뉴가 선택되었을 때 호출되는 메소드는 다음과 같습니다.

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.nav_0) {
        Toast.makeText(this, "첫번째 메뉴 선택됨.", Toast.LENGTH_LONG).show();
        onFragmentSelected(0, null);
    } else if (id == R.id.nav_1) {
        Toast.makeText(this, "두번째 메뉴 선택됨.", Toast.LENGTH_LONG).show();
        onFragmentSelected(1, null);
    } else if (id == R.id.nav_2) {
        Toast.makeText(this, "세번째 메뉴 선택됨.", Toast.LENGTH_LONG).show();
        onFragmentSelected(2, null);
    }

    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

생각해보기

1. 바로가기 메뉴를 볼 수 있게 하는 햄버거 모양 아이콘을 앱의 모든 화면에 넣는 것이 좋을까요?
2. 바로가기 메뉴를 보여주는 것과 옵션 메뉴를 보여주는 것과의 차이점은 무엇일까요?

참고 자료