[Android] ViewPager2와 TabLayout 사용하여 레이아웃 만들기

탭과 뷰페이저를 사용하면 스와이프해서 다른 프래그먼트를 볼 수 있는 탭을 만들 수 있다.

사용해보기

종속성 추가

android {
    buildFeatures {
        viewBinding true
    }
}

dependencies {
    // 뷰페이저 2
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

뷰페이저 사용을 위해 종속성을 추가해주고, 뷰바인딩을 사용할 것이기 때문에 추가해준다.

레이아웃 만들기

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout" />

탭레이아웃과 뷰페이저를 추가해준다.

이와 같은 모양으로 만들 것이다.

프래그먼트 생성

사용할 프래그먼트를 3개 생성해준다.

뷰페이저 어댑터 생성

class ViewPagerAdapter (fragment : FragmentActivity) : FragmentStateAdapter(fragment){
    override fun getItemCount(): Int = 3

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> Fragment1()
            1 -> Fragment2()
            else -> Fragment3()
        }
    }
}

FragmentStateAdapter를 상속받는 뷰페이저 어댑터를 생성해준다.

getItemCount는 현재 아이템의 개수를 반환하고

createFragment는 선택된 위치의 프래그먼트로 전환해준다.

메인 액티비티

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

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

        // 탭 설정
        binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab?) {
                // 탭이 선택 되었을 때
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
                // 탭이 선택되지 않은 상태로 변경 되었을 때
            }

            override fun onTabReselected(tab: TabLayout.Tab?) {
                // 이미 선택된 탭이 다시 선택 되었을 때
            }
        })

        // 뷰페이저에 어댑터 연결
        binding.pager.adapter = ViewPagerAdapter(this)

        /* 탭과 뷰페이저를 연결, 여기서 새로운 탭을 다시 만드므로 레이아웃에서 꾸미지말고
        여기서 꾸며야함
         */
        TabLayoutMediator(binding.tabLayout, binding.pager) {tab, position ->
            when(position) {
                0 -> tab.text = "탭1"
                1 -> tab.text = "탭2"
                2 -> tab.text = "탭3"
            }
        }.attach()

    }
}

addOnTabSelectedListener를 사용하여 탭의 설정을 할 수 있고,