ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Navigation Drawer를 사용해보자.
    안드로이드/학습&강좌 2015. 6. 8. 15:55

    이전 포스팅에서 언급했던 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 프로젝트로 생성이 많이 되어 있어서,


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





    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.