[안드로이드] TabLayout와 ViewPager2연결 구현 방법

ViewPager2 를 이용하면

여러개의 Fragment 들을 하나의 Activity내에서 스와이프 시켜 노출시킬 수 있다.

 

여기서 한 걸음 더 나아가 TabLayout을 ViewPager2에 연동하면,

탭 메뉴를 통해서도 Fragment 들을 노출시킬 수 있다.

 

ViewPager2 를 이용한 Fragment 연결 방법은 아래 글에 상세하게 정리되어 있다.

[안드로이드] 여러개의 Fragment Swipe 구현 방법: ViewPager2

 

이 글에선 위의 작업이 완료된 상태에서 TabLayout을 연동하여 

상단에 탭메뉴를 추가하는 방법만 정리한다.

 

방법은 아주 간단하다.

 

1. TabLayout 추가

2. Tablayout과 ViewPager2 연결 처리

---

1. TabLayout 추가

- Activity의 레이아웃 XML 파일에 TabLayout 을 추가 배치한다.

- TabLayout 내부에는 TabItem이 자동으로 3개 정도 추가 되는데, 각각 탭 메뉴 하나로 작동한다.

- 탭 메뉴가 더 필요하다면, TabItem을 추가 배치한다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- TabLayou 을 배치한다. -->
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <!-- TabItem은 탭메뉴 하나를 의미한다. -->
        <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>

    <!-- ViewPager2: 이 위치에 Fragment들이 노출된다. -->
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        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" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

2. Tablayout과 ViewPager2 연결 처리

- Activity 클래스에서 처리하는 작업이다.

1) TabLayout을 참조

2) TabLayoutMediator.attach() 메서드를 통해 ViewPager2와 연결하고, TabItem 메뉴명을 설정

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.viewpager_activity)
        
        // ViewPager2, TabLayout 참조
        val viewPager:ViewPager2 = findViewById(R.id.viewPager)
        val tabLayout:TabLayout = findViewById(R.id.tabLayout)

        // FragmentStateAdapter 생성
        val viewpagerFragmentAdapter = ViewpagerFragmentAdapter(this)

        // ViewPager2의 adapter 설정
        viewPager.adapter = viewpagerFragmentAdapter


        // ###### TabLayout과 ViewPager2를 연결
        // 1. 탭메뉴의 이름을 리스트로 생성해둔다.
        val tabTitles = listOf<String>("첫번째", "두번째", "세번째")
        
        // 2. TabLayout과 ViewPager2를 연결하고, TabItem의 메뉴명을 설정한다.
        TabLayoutMediator(tabLayout, viewPager, {tab, position -> tab.text = tabTitles[position]}).attach()

    }
}

---

끝!

 

위 코드에서 사용된 

Fragment, ViewPager2, FragmentStateAdapter 생성 및 연동 방법은 아래글을 확인해 보면 좋을 것 같다.

 

[안드로이드] 여러개의 Fragment Swipe 구현 방법: ViewPager2