[Kotlin][Android] Navigation View 네비게이션 바 만들기

build.gradle 파일의

 

dependencies 중괄호 안에

implementation 'com.google.android.material:material:1.5.0'

을 추가해준다.

그리고 상단의 Sync Now를 클릭해서 싱크 작업을 진행해 준다.(사진은 이미 클릭해서 진행중인 것)

그리고 app/src/main/res 에 새로운 폴더를 하나 만들어준다. Resource 타입은 menu를 선택해준다.

추가된 menu 폴더에 New - Menu Resource File 을 클릭해준다

파일명은 navi_menu.xml 으로 해주자

 

 

그리고 navigation View에 사용할 이미지들을 안드로이드에서 기본적으로 제공하는 걸 활용하기 위해 추가해준다.

빨간 네모를 클릭해서 들어가면 여러가지 이미지를 볼 수 있는데 이 중 마음에 드는 것을 선택하고

Ok- Next - Finish 하면 drawable 폴더에 추가가 된 것을 확인 할 수 있다.

 

방금 전 생성한 menu 파일에 아래와 같이

 

navi_menu.xml

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

    <group android:checkableBehavior="single">

        <item android:id="@+id/access"
            android:icon="@drawable/ic_baseline_accessibility_24"
            android:title="접근성"/>

        <item android:id="@+id/email"
            android:icon="@drawable/ic_baseline_email_24"
            android:title="이메일"/>


        <item android:id="@+id/message"
            android:icon="@drawable/ic_baseline_send_24"
            android:title="메시지"/>

    </group>

</menu>

위와 아래 같은 코드를 입력해준다. 이 group이 

 

Navigation VIew를 만들어 줄 Activity의 xml 레이아웃에 가서 xmls 앞을 지우고 Dra 만 입력해서 첫번째 자동완성을 입력해 준다.

 

NaviActivity.kt (액티비티 파일)

activity_navi.xml (레이아웃 파일)

 

Componet Tree 탭 창에 ConstraintLayout 을 DrawerLayout 밑에 드래그 해와서 추가해준다.

 

네비게이션 뷰를 클릭을 했을때 버튼이 튀어나오게끔 새로운 Vector Asset 을 추가해준다.

햄버거 아이콘을 가져와 ImageView로 추가해 주었다.

그리고 ConstratintLayout 태그의 바깥쪽에 navi 를 입력하여 자동완성된 navigation 태그를 입력한다.

 layout_width = wrap_content / layout_height = match_parent 를 해준다. 그리고 아까 메뉴폴더에다가 만들어준 Menu Resource File 인 navi_menu 를 가져와 준다.

 

그렇게 되면 이전의 메뉴 (버거 아이콘, 세줄 짜리)가 안보이고 navi_menu 가 출력됨을 볼 수 있다.

 

그래서 layout_gravity 값을 start로 주면 원하던 대로 출력됨을 볼 수 있다.

아이디 값 까지 추가해주었다.

 

전체코드 : activity_navi.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/layout_drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".NaviActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/btn_navi"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="4dp"
            android:src="@drawable/ic_baseline_menu_64"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/naviView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"

        android:layout_gravity="start"
        app:menu="@menu/navi_menu"/>


</androidx.drawerlayout.widget.DrawerLayout>

이제 NaviActivity로 가서 코드를 작성하면 된다.

 

네비게이션 뷰를 출력해줄 Activity에 가서 AppCompatAcitivtu() 외에도 NavigationView.OnNavigationItemSelectedListener를 추가해주자. 

 

빨간줄로 오류메시지가 뜨는데 Alt + Enter 로 Implement members를 클릭하자

OK

그러면 이렇게 onNavigationItemSelected 함수를 오버라이드 할 수 있게 된다.

이 아이템은 주석처럼 네비게이션 아이템 클릭시 수항하는 함수이다.

override fun onNavigationItemSelected(item: MenuItem): Boolean { //네비게이션 아이템 클릭시 수행하는 녀석
    when (item.itemId) {
        R.id.access -> Toast.makeText(applicationContext, "접근성", Toast.LENGTH_SHORT).show()
        R.id.email -> Toast.makeText(applicationContext, "이메일", Toast.LENGTH_SHORT).show()
        R.id.message -> Toast.makeText(applicationContext, "메시지", Toast.LENGTH_SHORT).show()

    }
    binding.layoutDrawer.closeDrawers() //네비게이션 뷰 닫기
    return false

}

이렇게 하고 끝이면 좋겠지만 뒤로가기 버튼 클릭시 전체 어플리케이션이 종료가 되는 문제가 있다.

 

그래서

 

Ctrl + O : 추천 오버라이드 메소드

 

 

네비게이션 뷰가 켜진 상태에서 백버튼을 눌러도 어플이 종료되지 않고 네비게이션 뷰가 닫힌다.

 

NaviActivity.kt

package com.example.myapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import android.widget.Toast
import androidx.core.view.GravityCompat
import com.example.myapplication.databinding.ActivityMainBinding
import com.example.myapplication.databinding.ActivityNaviBinding
import com.google.android.material.navigation.NavigationView

class NaviActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    private lateinit var binding: ActivityNaviBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityNaviBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)

        binding.btnNavi.setOnClickListener {
            binding.layoutDrawer.openDrawer(GravityCompat.START) //LEFT 와 같은 말. END : RIGHT
        }

        binding.naviView.setNavigationItemSelectedListener(this) //네비게이션 메뉴 아이템에 클릭 속성을 부여하는 것.
    }


    override fun onNavigationItemSelected(item: MenuItem): Boolean { //네비게이션 아이템 클릭시 수행하는 녀석
        when (item.itemId) {
            R.id.access -> Toast.makeText(applicationContext, "접근성", Toast.LENGTH_SHORT).show()
            R.id.email -> Toast.makeText(applicationContext, "이메일", Toast.LENGTH_SHORT).show()
            R.id.message -> Toast.makeText(applicationContext, "메시지", Toast.LENGTH_SHORT).show()

        }
        binding.layoutDrawer.closeDrawers() //네비게이션 뷰 닫기
        return false

    }

    override fun onBackPressed() { //백버튼 눌렀을때 수행하는 메소드
        if (binding.layoutDrawer.isDrawerOpen(GravityCompat.START)) {
            binding.layoutDrawer.closeDrawers()
        } else {

            super.onBackPressed() //일반 백버튼 실행 (finish)
        }
    }
}

 

 

 

 

 

https://www.youtube.com/watch?v=ALTFLXKiPUY