Android

drawerlayout 및 navigationview 사용

Dean83 2022. 6. 13. 14:05

화면 좌 -> 우 로 스와이프시 화면이 절반쯤 보이는 메뉴 기능을 말한다. 

DrawerLayout와 NavigationView는 같이 사용해야 한다. 

0. App의 Gradle추가 

    dependencies 안에 추가

implementation 'com.google.android.material:material:버전번호'

 

1. DrawerLayout 및 NavigationView 추가 (activity_main.xml)
    - activity_main에서,  root 태그 바로 하위 태그로 DrawerLayout을 추가한다. 
    - DrawerLayout의 가장 끝 자식 element로 NavigationView를 추가한다.
       - NavigationView에서 android:layout_gravity = "start"를 반드시 적어준다. (이거 안하면 스와이프가 안됨)
       - 아래 기술할 메뉴 아이템을 연결해 준다.

    - 예 : 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        
        ......
        
    </androidx.drawerlayout.widget.DrawerLayout>
     <com.google.android.material.navigation.NavigationView
            android:id="@+id/navView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity = "start"
            app:menu="@menu/drawer" />
        
</androidx.constraintlayout.widget.ConstraintLayout>

2. Menu xml 추가
     - 프로젝트 -> res 마우스 우클릭 -> add -> Android Resource file -> type에 메뉴 선택 후 추가
     - 추가한 메뉴에 menuitem들을 추가하고, 해당 아이디 들은 navigation에서 추가한 fragment의 아이디와 동일하게 설정한다
        => 메뉴아이템 선택시 자동으로 해당 프래그먼트를 호출하여 화면에 보여준다. 
     - 위에서 추가한 NavigationView에서 메뉴를 연결해준다. 

3. 코드 추가
     - MainActivity 에 drawer를 추가한다. (onCreate에서)

var navCont = this.findNavController(R.id.nav_host_fragment)
 var item = findViewById<NavigationView>(R.id.navView)
 
 NavigationUI.setupWithNavController(item,navCont)