NavigationView를 이용한 Navigation Drawer 구현하기

오늘은 안드로이드에서 자주 쓰이는 UI중 왼쪽 상단의 햄버거 버튼을 누르면 왼쪽에서 슬라이딩되면서 나오는 메뉴UI가

Navigation Drawer인데요. 보통은 이 UI를 ListView를 이용해서 구현하는데요.

NavigationView를 사용하면서 굉장히 편리해 졌습니다.

그럼 하나씩 구현해 보도록 하겠습니다.

1. SupportLibrary 

NavigationDrawer는 SupportLibrary의 v4를 필요로 하는데요.

우선 이 라이브러리먼저 추가하고 가겠습니다.

app level의 build.gradle에 아래의 코드를 추가해 주면 됩니다.

2.  DrawerLayout

Navigation Drawer를 구현하기위해서,

먼저 XML파일에서 DrawerLayout을 정의하고 가겠습니다.

우선 DrawerLayout의 HierArchy부터 가볍게 보고 가겠습니다.

ViewGroup을 상속받고 있네요. 

DrawerLayout안에,

Contents를 표현한 FrameLayout과

NavigationView를 집어넣어 줍니다.

NavigationView의 Hierarchy도 확인해보고 갈텐데요.

FrameLayout을 상속받고 있군는 것이 눈에 띄네요.

공식문서에 따르면, 주의해야할 점으로 

Content뷰를 먼저 배치하고 나서, Drawer뷰를 배치하라고 되어있습니다.

따라서 Content뷰에 해당하는 LinearLayout을 먼저 배치하고,

NavigationView를 배치하는데, 이 때 android:layout_gravity="start"를  설정해 주어서, 

왼쪽으로 배치되도록 하겠습니다. 

(저에게만 일어나는 현상일 수 있으나, layout_gravity가 자동완성이 않되는군요.)

또, DrawerLayout에도 openDrawer = "start"라고 지정해 줍니다.

NavigationView에는,

두가지 attribute을 추가해 주어야 하는데요.

바로, 아래 이미지에서 파란색으로 표시되어있는 곳인데요.

headerLayout에는 NavigationDrawer에서 Header로 사용되는 곳에 해당하는 부분과 menu입니다.

먼저 HeaderView를 정의해 보겠습니다.

간단히 이미지와 텍스트를 배치하였네요.

아래와 같은 모습이 되겠습니다.

이제, menu xml을 정의해 볼텐데요.

아래와 같이 메뉴를 크게 두가지 넣어주었습니다.

checked된 메뉴는 선택되었다고 확실히 하일라이트 되서 보여집니다.

큰제목아래의 부제목 메뉴들도 아래에 추가적으로 넣어주겠습니다.

이제 위에서 설정한 메뉴들을 눌렀을 때 감지할 수 있는 Listener가 필요할 것 같지 않으신가요?

4. OnNavigationItemSelectedListener에서 그것들을 구현해 보겠습니다.

그전에,  DrawerLayout을 찾아서, DrawerListener를 붙이고,

NavigationDrawer가 toggle되는 것에 반응하고 sync하는 것을 구현해줘야 하는데요.

아래에서 보도록 하겠습니다.

3. NavigationDrawer 구현

DrawerLayout을 찾아서, Listener를 붙이겠습니다.

이 때, CustomToolbar를 쓰신다면, Toolbar와 Drawer를 오픈하기위한 이미지버튼을 찾아놔 줘야 합니다.

먼저 Toolbar를 찾아와서, ActionBar를 set해주는 메소드인 setSupportActionBar()를 사용하겠습니다.

CustomToolbar에 대해서는 아래 링크를 참조해주세요.

>> 안드로이드 Custom Toolbar 와 Theme 적용하기 <<

다음으로, 누르면 Drawer가 open되도록 할 이미지를 찾아놓고,

OnClickListener를 set해주겠습니다.

(참고로 이 이미지는 Toolbar안에 배치되어 있습니다.)

그럼 onClickListener를 구현해 보겠습니다.

이미지가 닫혀있으면, 좌측에서 열어주고, 열려있으면 닫아주도록 구현하였습니다.

4. OnNavigationItemSelectedListener 구현

위에서 정의한 메뉴들을 감지하고, 그에 대한 반응을 구현해야 하는데요.

OnNavigationItemSelectedListener 를 set해주고, implement해주면 됩니다.

그런데, 어디다 이 listener를 어디다 set 해주어야 할까요?

바로, XML에서 만들었던 NavigationView에 걸어주면 됩니다.

리스너를 set해주는 메소드가 제공되고 있는데요.

setNavigationItemSelectedListener() 를 이용하면 됩니다.

implement하면, 구현하라고 나오는 메소드가 onNavigationItemSelected 입니다.

아래에서 차근차근 구현해 보겠습니다.

이번엔 onNavigationItemSelected을 구현해 보겠습니다.

이전에 menu에 설정했던 메뉴들의 아이디를 찾아서 매치시켜보고,

맞으면 해당 fragment를 더해주면 되겠네요.

(Fragment를 생성하는 구체적인 부분은 이 글에서는 다루지 않겠습니다~)

다 끝나면, DrawerLayout을 닫아주는 것도 잊지 말아야 합니다.

4. Toggle 구현

남은 일은 toggle 부분을 구현해 주는 일인데요.

먼저, DrawerLayout을 찾아와 줍니다.

다음으로, 아래와 같이 ActionBarDrawerToggle객체를 생성하는데요.

인자로, 찾아온 DrawerLayout을 넘겨줍니다.

그리고 DrawerLayout에, DrawerListener를 달아주고 syncState()메소드를 사용해 주면 됩니다.

5. 오른쪽으로 열리도록 구현

4까지 구현을 하였다면, NavigationDrawer를 구현할 수 있는데요.

오른쪽으로 구현할려면 어떻게 해야할까요?

좌측을 우측으로 바꾸어야 하는데요.

START로 했던 것을 END로 바꾸어주면 됩니다.

onNavigationItemSelected를 구현한 코드에서 GravityCompat.START를 END로 바꾸어 주구요.

툴바의 이미지 클릭시의 OnClickListener에서도 GravityCompat.START를 END로 바꾸어 줍니다.

마지막으로 XML의 tools:openDrawer="start"도 END로 바꾸어 주기만 하면,

우측에서 열리는 NavigationDrawer를 생성할 수 있습니다.