[Kotlin] BottomNavigation

 

원래 이번에는 서버 통신에 관련된 내용을 배웠는데,

내가 제대로 이해하지를 못해서,,,

이번주에 바로 쓰기에는 무리가 있다고 판단하여,,,

저번 주차에 배웠던 내용 중에 쓰고 싶었는데 못썼던, BottomNavigation에 대해서 포스팅하는 시간을 가진다!

 

참고로 BottomNavigation은 앞에 다루었던 ViewPager2를 알고있어야한다.

 

---

1. BottomNavigation 란?

컨텐츠 전환 및 탐색을 위한 하단 탭바

 

- 하단 탐색 모음을 사용하면 사용자가 탭 한 번으로 상위 수준 보기를 쉽게 탐색하고 전환할 수 있음. 즉, ViewPager2와 연동하여 서브 화면들을 전환할 수 있음.

- 애플리케이션에 3~5개의 최상위 대상이 있는 경우 사용해야한다.

- BottomNavigation이 보여주는 화면은 동등한 중요도(깊이)를 가짐.

- 보통 어플에서 봤을때, 아래의 그림과 같이 하단에 있는 탭바를 의미.

 

 

 

2. 상단탭 vs 하단탭

 

✅ 상단탭은 위에 있고 하단 탭은 아래에 있다

이건 당연한 이야기지만 두 탭의 위치가 다르다.

 

✅ 항목의 개수가 다르다

하단탭의 항목 개수는 3~5개로 제한을 두는 반면에, 상단탭은 그 이상이 되더라도 좌우로 스크롤을하며 항목을 선택할 수 있으므로 딱히 제한이 없다.

 

✅  상단 탭에서는 동일 주제, 하단 탭에서는 다른 주제의 항목을 놓는다.

기능을 구별할 때에는 하단 탭에서 사용자가 직관적으로 선택을 하여 이동을할 수 있게 하는 반면에, 상단탭은 컨텐츠를 나열식으로 보여주는 앱에서 주로 사용한다.

 

 

 

3. BottomNavigation 구현

1️⃣ 하단탭에 사용할 아이콘 만들기

drawable -> new -> Vector Asset 순서로 클릭한다.

 

1️⃣ - 2️⃣ 아이콘 저장

Clip Art의 카메라 아이콘을 누르면 더 많은 아이콘을 확인할 수 있다.

그 중 사용하고자하는 것을 선택한 뒤, Name을 적절히 바꿔주고 Next 버튼을 누르면 생성이 된다!

 

 

2️⃣ menu.xml 만들기

res -> New -> Android Resource File을 선택하면, 위와 같은 팝업창이 나타난다.

여기서 File name은 자유롭게 작성하고, Resource type을 Menu로 꼭! 변경해준 뒤 OK 버튼을 누른다.

 

 

2️⃣ - 1️⃣ menu.xml 코드 작성

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_android"
        android:icon="@drawable/ic_android"
        android:title="안드로이드" />

    <item
        android:id="@+id/menu_list"
        android:icon="@drawable/ic_list"
        android:title="리스트" />

    <item
        android:id="@+id/memu_camera"
        android:icon="@drawable/ic_camera"
        android:title="카메라" />

</menu>

2에서 만든 파일에 다음과 같은 소스를 작성해 넣는데,

각각 아이콘의 id, icon (drawable에서 생성해준 것), title(네비게이션을 봤을 때, 하단에 적혀있는 글) 을 각각 작성해주는 것이다.

 

 

3️⃣  아이콘 색상 변경 (selector)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pink" android:state_checked="true"/>
    <item android:color="#8F9090" android:state_checked="false"/>
</selector>

위에서 삽입한 사진을 보면 알 수 있듯이, 아이콘이 체크되어있을 때는 핑크색이고 체크가 되지 않아있을 때는 회색이다.

그 속성을 넣기 위한 코드를 작성해주는 것이다.

res -> new -> android resource File을 선택해서 파일을 만들어준 뒤, 코드를 작성하면 된다.

 

 

4️⃣ Activity Layout에 BottomNavigationView 삽입

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/menu_sample"
        app:itemRippleColor="#EC9090"
        app:itemTextColor="@color/selector_menu"
        app:itemIconTint="@color/selector_menu"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

여기서 정리할 Item 속성 3가지

- itemIconTint : 탭의 아이콘 색상

- itemTextColor : 탭의 타이틀 색상

 

 

5️⃣ BottomNavigation과 ViewPager2 연동

private fun initBottomNavigation() {
        binding.vpSample.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
            	//ViewPager2의 페이지 중 하나가 선택된 경우에 그에 대응하는 하단탭 체크
                binding.bottomNavigationView.menu.getItem(position).isChecked = true
            }
        })

        binding.bottomNavigationView.setOnItemSelectedListener {
            when(it.itemId) {	//체크된 item의 Resource id값으로 어떤 아이템이 선택되었는지 구분
                R.id.menu_android -> {
                    binding.vpSample.currentItem = FIRST_FRAGMENT
                    return@setOnItemSelectedListener true
                }
                R.id.menu_list -> {
                    binding.vpSample.currentItem = SECOND_FRAGMENT
                    return@setOnItemSelectedListener true
                }
                else -> {
                    binding.vpSample.currentItem = THIRD_FRAGMENT
                    return@setOnItemSelectedListener true
                }
            }
        }
    }

	//이벤트 처리 및 가독성을 위한 상수 선언
    companion object {
        const val FIRST_FRAGMENT = 0
        const val SECOND_FRAGMENT = 1
        const val THIRD_FRAGMENT = 2
    }

위의 주석 참고!

 

 

6️⃣실행화면 캡쳐

 

화면을 스와이프하거나 탭을 선택하여 이동 가능

 

 

 

 

---

안드로이드 스튜디오 공식 문서와 안드로이드 파트장님이 준비해주신 세미나 내용을 참고하면서 직접 이해한 내용을 바탕으로 작성했습니다.