TabLayout, Pager

Pager

화면을 밀어서 페이지 넘기듯 넘길 수 있도록 해준다.

각 페이지는 fragment로 구성되는데, Pager안에서 드로우 이벤트에 따라 fragment가 보여지도록 동작한다.

 

 

TabLayout

상/하단 tab을 담당한다. 각 탭을 Pager가 담고있는 fragment와 연결한다.

연결은 두 가지 경우를 각각 해주어야 한다.

1. Pager 조작에 따라 tab이 선택되도록

2. tab 선택에 따라 Pager가 보여주는 fragment가 선택되도록

 

 

 

Adapter

보통 Page와 Tab을 연결해서 tab을 클릭하면 지정된 page로 이동하도록 한다.

이를 연결해주는 역할이 adapter

 

 

1. TabLayout을 사용하기 위해 build.gradle(module)에 아래 패키지를 추가한다.

   dependencies { 	... 	implementation 'com.google.android.material:material:1.1.0' }

2. view.xml에 tab이 되는 <com.google.android.material.tabs.TabLayout>와Pager가 되는 <androidx.viewpager.widget.ViewPager> 컴포넌트를 배치한다.

   <LinearLayout 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=".TabPager2Activity"     android:orientation="vertical">      <com.google.android.material.tabs.TabLayout         android:id="@+id/tab_layout2"         android:layout_width="match_parent"         android:layout_height="wrap_content"         />      <androidx.viewpager.widget.ViewPager         android:id="@+id/view_pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         />  </LinearLayout>

3. (tab, pager의 속성과 이를 담는 상위 컴포넌트 Layout의 속성을 주의한다.)

3. 코드 상에서 TabLayout에 원하는 tab들을 배치하고, pager 객체를 변수에 할당한다.

   val tabLayout = findViewById<TabLayout>(R.id.tab_layout2) 	tabLayout.addTab(tabLayout.newTab().setText("one")) 	tabLayout.addTab(tabLayout.newTab().setText("two")) 	tabLayout.addTab(tabLayout.newTab().setText("three"))  val viewPager = findViewById<ViewPager>(R.id.view_pager)

4. PagerAdapter를 구현한다.

   class ThreePageAdapter(     val layoutInflater: LayoutInflater ): PagerAdapter() {  	// 선택되는 position에 따라 fragment가 선택되도록 한다. 	// 원하는 fragment는 각각 구현해놓는다.     override fun instantiateItem(container: ViewGroup, position: Int): Any {         when(position) {             0 -> {                 val view = layoutInflater.inflate(R.layout.fragment1, container, false)                 container.addView(view)                 return view             }             1 -> {                 val view = layoutInflater.inflate(R.layout.fragment2, container, false)                 container.addView(view)                 return view             }             2 -> {                 val view = layoutInflater.inflate(R.layout.fragment3, container, false)                 container.addView(view)                 return view             }             else -> {                 val view = layoutInflater.inflate(R.layout.fragment3, container, false)                 container.addView(view)                 return view             }          }     }      override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {         container.removeView(`object` as View)     }      override fun isViewFromObject(view: View, `object`: Any): Boolean {         return view === `object` as View     }      override fun getCount(): Int {         return 3     } }

5. PagerAdapter 인스턴스를 생성한다.Pager 조작에 따라 tab이 선택되도록 하기위해 viewPager 컴포넌트에 생성한 PagerAdapter 인스턴스를 삽입하고 viewPager에 TabLayoutOnPageChangeListener 를 삽입한다.
6. // 인스턴스 생성 val pagerAdapter = ThreePageAdapter(LayoutInflater.from(this@TabPager2Activity)) // 인스턴스 주입 viewPager.adapter = pagerAdapter // 리스너 주입 viewPager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))

6. tab 선택에 따라 Pager가 조작되기 위해 tabLayout 컴포넌트에 addOnTabSelectedListener() 메서드로 리스너를 삽입한다.

tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{             override fun onTabReselected(tab: TabLayout.Tab?) {              }              override fun onTabUnselected(tab: TabLayout.Tab?) {              }              override fun onTabSelected(tab: TabLayout.Tab?) {                 viewPager.setCurrentItem(tab!!.position)             }         })

 

 

Uploaded by Notion2Tistory v1.1.0