[Android/Kotlin] BottomNavigationView와 ViewBinding

Eunhye Kim·2022년 6월 10일
0

안드로이드 어플에서 하단에 위치한 바 형태의 메뉴탭을 만들고 클릭하면 화면이 전환되도록 해보자.


res - New - Android Resource Directory 클릭하면, 아래와 같은 창이 뜬다.

여기에서 Resource type을 menu로 선택하고 Okay를 누르면 아래와 같이 menu 디렉토리가 생성된다.

menu 디렉토리에 자신이 원하는 이름으로 xml 파일을 하나 만들어서 커스텀하면 된다. (ex. bottom_nav_menu.xml)


이런 식으로 아이템을 만들면 바텀 네비게이션 안에 하나의 메뉴로 들어가게 된다.

이제 layout에서 이 메뉴를 입혀주어야 한다.


activity_main.xml


<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bnv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu" />

여기까지 하면 하단에 bottom navigation bar는 생겼다.

그런데 내가 하고 싶은 것은 바텀 바에 아이템을 누르면 해당 페이지로 넘어가는 동작까지이기 때문에,

FrameLayout과 각 Fragment를 만들어서 binding을 통해 화면 전환을 해보도록 하자.

 <FrameLayout
        android:id="@+id/main_frm"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/main_bnv">
    </FrameLayout>

아까 만든 BottomNavigationView 위에 FrameLayout을 넣는다.

이제 activity나 class 파일이 위치한 java 폴더로 가서 New - Fragment 클릭해 생성

나는 HomeFragment를 먼저 만들었다.

HomeFragment.kt

class HomeFragment : Fragment() {

    lateinit var binding: FragmentHomeBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentHomeBinding.inflate(inflater, container, false)

        return binding.root
    }

}

그 다음으론 바텀 바가 있는 MainActivity에 메뉴 아이템 클릭 리스너를 만들어준다.

함수 이름이나 세부 코드는 자기 스타일대로 적용하면 될 듯

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initBottomNavigation()
    }

    private fun initBottomNavigation(){

        supportFragmentManager.beginTransaction()
            .replace(R.id.main_frm, HomeFragment())
            .commitAllowingStateLoss()

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

아까 activity_main.xml에서의 id와 잘 매치시켜서 적어야 한다.

그리고 중요한 거!!!

build.gradle에 viewBinding에 관한 코드를 꼭 작성해주어야 이 모든 것이 적용되니까 잊지말자.

profile
개발자

0개의 댓글