[Android] BottomNavigation

Jetpack Navigation을 사용하면 바텀네비게이션을 쉽게 구현할 수 있지만

이번에는 제트팩 네비게이션을 사용하지 않고, FLO 앱의 바텀네비게이션을 구현해보자.

 

구글에서 하나의 액티비티 + 여러 개의 프래그먼트 구성을 밀고 있기 때문에 

FLO 또한 메인액티비티에서 프래그먼트가 교환되는 형태로 구현하면 편리하다.

 

따라서 메인액티비티에서 바텀네비게이션을 구현해보자.

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

 

이렇게 바텀 네비게이션뷰를 메인액티비티에서 생성해주었으면

menu에서 menu 아이템을 담을 xml파일을 만들어주어야 한다.

각자의 아이콘에 맞게끔 아이콘을 설정해 준 다음, 아이디도 각자 알맞게 설정해주자.

이제 연결할 차례이다.

다시 메인액티비티.xml파일로 가서 바텀네비게이션에 menu.xml파일을 추가해주어 연결해주자.

app:menu="@menu/bottom_nav_menu"

app:labelVisibilityMode="labeled"

또한, 아이콘하고 위에서 설정한 title도 같이 보이게 하기 위해 lableVisibilityMode 를 설정해준다.

 

이제 해당 아이템을 선택하였을 때 해당 프래그먼트로 이동하는 것을 구현해보자.

먼저 beginTransaction을 통하여 맨 처음 프래그먼트를 정해주자.

메인액티비티에 있는 메인프레임을 HomeFragment로 지정해주고,

binding을 통하여 바텀네비게이션에 접근해 준 다음 setOnItemSelectedListener로 프래그먼트를 선택한다.

binding.mainBnv.setOnItemSelectedListener{ item ->
    when (item.itemId) {

        R.id.homeFragment -> {
            supportFragmentManager.beginTransaction()
                .replace(R.id.main_frm, HomeFragment())
                .commitAllowingStateLoss()
            return@setOnItemSelectedListener true
        }

그 다음 홈프래그먼트가 선택되었을 때 replace(R.id.main_frm, HomeFragment())

를 통해서 해당 프레임을 홈프래그먼트로 대체해준다.

메인엑티비티 안에 있는 메인프레임에서 HomeFragment -> LookFragment 로 바뀌는 것을 확인할 수 있다.

이렇게 Jetpack Navigation없이 바텀네비게이션을 구현해봤다.

해당 아이템을 선택할 때 마다 메인프레임 안을 변경해주는 코드를 계속 작성해주어야 한다는 불편한 점이 있었다.

제트팩네베이게이션을 활용하여 프래그먼트간의 이동을 더욱 간편하게 해봐야겠다.

 

다음 글에서는 Jetpack Navigation Graph로 Bottom Navigation을 더욱 쉽게 구현해야겠다.