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

머티리얼 디자인에서 제공하는 라이브러리를 사용해서 하단 네비게이션바를 만들어보겠습니다.

 

---

빌드 스크립트 설정

 

새프로젝트 생성 후 gradle 파일에 들어가서 dependencies 에 아래사진과 같이 머티리얼 디자인에서 제공하는 라이브러리 추가해주시고, sync Now 를 해주시면 됩니다.

 

 

 

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

 

---

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

코드를 그대로 복사/붙여넣기를 하면 아래 사진과 같이 빨간색으로 에러가 나올텐데 빨간 느낌표를 눌러서 navi_menu.xml을 자동으로 생성합니다.

 

<activity_main.xml>

 

<?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">

    <FrameLayout android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/fl_container"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/bnv_main"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView android:layout_width="0dp"
        android:layout_height="?attr/actionBarSize" android:id="@+id/bnv_main" android:background="#FFFFFF"
        app:menu="@menu/navi_menu" app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

<navi_menu.xml>

 

navi_menu.xml을 자동으로 생성하면 아래 사진과 같이 파일이 만들어집니다. 

파일 안에 아래의 코드를 넣어줍니다.

 

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:id="@+id/first" app:showAsAction="ifRoom" android:enabled="true"
        android:icon="@drawable/ic_launcher_foreground" android:title="첫번째" />
    <item android:id="@+id/second" app:showAsAction="ifRoom"
        android:icon="@drawable/ic_launcher_foreground" android:title="두번째" />
    <item android:id="@+id/third" app:showAsAction="ifRoom"
        android:enabled="true" android:icon="@drawable/ic_launcher_foreground" android:title="세번째" />
</menu>

 

다른 탭에서 보여줄 프래그먼트 화면을 아래와 같이 선택해서 생성합니다.

 

 

 

프래그먼트 파일 생성시 자동으로 프래그먼트안에 있는 코드와 xml이 생성이 됩니다.

여기서 클래스 이름은 다르게 설정하셔도 됩니다. 

아래 사진처럼 HomeFragment, BoardFragment, SettingFragment 파일을 만들어 줍니다.

 

 

---

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

 

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

 

 

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

 

 

<최종코드>

import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle


class MainActivity : AppCompatActivity() {

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

        // 하단 탭이 눌렸을 때 화면을 전환하기 위해선 이벤트 처리하기 위해 BottomNavigationView 객체 생성
        var bnv_main = findViewById(R.id.bnv_main) as BottomNavigationView

        // OnNavigationItemSelectedListener를 통해 탭 아이템 선택 시 이벤트를 처리
        // navi_menu.xml 에서 설정했던 각 아이템들의 id를 통해 알맞은 프래그먼트로 변경하게 한다.
        bnv_main.run { setOnNavigationItemSelectedListener {
            when(it.itemId) {
                R.id.first -> {
                    // 다른 프래그먼트 화면으로 이동하는 기능
                    val homeFragment = HomeFragment()
                    supportFragmentManager.beginTransaction().replace(R.id.fl_container, homeFragment).commit()
                }
                R.id.second -> {
                    val boardFragment = BoardFragment()
                    supportFragmentManager.beginTransaction().replace(R.id.fl_container, boardFragment).commit()
                }
                R.id.third -> {
                    val settingFragment = SettingFragment()
                    supportFragmentManager.beginTransaction().replace(R.id.fl_container, settingFragment).commit()
                }
            }
            true
        }
            selectedItemId = R.id.first
        }
    }
}

 

---

프로젝트를 실행하면 탭바를 누를 경우 화면이 이동하는 것을 확인할 수 있습니다.

 

 

참고한 스틱코드

[Kotlin][Android] 탭바네비게이션 생성) stickode.com/detail.html?no=2107