Android Design Support Library(l) – Navigation View


구글 I/O 2015에서 안드로이드 개발자를 위한 라이브러리를 발표했다. Design Support Library는 개발에 있어서 유용하게 사용할 수 있다. 특히 구글의 최신 디자인인 Material Design을 기반으로 하고 있기 때문에 디자이너에게는 훨씬 심플한 디자인을 개발자에게는 손쉽게 사용 할 수 있도록 도와준다.

안드로이드 서포트 라이브러리는 Cheesesquare Github를 통해 다양한 예제를 볼 수 있다. 단순히 예제를 보는것보다 각각의 새로운 기능에 대해 좀 더 깊이 있는 이야기를 써볼까 한다.

Navigation View

작년 Material 디자인을 발표 하면서 Navigation Drawer는 대다수의 랩에서 표준으로 사용되고 있다. Navigation View는 Drawer가 열였을때의 View를 손쉽게 구현하는 것을 도와준다.

navigation_drawer1-e1433071058464

이러한 Drawer View를 만들때 많을 시간을 소모 했다면 Navigation View를 이용한다면 훨씬 빠르게 구현 할 수있다.

 

작동은 어떻게?

Navigation View는 상단 헤더부분과 메뉴부분(또는 서브메뉴) 2가지로 구성된다. 상단 헤더부분은 개발자가 임의으로 레이아웃을 배치 할수 있으며 그아래 하단 메뉴부분은 메뉴통해 아이템이 생성되며 해당 아이템의 이벤트를 별도로 처리도 가능하다.

메뉴를 생성하여 Navigation View의 menu속성을 통해 menu resource를 지정해주면 된다.

메뉴 생성
<menu xmlns:android="http://schemas.android.com/apk/res/android">

 <group
 android:checkableBehavior="single">

 <item
  android:id="@+id/drawer_home"
  android:checked="true"
  android:icon="@drawable/ic_home_black_24dp"
  android:title="@string/home"/>

 <item
  android:id="@+id/drawer_favourite"
  android:icon="@drawable/ic_favorite_black_24dp"
  android:title="@string/favourite"/>
  ...

 <item
  android:id="@+id/drawer_settings"
  android:icon="@drawable/ic_settings_black_24dp"
  android:title="@string/settings"/>

 </group>
</menu>

하위 메뉴 생성

<item
  android:id="@+id/section"
  android:title="@string/section_title">
  <menu>
   <item
     android:id="@+id/drawer_favourite"
     android:icon="@drawable/ic_favorite_black_24dp"
     android:title="@string/favourite"/>

   <item
     android:id="@+id/drawer_downloaded"
     android:icon="@drawable/ic_file_download_black_24dp"
     android:title="@string/downloaded"/>
  </menu>
</item>
<android.support.v4.widget.DrawerLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:context=".MainActivity">

  <FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

  ...

  </FrameLayout>

  <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.v4.widget.DrawerLayout>

헤더영역은 사용자가 별도의 레이아웃을 생성 할 수있다. Navigation View에 headerLayout속성을 통해 레이아웃 리소스를 지정하면 된다.

코드를 통해 Navigation View에서 메뉴를 선택 시 클릭 리스너를 처리 하기위해서 다름과 같이 리스너를 달아준다.

NavigationView view = (NavigationView) findViewById(R.id.navigation_view);
view.setNavigationItemSelectedListener(new   NavigationView.OnNavigationItemSelectedListener() {
    @Override public boolean onNavigationItemSelected(MenuItem menuItem) {

    //TODO

    drawerLayout.closeDrawers();
    return true;
  }
});

이 처럼 Navigation View는 Material 디자인의 훨씬 빠르고 쉽게 Drawer기능을 개발하도록 도와준다.