[Kotlin] Bottom Navigation

바텀 네비게이션 메뉴 파일 생성

---

res에 menu 폴더를 하나 만든다.

menu 폴더 안에 바텀 네비게이션의 탭 개수와 들어갈 아이콘이나 텍스트를 작성한 xml 파일을 만든다.

 

<bottomnavigation_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/bottomnavigation_main_study" app:showAsAction="ifRoom"
        android:icon="@drawable/ic_face" android:title="학습하기" />
    <item android:id="@+id/bottomnavigation_main_course" app:showAsAction="ifRoom"
        android:icon="@drawable/ic_course" android:title="코스" />
    <item android:id="@+id/bottomnavigation_main_mypage" app:showAsAction="ifRoom"
        android:enabled="true" android:icon="@drawable/ic_home" android:title="마이페이지" />
</menu>

<item> 개수가 탭의 개수이며 탭은 다음 코드로 수정할 수 있다.

android:icon="@drawable/ic_face"
// 바텀 네비게이션에 들어갈 아이콘
android:title="학습하기"
// 아이콘 밑에 들어갈 텍스트

 

Activity 생성

---

바텀 네비게이션을 적용할 Activity 파일을 만든다. (ex. MainActivity)

함께 만들어진 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:id="@+id/framelayout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

<!--바텀 네비게이션-->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomnavigation_main"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:menu="@menu/bottomnavigation_menu">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

</androidx.constraintlayout.widget.ConstraintLayout>

 

탭 별 Fragment 생성

---

탭을 선택할 때마다 바뀔 Fragment를 탭 개수만큼 생성해준다.

ex) StudyFragment, CourseFragment, MypageFragment

생성 후에는 아까 바텀 네비게이션을 적용하려고 만든 파일(MainActivity)에 아래와 같이 코드를 작성한다.

 

<MainActivity.kt>

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.cookandroid.zerozone.course.CourseFragment
import com.cookandroid.zerozone.databinding.ActivityMainBinding
import com.cookandroid.zerozone.main.StudyFragment
import com.cookandroid.zerozone.mypage.MypageFragment

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding=ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.bottomnavigationMain.run{
            setOnItemSelectedListener {
                when(it.itemId){
                    R.id.bottomnavigation_main_study-> {
                        supportFragmentManager.beginTransaction().replace(R.id.framelayout_main, StudyFragment()).commit()
                    }
                    R.id.bottomnavigation_main_course->{
                        supportFragmentManager.beginTransaction().replace(R.id.framelayout_main, CourseFragment()).commit()
                    }
                    R.id.bottomnavigation_main_mypage->{
                        supportFragmentManager.beginTransaction().replace(R.id.framelayout_main, MypageFragment()).commit()
                    }
        }
                true
    }
            selectedItemId=R.id.bottomnavigation_main_study
            //첫번째 탭이 선택된 상태로 있도록
}

 

이후 실행하면 탭을 선택할 때마다 Fragment가 바뀌는 것을 볼 수 있다.