[Android-Develop] Navigation Drawer - Part 1

1. Navigation Drawer ?

---

(1) 개요

---

 

안드로이드에는 다양한 VIEW 전환 방식이 존재한다. 이들 중  Navigation Drawer 는 "매우 직관적이고 최적화된 VIEW 전환 방식"이라고 할 수 있으며, 최근 대다수의 어플리케이션의 기본구조로 사용되고 있다. 단어에서 유추할 수 있듯이  서랍(Drawer)과 유사한 UI를 통해 각 화면(Fragment)를 이동(Navigate)하는 구조 임을 유추할 수 있다. 아래 그림은 실제 예시이다.

[그림 1] Navigation Drawer 예시

위 예시는 developer.android.com/training/implementing-navigation/nav-drawer.html#DrawerLayout에서 확인할 수 있다.  Navigation Drawer는 새 프로젝트 생성 시 선택적으로 제공되긴 하나, 사용자가 원하는 Drawer List, UI Component 삽입 등의 Customizing이 까다롭다. 

---

(2) 환경설정

---

 

① Resource 다운로드

아래  Icon Pack Resource 파일을 다운로드 받아 압축을 해제한다. 해당 파일에는 다양한 아이콘 파일들이 존재한다.

• Click & Download :  Android_Design_Icons_20130926.zip 

 

② 개발환경 구축 및 프로젝트 생성

개발환경은 아래와 같으며, IDE실행 후 Project를 생성한다.

• IDE : Intellij IDEA 14

• JDK : Java 1.7

• Android SDK : 2.33 - 6.0

• Builder : gradle

 

2. Custom Navigation Drawer 구현

---

(1) Layout File 및 Fragment 생성

---

 

 Navigation Drawer 내에 각각 3개의  Fragment 를 생성할 것이다. 따라서 필요한 Layout파일은 아래와 같이 4개를 추가, Main Activity Layout을 포함한 총 5개가 필요하다. 

[그림 2-1] Layout Resource File 생성

[그림 2-2] File name, Root Element 입력 후 OK 선택

[그림 2-3] 추가 된 Layout 파일 (drawer_item, fragment_first, fragment_second, fragment_third)

---

(2) Layout 정의

---

 

아래와 같이 라이브러리에 android support Library를 추가해야   DrawerLayout 의 사용이 가능하다. 

 

[그림 3] Imported Android Support Library

① activity_main.xml 작성

 activity_main.xml 에  android support Library 내   DrawerLayout 을 추가해야 한다. 이후, 중첩 View구현 시 사용되는  FrameLayout 와  Drawer 로 사용될  ListView 를 선언해준다. 이때,  ListView  내  android:layout_gravity 속성을 start로 지정하는 이유는, 우>좌 혹은 좌>우의 Drawer를 모두 사용하기 위함이다. 

 

# Layout_Gravity, Gravity ?

 

 layout_gravity 는 부모 컨테이너 내 View자체의 배치를 위한 속성이며, 

 gravity 는 View 내의 요소의 배치를 위한 속성이다.

 

<android.support.v4.widget.DrawerLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

	<FrameLayout
		android:id="@+id/content_frame"
		android:layout_width="match_parent"
		android:layout_height="match_parent" />

	<ListView
		android:id="@+id/left_drawer"
		android:layout_width="240dp"
		android:layout_height="match_parent"
		android:layout_gravity="start"
		android:choiceMode="singleChoice"
		android:divider="@android:color/transparent"
		android:dividerHeight="0dp"
		android:background="#ffff"/>
</android.support.v4.widget.DrawerLayout>

 

② drawer_item.xml 작성

 RelativeLayout(Drawer) 내 각  LinearLayout(item) 들을 배치한다. 이후  Drawer 의 Custom작업 시 수정할 파일이다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >

    <LinearLayout
            android:id="@+id/itemLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:orientation="vertical"
            android:layout_marginTop="0dp"
            android:background="?android:attr/activatedBackgroundIndicator">

        <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="55dp">

            <ImageView
                    android:id="@+id/drawer_icon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    />

            <TextView
                    android:id="@+id/drawer_itemName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceLarge"
                    />
        </LinearLayout>

        <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginBottom="1dp"
                android:layout_marginTop="1dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="#DADADC"
                />
    </LinearLayout>
</RelativeLayout>

 

 

③ fragment_layout_xxx.xml 작성

각 item선택 시 나타낼 실제 View인 3개의  Fragment 를 의미하는 파일이다. 직전에 생성한 각 fragment_layout_first, second, third layout파일에 작성한다. 이때, 각 Fragment를 구별하기 위해  id속성 을 반드시 수정해야 한다. 각 item별 표현할 View가 다르기 때문이다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
 
    <ImageView
        android:id="@+id/frag1_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"  />
 
    <TextView
        android:id="@+id/frag1_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge" />
 
</LinearLayout>

 

 

⑤ strings.xml 작성

 String Resource 를 관리하는  Strings.xml 에 Drawer의Open(활성화)과 Close(비활성화)를 표현할 문자열을 추가한다.

<string name="drawer_open">Open drawer</string>
<string name="drawer_close">Close drawer</string>

 

다음 포스팅  :  [Android-Develop] Navigation Drawer - Part 2