Navigation Drawer 의 Layout구조

복잡해 보이지만, 알고보면 간단한 Navigation Drawer Activity의 구조

안드로이드 모바일 앱에서 많이 보이는 Navigation Drawer Activity의 '레이아웃 구조'에 대해 정리 합니다.

뜯어보면 몇가지 레이아웃을 조합해서 만들어 놓은 UI 형태인데,

처음 접할때는 전체 구조가 머리속에 잘 안들어 오더라구요.

Navigation Drawer는 Android 프로젝트 생성시에도 기본으로 제공되는 Activity 타입니다.

Navigation Drawer Activity타입으로 프로젝트를 생성하면

기본으로 네개의 레이아웃을 생성해 주는데요, 각 레이아웃에 대해 간단히 분석해 보겠습니다.

(* app_bar_main.xml에 생성되는 FloatingActionButton은 설명의 편의를 위해 삭제 했습니다.)

[activity_main.xml]

DrawerLayout안에 app_bar_main을 포함하고 NavigationView를 배치한 형태 입니다.

app_bar_main은 include 형태로 포함되어 있으며, 

<include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" />

nav_header_main은 NavigationView의 headerLayout 속성으로 설정되어 NavigationView가 그려질때 Header 영역에 그려지게 됩니다.

하위에 표시되는 메뉴는 activity_main의 app:menu="@menu/activity_main_drawer" 에 의해서 결정됩니다.

<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" />

@drawer_layout ( DrawerLayout )

DrawerLayout은 윈도우의 한 쪽 혹은 양쪽 모서리에서 끌어낼 수있는 '서랍(Drawer)' 형태의 뷰와 

인터렉션을 위한 윈도우의 최상위 컨테이너 역할을 하는 레이아웃 입니다. ( ???? )

activity_main.xlm의 전체를 감싸고 있는 레이아웃이 DrawerLayout(@drawer_layout)위젯이며 

아래와 같은 코드를 통해 ActionBarDrawerToggle 인스턴스와 결합됩니다.

뿐만 아니라, Navigation View를 열거나 닫기 위해 다음과 같이 사용됩니다.

@nav_view ( Navigation View )

Navigation View는응용 프로그램의 표준 탐색(Navigation) 메뉴를 대표(?) 합니다. (메뉴 내용은 메뉴 리소스 파일로 채울 수 있습니다.)

NavigationView.OnNavigationItemSelectedListener 리스너를 설정하여, navigation menu 선택에 따른 동작을 처리 할 수 있습니다.

nav_header_main.xml

보통 홈버튼을 누르게 되면 펼쳐지는 Navigation뷰의 Header 부분을 표시하는 레이아웃 입니다.

이 레이아웃은 Navigation View의 header 영역을 표시하는 용도로 사용됩니다.

(* 포함된 ImageView나 TextView등의 위젯은 본 주제에서는 큰 의미가 없으므로 설명은 스킵합니다.)

app_bar_main.xml

Navigation View가 펼쳐지기 전에 전체 스크린으로 보게 되는 레이아웃 입니다.

여기부터는 일반적으로 구성되는 기본 레이아웃과 크게 다르지 않습니다. 

상단에 toolbar를 품은 AppBarLayout 을 배치하고, 

아래에 실제 내용을 보여줄 content_main을 include 하고 있습니다.

<include layout="@layout/content_main" />

content_main.xml

실제 보여주고자 하는 내용을 표현하게 될 content_main layout입니다.

ConstraintLayout이 content_frame을 감싸고 있습니다.

Navigation Drawer Layout은 일반적으로 Navigation 메뉴를 선택시 Fragment를 교체하는 형태로 사용되는데,

다름과 같은 코드로 content_frame을 교체하는 방식으로 사용된다.

case R.id.nav_tools {

      FragmentTransaction ft = getFragmentManagerInstance().beginTransaction();
  
      Fragment  fragment = new ToolFragment();
      ft.replace(R.id.content_frame, fragment, TOOL_FRAGMENT_TAG);
      ft.commit();
      break;
 }

Navigation Drawer ...

영어를 그대로 읽고 쓰다 보니 생각해 본적이 없었는데

직역하면 '탐색 서랍' 인가요???