Navigation Drawer를 사용해보자.

이전 포스팅에서 언급했던 Navigation Drawer를 ViewPager 에 적용해 보도록 하겠습니다.

ViewPager 와 마찬가지로 android.support.v4.jar 파일을 추가하셔야 합니다.

이전 포스팅 참조.

DrawerLayout 을 이용해서 하게 됩니다.

실행 화면 먼저 보자면

이런식으로 동작하게 만들겁니다.

링크 :

http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

네비게이션 영역에 버튼을 만들고 기본 페이져 어뎁터로 같은 동작을 하게끔 만들었습니다.

XML 의 변경된 점은

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/navigation_drawer"

    android:layout_width="match_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical" >

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical" >

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:orientation="horizontal" >

                <Button

                    android:id="@+id/btn_menu"

                    android:layout_width="40dp"

                    android:layout_height="40dp"

                    android:layout_marginLeft="5dp"

                    android:background="@drawable/menu" />

                <TextView

                    android:layout_width="fill_parent"

                    android:layout_height="fill_parent"

                    android:layout_centerInParent="true"

                    android:layout_gravity="center"

                    android:layout_weight="1"

                    android:text="Navigation Drawer"

                    android:textColor="#ffffff"

                    android:textSize="30sp" />

            </LinearLayout>

            <LinearLayout

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:orientation="horizontal" >

                <Button

                    android:id="@+id/btn_01"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="버튼1" />

                <Button

                    android:id="@+id/btn_02"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="버튼2" />

                <Button

                    android:id="@+id/btn_03"

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="버튼3" />

            </LinearLayout>

        </LinearLayout>

        <!-- 프래그먼트 노출 영역 -->

        <android.support.v4.view.ViewPager

            android:id="@+id/pager"

            android:layout_width="match_parent"

            android:layout_height="fill_parent"

            android:layout_weight="0.8"

            android:orientation="vertical" >

        </android.support.v4.view.ViewPager>

        <LinearLayout

            android:id="@+id/target_fragment"

            android:layout_width="match_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical"

            android:visibility="gone" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/navigation"

        android:layout_width="300dp"

        android:layout_height="match_parent"

        android:layout_gravity="left" 

        android:background="#333333">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="0.7"

            android:orientation="vertical"

            >

<TextView

                    android:layout_width="fill_parent"

                    android:layout_height="wrap_content"

                    android:text="Navigation Area"

                    android:textColor="#ffffff"

                    android:textSize="30sp" />

            <TableLayout

                android:id="@+id/gameCategory"

                android:layout_width="fill_parent"

                android:layout_height="match_parent" 

                android:layout_gravity="center"

                android:gravity="center" >

                <TableRow

                    android:layout_width="fill_parent"

                    android:layout_height="match_parent"

                    android:layout_marginTop="20dp" >

                    <Button

                        android:id="@+id/navi_btn1"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:layout_weight="1"

                        android:text="버튼1" />

                    <Button

                        android:id="@+id/navi_btn2"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:layout_weight="1"

                        android:text="버튼2" />

                    <Button

                        android:id="@+id/navi_btn3"

                        android:layout_width="fill_parent"

                        android:layout_height="wrap_content"

                        android:layout_weight="1"

                        android:text="버튼3" />

                </TableRow>

            </TableLayout>

        </LinearLayout>

    </LinearLayout>

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

android.support.v4.widget.DrawerLayout 으로 전체 레이아웃을 감싸고 

커니님의 말에 의하면 

드로어로 표시되는 뷰를 반드시 주 컨텐츠를 표시할 뷰보다 나중에 선언하는 것입니다. 만약 이 순서를 지키지 않으면, 드로어 영역이 표시되기는 하지만 드로어 영역을 클릭할 수 없게 되는 해괴한(...) 상황에 빠질 수 있습니다.

 - from http://androidhuman.com/524

있다 하오니 순서를 꼭 지켜 주세요.

코드 상에 작성내용은 별반 다른게 없으니 생략하도록 하겠습니다.

일반소스들이 ActionBar 프로젝트로 생성이 많이 되어 있어서,

그냥 일반 프로젝트로 변경해서 만들어 봤습니다.