[Clone] 인스타그램 클론 프로젝트(3) - BottomNavigationView

이번 강의에서는 아래의 사진과 같이 하단의 네비게이션 탭바를 만들었다.

BottomNavigationView란 보통 화면 맨 밑이나 위에 붙어있는 버튼 모음으로 프래그먼트를 활용해서 각각 다른 화면들을 보여줄 때 사용한다. 하단의 탭으로 화면을 이동할 수 있는 이 기능은 카카오톡, 유튜브, 인스타그램 등 여러 앱에서 쉽게 볼 수 있다.

1. menu xml 작성

res폴더 안에 menu폴더를 생성하고 BottomNavigaitonView에서 사용할 Menu Resource File을 만든다.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:enabled="true"
        android:title="home"/>
        
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:enabled="true"
        android:title="search"/>    
        
        <!-- 더 추가-->
        
</menu>

icon속성은 탭 아이콘을 설정, title속성은 탭 이름, enabled속성은 터치 여부로 default가 true이기 때문에 추가하지 않아도 된다

2. xml에 BottomNavigationView 추가

menu속성으로 위에서 만든 menu.xml 파일을 설정해준다.
itemBackground속성은 탭 background를 변경, itemIconTint속성은 아이템 색상을 설정, itemTextColor속성은 탭 이름 색상을 설정한다.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu = "@menu/bottom_navigation_main"
    app:itemBackground="@color/white"/>

3. Fragment 생성

네비게이션 시 이동할 화면들을 Fragment로 생성해준다.

4. Activity에서 NavigationBarView.OnItemSelectedListener 오버라이딩

강의에서는 setOnNavigationItemSelectedListener을 사용했지만 현재는 deprecated 되었다고 한다.
setOnNavigationItemSeletedListener 대신에 NavigationBarView.OnItemSelectedListener을 통해서 selecte 이벤트를 완성하였다.
아래 링크에 보다 정확한 내용이 작성되어있다.
https://junyoung-developer.tistory.com/153

class MainActivity : AppCompatActivity(), NavigationBarView.OnItemSelectedListener {

   override fun onCreate(savedInstanceState: Bundle?) {
        ...
        binding.bottomNavigation.setOnItemSelectedListener(this)
    }
    
        override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
        
            R.id.action_home -> {
                val detailViewFragment = DetailViewFragment()
                supportFragmentManager.beginTransaction()
                    .replace(R.id.main_content, detailViewFragment).commit()
                return true
            }
            
            R.id.action_search -> {
                val gridFragment = GridFragment()
                supportFragmentManager.beginTransaction()
                    .replace(R.id.main_content, gridFragment).commit()
                return true
            }
            
            ...
            
        }
        return false
    }
    

}

전환할 프래그먼트를 만든 뒤 FragmentManager의 replace() 함수를 통해 화면을 전환해주면 된다.