[Kotlin][Android] 네비게이션 드로어(Navigation Drawer) 만들기

스틱코드를 사용하여 네비게이션 드로어를 만들어보겠습니다.

 

---

먼저 예제에 사용할 화면을 만들어 보겠습니다.

 

네비게이션 드로어 화면

 

<activity_main.xml>

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:openDrawer="start">


    <include
        layout="@layout/appbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

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

</androidx.drawerlayout.widget.DrawerLayout>

 

<appbar.xml>

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" />

    </com.google.android.material.appbar.AppBarLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

 

<header.xml>

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/cardview_dark_background"
    android:gravity="center"
    android:orientation="vertical"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Item"
        android:textSize="50dp" />

</LinearLayout>

 

<menu_list.xml>

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_item1"
        android:title="메뉴 아이템 1" />
    <item
        android:id="@+id/menu_item2"
        android:title="메뉴 아이템 2" />
    <item
        android:id="@+id/menu_item3"
        android:title="메뉴 아이템 3" />
</menu>

 

---

다음 메뉴 버튼 아이콘을 만들어 보겠습니다.

 

drawable 파일을 우클릭하면 아래 화면같이 나오는데 Vector Asset을 선택해줍니다.

 

 

Vector Asset을 선택하면 Asset Studio 화면만 나오는데 여기서 Clip Art를 누르면 아래 사진같이 화면이 나옵니다.

여기서 원하는 아이콘을 선택하시면 되는데 저는 dehaze 아이콘을 선택하겠습니다.

 

 

아이콘을 선택하면 아래 사진같이 나오는데 왼쪽부터 차례대로 next -> finish 버튼을 눌러서 실행하시면 됩니다.

실행이 완료가 되면 맨 왼쪽 사진처럼 xml 파일이 하나 생성 됩니다.

생성된 파일 이름을 -> navi_menu 로 변경해줍니다.

 

---

다음 예제에 사용할 코드를 작성해보겠습니다.

 

다른 함수에서 사용할 수 있게 navigationView, drawerLayout 변수들을 만들어 줍니다.

 

그 다음 스틱코드를 활용한다면, 클래스에서 'dc' 까지만 작성했을 때 '네비게이션 드로어 생성' 이벤트가 나타납니다.

 

 

'네비게이션 드로어 생성' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

this 부분에서 에러가나는데 이건 NavigationView.OnNavigationItemSelectedListener 를 상속받지 않아서 발생하는 오류입니다.

AppCompatActivity() 옆에 , NavigationView.OnNavigationItemSelectedListener 를 붙여주면 에러가 해결됩니다.

 

 

this 에러는 사라지고 class 에러가 발생하는데 이거는 다음 코드를 넣으면 해결이 됩니다.

 

 

클래스에서 'dE' 까지만 작성했을 때 '네비게이션 드로어 이벤트' 이벤트가 나타납니다.

 

 

'네비게이션 드로어 이벤트' 이벤트를 누를 경우 코드가 자동으로 완성되면서 에러가 사라집니다.

 

 

<최종코드>

import androidx.appcompat.widget.Toolbar
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.core.view.GravityCompat

import androidx.drawerlayout.widget.DrawerLayout
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    lateinit var navigationView: NavigationView
    lateinit var drawerLayout: DrawerLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar: Toolbar = findViewById(R.id.toolbar) // toolBar를 통해 App Bar 생성
        setSupportActionBar(toolbar) // 툴바 적용

        supportActionBar?.setDisplayHomeAsUpEnabled(true) // 드로어를 꺼낼 홈 버튼 활성화
        supportActionBar?.setHomeAsUpIndicator(R.drawable.navi_menu) // 홈버튼 이미지 변경
        supportActionBar?.setDisplayShowTitleEnabled(false) // 툴바에 타이틀 안보이게

        // 네비게이션 드로어 생성
        drawerLayout = findViewById(R.id.drawer_layout)

        // 네비게이션 드로어 내에있는 화면의 이벤트를 처리하기 위해 생성
        navigationView = findViewById(R.id.nav_view)
        navigationView.setNavigationItemSelectedListener(this) //navigation 리스너
    }

    // 툴바 메뉴 버튼이 클릭 됐을 때 실행하는 함수
    override fun onOptionsItemSelected(item: MenuItem): Boolean {

        // 클릭한 툴바 메뉴 아이템 id 마다 다르게 실행하도록 설정
        when(item!!.itemId){
            android.R.id.home->{
                // 햄버거 버튼 클릭시 네비게이션 드로어 열기
                drawerLayout.openDrawer(GravityCompat.START)
            }
        }
        return super.onOptionsItemSelected(item)
    }

    // 드로어 내 아이템 클릭 이벤트 처리하는 함수
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.menu_item1-> Toast.makeText(this,"menu_item1 실행",Toast.LENGTH_SHORT).show()
            R.id.menu_item2-> Toast.makeText(this,"menu_item2 실행",Toast.LENGTH_SHORT).show()
            R.id.menu_item3-> Toast.makeText(this,"menu_item3 실행",Toast.LENGTH_SHORT).show()
        }
        return false
    }
}

 

---

프로젝트를 실행하면 아래 사진같이 나오는데 햄버거 버튼을 누를 경우 네비게이션 드로어가 나오는것을 확인할 수 있습니다.

 

 

 

 

[참고한 스틱 코드]

[kotlin][android] 네비게이션 드로어 기능 모음집

- stickode.com/detail.html?no=2127