[Android] 하단 탭 사용하기 (BottomNavigation)

BottomNaviagtionView는 NavigationBarView를 확장하는 클래스이다. BottomNaviagtionView는 어플리케이션에서 표준 하단 탐색바를 나타내고 머티리얼 디자인 하단 탐색바의 구현이다. 하단 탐색바를 사용하면 사용자가 탭 한 번으로 상위 수준의 뷰를 쉽게 탐색하고 전환할 수 있다. 이러한 사용자 인터페이스는 애플리케이션에 3~5 개의 최상위 뷰가 존재하는 경우 사용하는 것을 추천한다.

레이아웃 구성하기.

하나의 액티비티를 생성하자. 생성한 액티비티의 레이아웃 구성은 아래와 같다. FrameLyout을 선언하고 내부에 BottomNaviagtionView를 생성한다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu"
        android:layout_gravity="bottom"
        />

</FrameLayout>

BottomNaviagtionView 내에 app:menu="@menu/menu" 를 확인할 수 있다. 여기의 menu가 하단 탭을 구성하는 리스트가 된다. res > drawable > menu 디렉터리 하위에 menu.xml을 생성하고 아래와 같이 구성한다.
menu 내에는 각 item이 선언될 수 있다. item은 title과 icon을 정의할 수 있다. showAsAction은 4자기 옵션으로 제공되고 아래와 같다.

• always : 항상 보이게 표시
• never : 항상 overflow에 표시
• ifRoom : 액션바에 공간이 있을경우 표시
• withText : 액션바에 아이콘과 텍스트를 함께 표시

<?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/list"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/list_icon"
        android:title="List"/>
    <item
        android:id="@+id/histroy"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/message_icon"
        android:title="History"/>
    <item
        android:id="@+id/more"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/more_icon"
        android:title="More"/>
</menu>

액티비티와 프레그먼트 생성

프레그먼트 생성

테스트를 위해 3개의 프레그먼트를 생성하였다. 생성하는 프레그먼트는 List, History, More 프레그먼트이며 각 프레그먼트의 코드는 기본 코드를 사용한다. 아래와 같은 프레그먼트 클래스가 3개 존재한다. 레이아웃은 각 프레그먼트 구분을 위해 문자열을 변경한다.

class HistoryFragment : Fragment() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_history, container, false)
    }
}

액티비티에서 BottomNavigationView 연동하기

액티비티에서 NavigationBarView를 활용하여 어떤 메뉴가 선택되었는지 이벤트를 전달받아 처리한다. 주의할 점은 BottomNavigationView.OnNavigationItemSelectedListener 은 Deprecated 되어 더이상 사용하지 않는다. 

아래 코드에서도 해당 인터페이스 대신 NavigationBarView.OnItemSelectedListener를 사용하고 있다. 그 외의 코드는 간단하므로 자세한 설명은 생략한다. 

class MainActivity : AppCompatActivity() {
    private lateinit var historyFragment: Fragment
    private lateinit var listFragment: Fragment
    private lateinit var moreSettingFragment: Fragment

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

        historyFragment = HistoryFragment()
        listFragment = ListFragment()
        moreSettingFragment = MoreSettingFragment()

        supportFragmentManager.beginTransaction().replace(R.id.container, listFragment).commit()

        val bottomnavigationView = findViewById(R.id.bottom_navigation) as NavigationBarView
        bottomnavigationView.setOnItemSelectedListener (
            object: NavigationBarView.OnItemSelectedListener {
                override fun onNavigationItemSelected(item: MenuItem): Boolean {
                    var selectedFragment: Fragment ?= null
                    when(item.itemId) {
                        R.id.histroy -> selectedFragment = historyFragment
                        R.id.more -> selectedFragment = moreSettingFragment
                        R.id.list -> selectedFragment = listFragment
                    }
                    selectedFragment?.let {
                        supportFragmentManager
                            .beginTransaction()
                            .replace(R.id.container, selectedFragment)
                            .commit()
                        return true
                    }
                    return false
                }
            }
        )
    }
}

결과

 

참고 및 문헌

https://developer.android.com/reference/com/google/android/material/bottomnavigation/BottomNavigationView

https://material.io/components/bottom-navigation#usage