[Android] DrawerLayout / 서랍장 화면

 

 

 

이번 포스팅에서는 안드로이드 위젯 중 하나인 DrawerLayout에 대해 알아보자.

 

 

 

---

 

 

 

✅ DrawerLayout ? 

 

*Drawer : 서랍, 서랍장

 

많은 앱에서 찾아볼 수 있는 화면의 왼쪽 · 오른쪽에서 튀어나와 열리고 닫히는 느낌의 화면이다.

 

 

대표적인 예시로는, 카카오톡 채팅방 내 서랍장을 떠올릴 수 있다.

 

 

 

DrawerLayout이 화면의 최상위 영역에 위치하여야 하고,

자식 요소로 DrawerView를 선언하여 열고(open) 닫는(close) 느낌으로 활용한다.

 

*여기서 말하는 DrawerView는 서랍장으로 사용할 임의의 View를 뜻한다.

예제에서는 LinearLayout을 DrawerView로 사용할 예정이다.

 

 

 

그 외의 특징을 간단히 설명하자면,

 

● DrawerView는 화면의 왼쪽 · 오른쪽에만 적용할 수 있다. (위아래 안됨)

 

● 각 방향 당 1개의 DrawerView만 적용할 수 있다. (2개 이상 구성 시 Exception 발생)

 

● 왼쪽 1개, 오른쪽 1개 적용하여 화면에 총 2개의 DrawerView는 적용할 수 있다.

 

● DrawerView가 열리고 닫힐 때, 자동으로 슬라이드 애니메이션이 적용된다.

 

● DrawerView의 애니메이션이 동작 중일 때(열고 닫는 동작 중),

   리소스를 많이 사용하는 작업을 처리하는 것은 권장되지 않는다.

 

 

 

이제 DrawerLayout을 직접 사용해보자.

아래 예제부터는 DrawerView를 '서랍장'으로 표현한다.

 

 

 

 

 

 

✅ 실습

 

DrawerLayout을 구현하는 방법은 정말 여러가지가 존재한다.

당장 구글 검색만 해보아도 3~4가지 방법은 찾아볼 수 있다.

 

이 포스팅에서는 그 중에서도 가장 간편하다고 느꼈던 방법으로 구현해본다.

 

 

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

  <LinearLayout
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

  // 메인 화면 요소 (ImageView, TextView, Button)

  </LinearLayout>


  <LinearLayout
    android:id="@+id/drawer_view"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="start"
    android:clickable="true"
    >
  
  // 서랍장 화면 요소 (TextView)

  </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

 

● 최상위 요소를 DrawerLayout으로 감싸준다.

 

● 메인 화면을 그 안에 선언해준다.

- 예제에서는 간단히 ImageView, TextView, Button 이렇게 3개만 구현했다.

- Button은 서랍장을 여는 용도로 사용할 것이다.

 

● 메인 화면 하단에 서랍장으로 사용할 레이아웃을 선언해준다.

- 예제에서는 해당 서랍장 레이아웃 안에 TextView 하나만 작성했다.

- 화면에 가득 차도록 높이는 "match_parent", 너비는 임의의 값으로 지정했다.(300dp)

- layout_gravity 속성을 "start"로 작성하면 화면 왼쪽에서 슬라이드되고,

  "end"로 작성하면 화면 오른쪽에서 슬라이드되는 개념이다.

- clickable 속성을 "true"로 입력해야 중복 클릭을 방지할 수 있다.

  (서랍장 화면이 기존 메인 화면에 겹쳐지도록 덮는 느낌이기 때문에)

 

 

 

MainActivity.kt

// 서랍장 열기
bind.openButton.setOnClickListener {
  bind.drawerLayout.openDrawer(bind.drawerView)
}


// 서랍장 닫기
bind.closeButton.setOnClickListener {
  bind.drawerLayout.closeDrawer()
}

 

버튼을 클릭하여 서랍장을 열고 닫는 단순한 코드다.

 

 

 

 

 

 

✅ 결과

 

 

● 메인 화면

 

 

'서랍장 열기' 버튼을 누르면 서랍장이 열리도록 만들었다.

 

 

 

 

 

● 서랍장이 열린 모습

 

 

layout_gravity 속성을 "start" 로 작성했기 때문에 왼쪽에서 튀어나오는 모습이다.

초반부에 설명했듯이, 슬라이드 애니메이션 효과는 자동으로 적용되어 있다.

 

Dialog와 유사한 느낌으로, 서랍장 영역 외에는 자동으로 회색 블라인드 처리가 되어있다.

 

 

 

 

 

● 화면 스와이프

 

 

서랍장이 닫혀 있을 때, 화면 왼쪽을 오른쪽으로 스와이프 터치해주면 서랍장이 열린다.

즉, '서랍장 열기' 버튼으로만 열지 않아도 된다.

(닫을 때도 마찬가지로 스와이프 가능)

 

 

 

 

 

● 서랍장 닫을 때

 

 

위 예제에서 closeDrawer() 함수로 서랍장 닫기를 구현했지만,

사실 서랍장 외 공백 영역을 터치해도 닫힌다.

 

 

 

 

 

● layout_gravity="end'

 

 

layout_gravity 속성에 "end"를 작성해주면 위 처럼 오른쪽에서 열리는 것을 확인할 수 있다.

 

 

 

 

 

 

---

 

 

 

 

DrawerLayout에 대해 알아보고, 적용해 보았다.

서랍장을 잘 활용하면 더욱 다양한 화면 구성을 할 수 있다.

 

슬라이드 애니메이션 효과가 기본적으로 적용되어 있는 점과,

서랍장 외 영역이 자동으로 블라인드 처리된다는 점,

그리고 화면 스와이프로 서랍장을 열고 닫을 수 있는 기능이 너무나 편리했다.