Tablayout, Pager

Tablayout

tab을 담당하는 역할

Pager

종이 넘기듯이 화면을 넘기는 역할

Adapter

tablayout 과 pager 를 연결해주는 역할

 

사용방법

tablayout을 만들기 위해 build.gradle 에 implementation 추가

implementation 'com.google.android.material:material:1.1.0'

xml에 tablayout과 viewpager 만들기

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context=".TabPagerActivity">
    
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        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="wrap_content" />
        
</LinearLayout>

 

어댑터 생성

class ThreePageAdpater(
    val layoutInflater: LayoutInflater
) : PagerAdapter() {
    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view === `object` as View
    }

    override fun getCount(): Int {
        return 3
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        when (position) {
            0 -> {
                val view = layoutInflater.inflate(R.layout.fragment_one, container, false)
                container.addView(view)
                return view
            }
            1 -> {
                val view = layoutInflater.inflate(R.layout.fragment_two, container, false)
                container.addView(view)
                return view
            }
            2 -> {
                val view = layoutInflater.inflate(R.layout.fragment_three, container, false)
                container.addView(view)
                return view
            }
            else -> {
                val view = layoutInflater.inflate(R.layout.fragment_one, container, false)
                container.addView(view)
                return view
            }
        }
    }
}

어댑터 설정 페이저랑 연결 

val adapter = ThreePageAdpater(LayoutInflater.from(this@TabPager2))
view_pager.adapter = adapter
view_pager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tab_layout))

탭 추가

tab_layout.addTab(tab_layout.newTab().setText("One"))
tab_layout.addTab(tab_layout.newTab().setText("Two"))
tab_layout.addTab(tab_layout.newTab().setText("Three"))

 

tab 옵션같은?(페이저랑 같이작동하게)

tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
	override fun onTabReselected(tab: TabLayout.Tab?) {
	}
	override fun onTabUnselected(tab: TabLayout.Tab?) {
	}
	override fun onTabSelected(tab: TabLayout.Tab?) {
	view_pager.currentItem = tab!!.position
	}
})

결과화면

012