[안드로이드]DrawerLayout(슬라이드메뉴) 구현하기

Android DrawerLayout 구현하기

(좌측 슬라이드 메뉴 구현)

많은 앱에서 좌측 슬라이드 메뉴인 DrawerLayout을 구현하고 있다. Drawer는 '서랍'의 의미로 열고 닫을 수 있는 메뉴이다. 또한 손가락으로 미는 행동(스와이프 제스쳐)만으로도 메뉴를 열고 닫을 수 있어 사용자 편의성을 두루 갖췄다.

아래는 아프리카TV 앱에서 사용된 DrawerLayout의 모습이다.

[구현 프로세스]

구현을 하기 앞서 프로젝트를 만든다. 프로젝트는 기본 empty project를 선택하여 MainActivity.class의 자바 파일과 activity_main.xml의 레이아웃 파일로 구성하면 된다.

<xml 파일 구현 프로세스>

1. activity_main.xml 전체를 DrawerLayout으로 바꾼다. 

2. DrawLayout에 id를 부여한다. (자바파일에서 객체를 참조하여야 함)

3. DrawerLayout 내부에 배경화면이 될 레이아웃과 드로어(슬라이드메뉴)가 될 레이아웃 두개를 만든다. 아래 예시코드에서는 RelativeLayout으로 만들었다.

4. 배경이 될 레이아웃에 드로어를 열기 위한 버튼을 생성한다. 버튼에 리스너를 구현해야 하므로 id를 부여한다.

5. 드로어 화면이 될 레이아웃에도 드로어를 닫기 위한 버튼을 생성한다. 이또한 id를 부여한다.

6. 드로어 화면이 될 레이아웃의 사이즈를 조절한다. 이는 슬라이드 메뉴 크기가 된다.

7. 드로어 화면이 될 레이아웃에 android:layout_gravity 속성값을 "start" 혹은 "left"로 적용한다.

(start, left는 좌측 슬라이드 메뉴이며, end, right는 우측 슬라이드 메뉴가 된다)

8. 드로어 화면이 될 레이아웃에 id를 부여한다. (자바파일에서 객체를 참조하여야 함)

+. 추가적으로 드로어에 리스트뷰를 구현하고 싶다면 드로어 화면이 될 레이아웃 내에 리스트뷰 태그를 삽입하면 된다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--배경이 될 Layout-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#2030"
        android:gravity="center_horizontal">

        <Button
            android:id="@+id/btn_OpenDrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="드로어 열기" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="기본 배경이 될 화면"
            android:textColor="#f33"
            android:textSize="24dp" />

    </RelativeLayout>

    <!--드로어 화면이 될 Layout-->
    <RelativeLayout
        android:id="@+id/drawer"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:background="#ffffff"
        android:layout_gravity="start">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="23dp"
            android:text="드로어가 될 화면"
            android:textColor="#f70"
            android:textSize="24dp" />

        <Button
            android:id="@+id/btn_CloseDrawer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            android:text="드로어 닫기" />

    </RelativeLayout>

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

<java 파일 구현 프로세스>

1. 전체 화면, 드로어 레이아웃에 주었던 id를 참조한다. (아래 예시에서는 drawerLayout)

2. 드로어 화면(슬라이드메뉴)이 될 레이아웃에 주었던 id를 뷰로 참조한다. (drawerView)

3. 두 개의 버튼을 객체 참조한다.

4. 배경이 될 레이아웃에 있는 버튼에 클릭리스너를 설정한다. 리스너의 내용은 DrawerLayout에 있는 openDrawer() 메소드를 실행시키는 것이다. openDrawer에는 드로어 화면인 drawerView의 값을 전달한다.

5. 드로어 화면에 있는 버튼에도 클릭리스너를 설정한다. 리스너의 내용은 DrawerLayout에 있는 closeDrawer() 메소드를 실행시키는 것이다.

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        // 전체화면인 DrawerLayout 객체 참조
        final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);

        // Drawer 화면(뷰) 객체 참조
        final View drawerView = (View) findViewById(R.id.drawer);


        // 드로어 화면을 열고 닫을 버튼 객체 참조
        Button btnOpenDrawer = (Button) findViewById(R.id.btn_OpenDrawer);
        Button btnCloseDrawer = (Button) findViewById(R.id.btn_CloseDrawer);


        // 드로어 여는 버튼 리스너
        btnOpenDrawer.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(drawerView);
            }
        });


        // 드로어 닫는 버튼 리스너
        btnCloseDrawer.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.closeDrawer(drawerView);
            }
        });


    }
}

<실행화면>

  

버튼을 클릭하는 것으로 드로어 화면을 열고 닫을 수 있다. 더불어 스와이프 제스쳐를 통해 메뉴를 열고 닫을 수 있다.

실제 상용화된 앱에서는 드로어 레이아웃을 열고 닫기 버튼이 존재하지 않고, 상단 액션바에 버튼으로 대체하거나 스와이프 제스쳐를 사용자에게 인지시켜 버튼이 없는 경우도 많다. 전자의 경우는 액션바를 커스터마이징하거나 액션바 내에 버튼을 추가하여 클릭리스너를 설정하면 된다. 또한 액션바를 없애고 드로어가 될 화면(Drawer View)에 margin을 주어 해당 자리에 이미지버튼을 자리시켜도 된다.

+추가적으로 드로어를 펼치면 전체화면이 어두워지는 현상이 발생할 경우, 드로어가 될 화면(드로어뷰)의 백그라운드에 색을 입히면 된다.

-코드 저장링크(깃허브) : https://github.com/markim94/Android_Study/tree/master/DrawerLayout