TIL : BottomNavigationView 구현

바텀 네비게이션을 뷰라는 하단메뉴가 이미 있다고 한다. 미리 구현되어 있는 게 참 많은 거 같다.

 

우선 메뉴를 구현해주자

 

res/menu/bottom_menu.xml을 만들어주었다.

경로를 꼭 지켜줘야한다. 

<?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/navi_home"
        android:icon="@drawable/hut"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="홈"/>
    <item
        android:id="@+id/navi_localLife"
        android:icon="@drawable/copy"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="동네생활"/>
    <item
        android:id="@+id/navi_myrear"
        android:icon="@drawable/location"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="내 근처"/>
    <item
        android:id="@+id/navi_chat"
        android:icon="@drawable/chat"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="채팅"/>
    <item
        android:id="@+id/navi_myInfo"
        android:icon="@drawable/user2"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:title="나의 정보" />

</menu>

메뉴를 클릭하면 글자색과 아이콘 색이 바뀌게 하고 싶어서 스타일도 만들어주었다.

해당 파일은 res/color/bottom_menu_style.xml이다. 뒤에 파일이름은 맘대로 적어도 상관없지만 res/color는 반드시 지켜줘야한다.

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

 

적용될 화면에다가 배치할 차례다. 

res/layout/activity_home.xml이라 만들고 배치하였다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

	//여기다가 프래그먼트도 구현할거다.
    <FrameLayout
        android:id="@+id/homeFragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottom_navi_viiew"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" /> 

	//바텀네비게이션뷰
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navi_viiew"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:background="#222222"
        app:itemIconTint="@color/bottom_menu_style" //아이콘색 바뀌게 하는 bottom_menu_style을 여기다가 적어준다.
        app:itemTextColor="@color/bottom_menu_style" //글자색 바뀌게 하는 bottom_menu_style을 여기다가 적어준다.
        app:labelVisibilityMode="labeled" // 이 값으로 해놓으면 글자와 아이콘이 동시에 나온다.
        app:menu="@menu/bottom_menu" // res/menu에 있던 파일을 적용해준다.
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

com.google.android.material.bottomnavigation.BottomNavigationView  <- 이 한덩어리면 끝이다.

 

시각적으로 보이는 것들을 만들었으니 이제 작동이 되게 할 차례다.

class HomeActivity : AppCompatActivity() {
    private val binding by lazy { ActivityHomeBinding.inflate(layoutInflater) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(binding.root)

		//네비게이션뷰 코드
        binding.bottomNaviViiew.run{ //setonnavigationitemselectedlistener 라는 것이 있지만 Deprecated 되었으므로 대체했다.
            setOnItemSelectedListener {
                when(it.itemId) {
                    R.id.navi_home -> {   //res/menu에 있던 아이디들을 적는다. 
                        val intent = Intent(applicationContext,HomeActivity::class.java)
                        startActivity(intent)
                    }
                    R.id.navi_localLife -> {
                        val intent = Intent(applicationContext,LocalLifeActivity::class.java)
                        startActivity(intent)
                    }
                    R.id.navi_myInfo -> {
                        val intent = Intent(applicationContext,MyinfoActivity::class.java)
                        startActivity(intent)
                    }
                    R.id.navi_chat -> {
                        val intent = Intent(applicationContext,ChatActivity::class.java)
                        startActivity(intent)
                    }
                }
                true //트루로 해놓아야 작동이 된다고 한다. 
            }
        }
    }

}

 

현재는 명시적 인텐트로 페이지를 이동하지만 프래그먼트로 대체할 계획이다.

 

근데 문제가 생겼다....

위에 게시글은 임의로 채워넣은거다. 하단 메뉴만 주목하길 바란다.

내 의도는 하단에 메뉴를 클릭했을 때 주황색으로만 변하는건데 아이콘 주변에 분홍색 배경이 생긴다. 메테리얼 테마가 적용된거같은데.... 해결하면 추후 수정하겠다.