🔨 Navigation drawer란?

App 화면에서 화면 좌측 또는 우측에서 햄버거 버튼을 누르거나 슬라이드하여 숨겨진 메뉴를 보여주는 역할을 합니다.

출처 : https://m3.material.io/components/navigation-drawer/overview

🔨 Navigation drawer 사용법

참고문서 : https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationDrawer.md
material 공식 문서를 참고하여 만들었습니다.

1. build.gradle에서 material 버전을 업그레이드 해줍니다.
   그리고 drawerlayout도 implementation 해줍니다.

dependencies {

    implementation 'com.google.android.material:material:1.9.0'
    
    // drawerlayout
    implementation "androidx.drawerlayout:drawerlayout:1.2.0"
}

2. Navigation drawer를 사용하려면 먼저 Android용 머티리얼 구성요소 라이브러리에 종속성을 추가해야 합니다.
   저는 햄버거 버튼을 누르면 Navigation drawer를 나타나도록 하겠습니다.

<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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".HomeFragment">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/toolbarHome"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/Theme.Mini02.Toolbar" />

    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

3. 먼저 headerLayout를 추가해줘야 합니다. headerLayout은 상단에 보여질 Layout인데 아래 그림처럼 나타나게 됩니다.
   

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="24dp"
        android:text="환영합니다."
        android:textAppearance="?attr/textAppearanceHeadlineSmall"
        android:textColor="?attr/colorOnSurface" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="24dp"
        android:text="ooo님"
        android:textAppearance="?attr/textAppearanceTitleSmall"
        android:textColor="?attr/colorOnSurfaceVariant" />
</LinearLayout>

4. Navigation drawer에서 보여질 menu를 구성해줍니다.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/main_item"
        android:title="게시판">
        <menu>
            <item
                android:id="@+id/allBoard"
                android:title="전체게시판"
                android:checkable="true"/>
            <item
                android:id="@+id/freeBoard"
                android:title="자유게시판"
                android:checkable="true"/>
            <item
                android:id="@+id/humorBoard"
                android:title="유머게시판"
                android:checkable="true"/>

            <item
                android:id="@+id/questionBoard"
                android:title="질문게시판"
                android:checkable="true"/>

            <item
                android:id="@+id/sportsBoard"
                android:title="스포츠게시판"
                android:checkable="true"/>
        </menu>
    </item>

    <item
        android:id="@+id/labels_item"
        android:title="사용자정보수정">
        <menu>
            <item
                android:id="@+id/label_one"
                android:icon="@drawable/logout"
                android:title="로그아웃"
                android:checkable="true"
                app:showAsAction="ifRoom"/>
            <item
                android:id="@+id/label_two"
                android:icon="@drawable/manage_accounts"
                android:title="회원탈퇴"
                android:checkable="true"
                app:showAsAction="ifRoom"/>
        </menu>
    </item>
</menu>

5. 코틀린 파일에서 toolbar를 처리해줍니다.
   저는 fragment에서 drawerLayout를 만들었습니다.

class HomeFragment : Fragment() {

    lateinit var fragmentHomeBinding: FragmentHomeBinding
    lateinit var mainActivity: MainActivity


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
    
        fragmentHomeBinding =FragmentHomeBinding.inflate(inflater)
        mainActivity = activity as MainActivity
		
        // toolbar 부분 햄버거 버튼 아이콘을 누르면 drawerLayout이 열린다.
        fragmentHomeBinding.run {
            toolbarHome.run {
                title="홈"
                setNavigationIcon(R.drawable.menu)
                setNavigationOnClickListener {
                   drawerLayout.open()
                }
            }
			
            // setNavigationItemSelectedListener 메서드는 
            // 사용자가 네비게이션 드로어의 메뉴 아이템을 선택할 때 발생하는 이벤트를
            // 처리하는 데 사용됩니다.
            // 이 코드에서는 아이템을 클릭 시 drawerLayout이 종료되도록 구현하였습니다.
            navigationView.setNavigationItemSelectedListener { menuItem ->
                menuItem.isChecked = true
                drawerLayout.close()
                true
                
            }
        }
        return fragmentHomeBinding.root
    }
}

출처 : https://github.com/material-components/material-components-android/blob/master/docs/components/NavigationDrawer.md