일용직 코딩노동자

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

Android

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

사용자 일용직 코딩노동자 2019. 12. 8. 19:17

네비게이션 드로어

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

 

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

 

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

 

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

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

 

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

 

우선 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); <<이코드를 넣어주시면되요.

 

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

4 Comments
댓글쓰기 폼