(Android) TabLayout, ViewPager2 연동

TabLayout을 만들고, ViewPager2를 연동하여 Tab 선택 시 Page(Fragment)를 변경하는 예제입니다

1. TabLayout / ViewPager2 생성 

우선 UI를 그립니다 

예제에서는 Fragment(fragment_tab.xml) 위에 ViewPager / TabLayout을 생성하였습니다 

Activity에 하셔도 상관없습니다 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</layout>

 

2. Adapter 생성

Page이동을 구현하기 위해 Adapter를 추가합니다 

 

FragmentStateAdapter를 상속받아 구현하면됩니다. 

getItemCount에서는 fragment의 개수를 리턴하고, createFragment에서 tab 순서에 따라 Fragment를 생성하여 리턴합니다 

예제에서는 Tab1Fragment 및 Tab2Fragment를 미리 생성해두었습니다 (TextView만 덩그러니 있는 Fragment)

package com.inasie.examples.view.binding

import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.inasie.examples.view.fragment.examples.Tab1Fragment
import com.inasie.examples.view.fragment.examples.Tab2Fragment
import java.lang.Exception

class SampleViewPagerAdapter(parent: Fragment) : FragmentStateAdapter(parent) {
    override fun getItemCount(): Int {
        return 2
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Tab1Fragment()
            1 -> Tab2Fragment()
            else -> throw Exception("invalid position")
        }
    }
}

3. ViewPager2 및 TabLayout연동

이제 viewPager2에 adapter를 연결하고, TabLayout과 ViewPager2를 연동하면 됩니다 

TabLayout과 ViewPager2는 TabLayoutMediator를 이용해 연동합니다

 TabLayoutMediator의 세번째 인자는 TabConfigurationStrategy functional interface입니다. 

void onConfigureTab(@NonNull TabLayout.Tab tab, int position) 를 구현해야하며  position에 따라 Tab에 보여줄 Text나 Icon등을 설정해주면 됩니다 

 

 

class TabFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val binding = DataBindingUtil.inflate<FragmentTabBinding>(
            inflater,
            R.layout.fragment_tab,
            container,
            false
        )
        initTabLayout(binding.viewPager, binding.tabLayout)
        return binding.root
    }

    private fun initTabLayout(viewPager: ViewPager2, tabLayout: TabLayout) {
    	// 1. ViewPager2에 adapter연동
        viewPager.adapter = SampleViewPagerAdapter(this)
        
        // 2. TabLayout과 ViewPager2연동
        TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            when (position) {
                0 -> tab.text = "Tab1"
                1 -> tab.text = "Tab2"
                else -> throw Exception("invalid position")
            }

        }.attach()
    }
}

실행해보면 Tab 이동시 Page가 변경되는것을 확인할 수 있습니다