BottomNavigationView, Fragment 사용하기

BottomNavigationView와 Fragment를 사용해 아래와 같은 화면을 구성해 보았다.

BottomNavigationView 사용하기

BottomNaviagtionView를 이용하면 화면 아래 부분에 메뉴 탭을 만들 수 있다. 각 메뉴탭들을 item이라 부르고 menu 리소스 xml 파일에서 item을 구성할 수 있다.

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/my_navigation"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation_menu" />

위의 코드와 같이 BottomNavigationView를 사용할 수 있다. app:menu 속성에 item을 구성한 menu 리소스 xml 파일을 넣어주면 된다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/homeItem"
        android:icon="@drawable/home"
        android:title="@string/home" />
    <item
        android:id="@+id/searchItem"
        android:icon="@drawable/search"
        android:title="@string/search" />
    <item
        android:id="@+id/photoItem"
        android:icon="@drawable/camera"
        android:title="@string/gallery" />
    <item
        android:id="@+id/favoriteItem"
        android:icon="@drawable/heart"
        android:title="@string/favorite" />
    <item
        android:id="@+id/accountItem"
        android:icon="@drawable/user"
        android:title="@string/account" />
</menu>

위의 코드는 item을 구성한 menu 리소스 파일이다. 이런 식으로 item을 생성할 수 있다.

Fragment

Fragment는 하나의 레이아웃에 여러 화면이 전환될 수 있는데 전환되는 화면을 Fragment라고 하고 이 때 사용되는 레이아웃이 FrameLayout이다.

<FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation_division"
        android:layout_below="@+id/toolbar_division" />

MainActivity의 레이아웃 리소스인 activity_main.xml에 위와 같이 FrameLayout을 추가하였다. 그리고 이 FrameLayout에서 전환된 화면인 Fragment 파일과 이에 대한 레이아웃 리소스 파일을 다음과 같이 구성하였다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/home" />

</androidx.constraintlayout.widget.ConstraintLayout>

class HomeFragment: Fragment() {
    private lateinit var mBinding: FragmentHomeBinding

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        mBinding = FragmentHomeBinding.inflate(inflater, container, false)

        return mBinding.root
    }
}

위와 같이 프래그먼트 5개를 구성하였다.

이제 각각의 메뉴 탭을 눌렀을 때 화면이 전환되는 동작을 구현해 볼 것이다. 이 동작은 BottomNavigationView가 있는 MainActivity.kt 클래스 파일에 작성해야 한다.

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

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

        initNavigationBar() //네이게이션 바의 각 메뉴 탭을 눌렀을 때 화면이 전환되도록 하는 함수.
    }
    
    fun initNavigationBar() {
        binding.myNavigation.run {
            setOnNavigationItemSelectedListener {
                when (it.itemId) {
                    R.id.homeItem -> {
                        changeFragment(HomeFragment())
                    }
                    R.id.searchItem -> {
                        changeFragment(SearchFragment())
                    }
                    R.id.photoItem -> {
                        changeFragment(GalleryFragment())
                    }
                    R.id.favoriteItem -> {
                        changeFragment(FavoriteFragment())
                    }
                    R.id.accountItem -> {
                        changeFragment(AccountFragment())
                    }
                }
                true
            }
            selectedItemId = R.id.homeItem
        }
    }

    fun changeFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .replace(binding.mainContent.id, fragment).commit()
    }
}

onCreate()에 각 네비게이션바의 메뉴탭을 눌렀을 때 화면이 전환되도록 하는 initNavigationBar() 메서드를 호출하였다. setOnNavigationItemSelectedListener 이벤트를 통해 메뉴 탭을 눌렸음을 감지하고 각 메뉴에 맞는 화면(Fragment)로 전환되도록 한다. 그리고 맨 처음 초기 화면에서의 Fragment는 HomeFragment가 보이도록 selectedItemId = R.id.homeItem 코드를 추가하였다.

[출처] 두잇뚜-[Android] Kotlin + BottomNavigationView + Fragment 사용하기