[Android] Fragment 하나로 TabLayout 구성하기

보통 TabLayout을 사용할 때 ViewPager를 쓰곤 하는데, ViewPager를 사용하려면 노출할 화면 수만큼 Fragment를 만들어야 한다.

그런데 각 화면들의 구성이 똑같다면 굳이 여러 개의 Fragment를 만들지 않고 하나의 Fragment를 재활용하는 것이 낫다고 생각했다.

탭을 클릭했을 때 beginTransaction으로 Fragment을 생성하고 데이터만 바꿔주면 된다.

 

예제로 4개의 탭에 각 탭을 구분할 수 있도록 '첫번째' ~ '네번째'라고 텍스트가 적힌 프로젝트를 만들어봤다.

---

TabLayout에 탭 세팅

mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("첫번째"))
mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("두번째"))
mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("세번째"))
mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("네번째"))

TabLayout.Tab 인스턴스를 사용하여 탭을 생성하고 layout에 추가할 수 있다.

newTab을 사용하여 탭을 생성하고, 생성된 탭을 addTab을 사용하여 layout에 추가해준다.

---

Fragment 설정

val bundle = Bundle()
bundle.putString("data", "첫번째")

val fragment = MainFragment()
fragment.arguments = bundle

val transaction = supportFragmentManager.beginTransaction()
transaction.add(R.id.fc_main, fragment)
transaction.commit()

탭을 클릭하여 "~번째" 라는 텍스트를 띄운다고 했지만 앱이 실행됐을 때 클릭하는 이벤트가 실행되지 않아 처음에는 bundle을 이용하여 데이터를 Fragment에 넘겨주고 화면을 표시해야 한다.

 

Fragment를 추가하거나 삭제를 하려면 FragmentManager를 사용하여 FragmentTransaction을 생성해야 한다.

supportFragmentManager.beginTransaction을 통해 FragmentTransaction 객체를 만들고 add를 통해 Fragment를 추가하고 commit으로 Transaction에 설정이 완료되었다고 알린다.

---

선택한 탭에 맞는 데이터 보여주기

mBinding.tabMain.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(tab: TabLayout.Tab?) {
        fragment.changeTextView(tab!!.text.toString())
    }

    override fun onTabUnselected(tab: TabLayout.Tab?) {
    }

    override fun onTabReselected(tab: TabLayout.Tab?) {
    }
})

addOnTabSelectedListener를 통해서 탭의 선택 상태가 변경되었을 때를 확인할 수 있다.

onTabSelected를 통해 텍스트가 변경되도록 한다.

---

setTabLayout 전체코드

private fun setTabLayout() {
    mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("첫번째"))
    mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("두번째"))
    mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("세번째"))
    mBinding.tabMain.addTab(mBinding.tabMain.newTab().setText("네번째"))

    val bundle = Bundle()
    bundle.putString("data", "첫번째")

    val fragment = MainFragment()
    fragment.arguments = bundle

    val transaction = supportFragmentManager.beginTransaction()
    transaction.add(R.id.fc_main, fragment)
    transaction.commit()

    mBinding.tabMain.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
        override fun onTabSelected(tab: TabLayout.Tab?) {
            fragment.changeTextView(tab!!.text.toString())
        }

        override fun onTabUnselected(tab: TabLayout.Tab?) {
        }

        override fun onTabReselected(tab: TabLayout.Tab?) {
        }
    })
}

---

 

전체 코드