[Kotlin/Android] ViewPager2 (2) Tab Layout 생성

Tab Layout

 

tab layout을 사용하여 ViewPager2에 탭을 가로로 표시할 수 있다. 이러한 tab은 Swipe View에서 페이지 간 탐색을 위해서 인터페이스를 제공한다.

 

Tab Layout 생성

 

<viewPager2 layout> 요소가 있는 xml 파일 내에 <Tab Layout> 요소를 추가한다.

<ViewPager2> 요소 위에 <Tab Layout>을 추가하는 것이 정석.

• In FragmentSwipeView.xml

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".swipeview.SwipeViewFragment">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            app:tabMode="scrollable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewPager"
            bindData="@{viewModel.tmpList}"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
    </FrameLayout>

 

이 후 ViewPager2를 사용하는 프래그먼트 내에서 "TabLayoutMediator"를 사용.

 

• In SwipeViewFragment
  
  

          TabLayoutMediator(binding.tabLayout, binding.viewPager) {tab, position ->
              tab.text = "OBJECT ${position+1}"
          }.attach()​

  
  - TabLayoutMediator 의 인자로 
  
  1. Tab Layout
  2. ViewPager2
  
  를 넘겨준다.
  
  - attach() 를 통해 실제 UI에 TAB LAYOUT을 드러낸다.
  
  
  

※ 만약 페이지 수가 많거나 무한할 수 있는 경우 Tab Layout에 android:tabmode 속성을 추가하여 스크롤이 가능하게 설정할 수 있다.

 

 

코드

 

https://github.com/ranseo/ViewPager2.git

GitHub - ranseo/ViewPager2: Learn ViewPager2 & TabLayout