안드로이드 네비게이션 드로어(Navigation Drawer) 사용하기.

네비게이션 드로어

용어가 조금 생소할수있습니다.

 

현재 제가 만들고있는 네이티브 앱을 하다보니 네비게이션 드로어를 사용해야할거같아서 사용을 해봤습니다.

 

매우 쉽게 구현이 가능하니 따라해보셔도 좋을거같습니다.

 

우선 네비게이션 드로어란?

이런식으로 메뉴버튼이나 옆으로 슬라이드 했을때 슉 튀어나오는 녀석을 말합니다.

 

서론 집어치우고 긁어가실 소스먼저 볼게요

 

우선 xml을 하나 만들어줍니다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:id="@+id/drawerView"
    android:background="#5559b4">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:background="#5559b4">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="반갑습니다"
        android:textSize="14dp"
        android:textColor="#ffffff"
        android:layout_marginTop="60dp"
        android:layout_centerHorizontal="true">
    </TextView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profile_icon"
        android:id="@+id/genter_icon"
        android:layout_marginTop="80dp"
        android:layout_marginLeft="50dp">
    </ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="이아람 님"
            android:textSize="26dp"
            android:textColor="#ffffff"
            android:layout_marginTop="80dp"
            android:layout_marginLeft="94dp"
            >
        </TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="쭉쭉이와 함께 활기찬 하루 시작하세요"
            android:textSize="14dp"
            android:textColor="#ffffff"
            android:layout_marginTop="130dp"
            android:layout_centerHorizontal="true">
        </TextView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#80ffffff"
            android:layout_marginTop="270dp">
        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/motion_icon_off"
            android:layout_marginTop="298dp"
            android:layout_marginLeft="20dp">
        </ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="운동이력"
            android:textColor="#ffffff"
            android:id="@+id/nav_ex"
            android:layout_marginTop="298dp"
            android:layout_marginLeft="44dp"
            android:onClick="OnClick">
        </TextView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#80ffffff"
            android:layout_marginTop="340dp">
        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/motion_icon_off"
            android:layout_marginTop="368dp"
            android:layout_marginLeft="20dp">
        </ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="회원정보수정"
            android:textColor="#ffffff"
            android:id="@+id/nav_info"
            android:layout_marginTop="368dp"
            android:layout_marginLeft="44dp"
            android:onClick="OnClick">
        </TextView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#80ffffff"
            android:layout_marginTop="410dp">
        </LinearLayout>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/motion_icon_off"
            android:layout_marginTop="438dp"
            android:layout_marginLeft="20dp">
        </ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="도움말"
            android:textColor="#ffffff"
            android:id="@+id/nav_help"
            android:layout_marginTop="438dp"
            android:layout_marginLeft="44dp"
            android:onClick="OnClick">
        </TextView>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#80ffffff"
            android:layout_marginTop="480dp">
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="로그아웃"
            android:textSize="15dp"
            android:textColor="#ffffff"
            android:id="@+id/nav_logout"
            android:layout_marginTop="550dp"
            android:layout_centerHorizontal="true"
            android:onClick="OnClick">
        </TextView>
    </RelativeLayout>

</LinearLayout>

현재 위에 보여진 이미지에 맞게 짜여진 소스입니다.

다 지우셔도되요!

다만 여기서중요한건 제일 최상위 레이아웃 width가 280dp로 되어있습니다.

딱 화면에서 드로어 기능으로 보여줄 부분만 설정한거죠.

 

그후로 그 안에다가 레이아웃을 꾸미는건 여러분 자유입니다.

 

그다음 메인xml소스입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#5559b4"
    android:id="@+id/drawer_layout"
    tools:context=".MainActivity">
    
    <!-- 안에 자유롭게 꾸며보세요 ㅎㅎ -->

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

</androidx.drawerlayout.widget.DrawerLayout>

최상위 레이아웃은 드로어레이아웃 입니다.

 

그리고 마지막에보면 include로 아까 위에서만든 레이아웃을 포함시켜줬어요!!

 

이제 메인 자바소스를 볼게요

 

 private DrawerLayout drawerLayout;
 private View drawerView;
 
 //이거 까지는 클래스 밖에 전역으로 적어주세요.
 
 drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
 drawerView = (View) findViewById(R.id.drawerView);
 drawerLayout.setDrawerListener(listener);
 
 //이거 까지는 onCreate안에다가 적어주세요
 
 DrawerLayout.DrawerListener listener = new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
        }

        @Override
        public void onDrawerOpened(@NonNull View drawerView) {
        }

        @Override
        public void onDrawerClosed(@NonNull View drawerView) {
        }

        @Override
        public void onDrawerStateChanged(int newState) {
        }
    };
    
    //이거까지는 onCreate 밖에다가 적어주세요.
    
    

이렇게 해주시구요.

 

혹시 메뉴바같은거 눌렀을때 나오게 하고싶으시면

그 리스너안쪽에

 

drawerLayout.openDrawer(drawerView); <<이코드를 넣어주시면되요.

 

궁금하신 사항은 댓글 남겨주세요.