[Android] Drawerlayout (드로어 레이아웃)

1. Drawerlayout이란?

---

DrawerLayout은 Android 앱에서 네비게이션 드로어 (Navigation Drawer) 패턴을 구현하기 위해 사용하는

레이아웃 컨테이너이다 Drawerlayout은 평소에는 액티비티 화면 한쪽에 숨겨져 보이지 않던 내용이

사용자가 왼쪽이나 오른쪽에서 손가락의 움직이는 액션을 취하면 밀려 나와 화면에 나타내는 기능을 한다

androidx의 라이브러리인 Drawerlayout은 Drawer라는 단어가 뜻하는 것처럼

서랍처럼 열리고 닫히는 것 메뉴를 구성할 때 사용한다

 

https://developer.android.com/jetpack/androidx/releases/drawerlayout?hl=ko 

Drawerlayout  |  Android 개발자  |  Android Developers

2. build.gradle (Module)

---

dependencies {
    implementation "androidx.drawerlayout:drawerlayout:1.1.1"
}

build.gradle(Module: app)에서 위와 같이 dependencies을 선언한다

3. XML

---

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/black"
        android:alpha="0.8" />

    <Button
        android:id="@+id/Test"
        android:layout_width="100dp"
        android:layout_height="100dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

레이아웃 XML 파일에서 드로어 메뉴가 출력되어야 하는 부분의 태그를 Drawerlayout으로 선언하고

아래에는 뷰를 2개 선언한다 선언을 할 경우 자동으로 첫 번째 하위 태그 부분을 액티비티 화면에서 출력하고

두 번째 하위 태그 부분은 사용자가 액션을 취하면 화면에 나타난다

두 번째 태그의 android:layout_gravity 속성값을 이용하여 화면에서 나오는 방향을 지정할 수 있다

left right start로 지정할 수 있고 start값은 사용하는 언어의 방향에 따라 left(한국어), right가 자동으로 결정된다

액티비티 레이아웃 XML 파일의 루트 태그가 꼭 Drawerlayout일 필요는 없지만 

Drawerlayout은 대부분이 액티비티의 기본 화면이 보이고 그 위를 덥듯이 나오게 하므로

액티비티 레이아웃 XML 파일의 루트 태그를 Drawerlayout으로 선언한다

4. Kotlin 파일

---

class MainActivity : AppCompatActivity() {
    lateinit var toggle : ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        toggle = ActionBarDrawerToggle(this, binding.drawer,R.string.draw_opned, R.string.close)

        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        toggle.syncState()
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // 이벤트가 토글 버튼에서 발생하면
        if (toggle.onOptionsItemSelected(item))  {
            Log.d("Info", "toggle!!")
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

//View Binding 적용 중

//strings.xml    
    <string name="drawer_opened">Opened Drawer</string>
    <string name="drawer_closed">Closed Drawer</string>

Drawerlayout은 보통 툴바 영역에 toggle버튼을 함께 제공한다

Drawer 메뉴 toggle버튼은 ActionBarDrawerToggle 클래스에서 제공한다

ActionBarDrawerToggle 생성자의 두 번째 매개변수는 토글 버튼으로 여닫는 드로어 객체이다

세 번째와 네 번째 매개변수는 문자열 리소스로 드로어가 열리거나 닫혔을 때 상태를 표현한 문자열이다

supportActionBar?.setDisplayHomeAsUpEnabled(true) 에서는 토글 버튼으로 사용할 아이콘이 출력되게 한다

액션바 영역의 HomeAsUP 아이콘은 왼쪽 화살표 모양이므로 toggle.syncState() 함수를 설정해 드로어가 출력되기 전에는  

내비게이션 아이콘으로 출력되면 왼쪽 화살콘 아이콘으로 바뀌게 한다

액션바 영역의 Toggle 버튼도 내부에서 메뉴로 취급을 받기 때문에 별 다른 메뉴 이벤트 처리를 하지 않으면 드로어가 열리지 않는다

따라서 onOptionsItemSelected()에서 토글 버튼의 이벤트를 처리해 드로어를 제어한다

 

https://developer.android.com/reference/androidx/appcompat/app/ActionBarDrawerToggle

ActionBarDrawerToggle  |  Android Developers