LANGUAGE/Kotlin

[Kotlin] Bottom Navigation bar

보겸삼촌 2020. 7. 6. 14:35

# 개발환경

tool : android studio 4.0
os : windows 10 pro 64-bit

 

 

# 네비게이션 바 예상결과

 

 

 

1. gradle 추가

# Gradle Scripts > build.gradle (Module: app)

...
dependencies {
	...
    implementation 'com.google.android.material:material:1.1.0'
}

 

 

2. menu 추가

 

프로젝트 > app > res > Android Resource Directory

 

Resource type을 menu로 생성

 

 

3. nav_menu.xml 추가

 

  위 과정을 통해서 생성된 menu.xml 파일의 이름을 알맞게 수정하고 내용을 살펴보면 menu 태그 내에 원하는 item을 추가하여 버튼을 구성

 

# 프로젝트 > app > res > menu > nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/ic_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/ic_review"
        android:icon="@drawable/ic_review"
        android:title="Review" />
    <item
        android:id="@+id/ic_map"
        android:icon="@drawable/ic_map"
        android:title="Maps" />
    <item
        android:id="@+id/ic_hospital"
        android:icon="@drawable/ic_hospital"
        android:title="Hospital" />
    <item
        android:id="@+id/ic_setting"
        android:icon="@drawable/ic_setting"
        android:title="Setting" />
</menu>

 

 원하는 아이콘은 res > drawable 우측 마우스 클릭 > vector image 추가 혹은 이미지 추가로 생성함

 

 

 

4. Fragment 생성

 

  4.1. 패키지 생성

 

    프로젝트 > app > java > 패키지 > 우측 마우스 클릭 > New > Package

 

 

 

  4.2. Fragment.kt 생성

   

    위 패키지 경로에 Fragment 파일 생성

 

  만들 화면에 맞는 이름으로 원하는 개수만큼 생성

 

 

4.3. MainActivity.kt에 Fragment 등록

# 프로젝트 > app > java > 패키지 > MainActivity.kt


override fun onCreate(){
  ...
        val homeFragment = HomeFragment()
        val reviewFragment = ReviewFragment()
        val mapFragment = MapsFragment()
        val hospitalFragment = HospitalFragment()
        val settingFragment = SettingFragment()

        makeCurrentFragment(homeFragment)
        bottom_nav.setOnNavigationItemSelectedListener {
            when(it.itemId){
                R.id.ic_home -> makeCurrentFragment(homeFragment)
                R.id.ic_review -> makeCurrentFragment(reviewFragment)
                R.id.ic_map -> makeCurrentFragment(mapFragment)
                R.id.ic_hospital -> makeCurrentFragment(hospitalFragment)
                R.id.ic_setting -> makeCurrentFragment(settingFragment)
            }
            true
        }
  ...
}