[Kotlin] 네비게이션 뷰 (Navigation View)

 

 

 

 

 

실행화면 1

 

 

상단의 네비게이션 바를 누르면 뜨는 것

 

 

 

 

 

 

네비게이션 뷰 만드는 순서

 

 

1. build.gradle (Module) 에 implementation 'com.google.android.material:material:1.0.0'

추가 후 sync now

 

 

 

 

 

 

2. res에서 마우스 오른쪽 클릭 -> New -> Android Resource File 선택 -> Resource Type을 Menu로 선택 후 OK 선택

 

 

 

 

 

 

 

 

 

3.  menu -> New -> Menu ResourceFile 후 layout 생성

- 네비게이션 바를 클릭했을 때, 나오는 메뉴들 작성

아이콘은 안드로이드 스튜디오에서 기본 제공하는 것을 다운받아 사용했습니다

 

<?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="access"/>

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

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


    </group>
</menu>

 

 

 

 

 

 

4. 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=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/btn_navi"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

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


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/naaviView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/navi_menu"/>

</androidx.drawerlayout.widget.DrawerLayout>

 

 

 

 

 

 

 

5. MainActivity에서 각각의 아이콘을 클릭했을 때 실행될 것 코딩

package com.example.navigationkt

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.navigationkt.databinding.ActivityMainBinding
import com.google.android.material.navigation.NavigationView

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {

    private var mBinding: ActivityMainBinding? = null
    private val binding get() = mBinding!!

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

        //바인딩 초기화
        mBinding = ActivityMainBinding.inflate(layoutInflater)

        // 생성된 뷰 액티비티에 표시
        setContentView(binding.root)


        binding.btnNavi.setOnClickListener {
            // START: left, END: right (네비게이션 바가 나오는 방향 제시)
            binding.layoutDrawer.openDrawer(GravityCompat.START)
        }

        // 네비게이션 메뉴 아이템에 클릭 속성 부여
        binding.naaviView.setNavigationItemSelectedListener(this)


    }


    //네비게이션 메뉴 아이템 클릭시 수행 -> 토스트메시지 
    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.access -> Toast.makeText(applicationContext, "access", Toast.LENGTH_SHORT).show()
            R.id.email -> Toast.makeText(applicationContext, "email", Toast.LENGTH_SHORT).show()
            R.id.message -> Toast.makeText(applicationContext, "message", Toast.LENGTH_SHORT).show()
        }

        //close navigation view
        binding.layoutDrawer.closeDrawers()
        return false
    }

    override fun onBackPressed() {
        //drawer가 열려 있을 때, 뒤로가기 버튼 누르면 drawer 먼저 닫아줌
        if(binding.layoutDrawer.isDrawerOpen(GravityCompat.START)) {
            binding.layoutDrawer.closeDrawers()
        }

        else {
            super.onBackPressed()
        }
    }

}

 

 

 

 

 

 

 

---

 

위의 내용은 '홍드로이드' 님의 유튜브 강의를 보고 공부한 내용입니다.

코드를 변형한 부분도 있고 제가 이해한 방식대로 주석이나 추가 설명을 넣었습니다.