TabLayout과 Pager

TabLayout

TabLayout을 사용하기 위해서는 아래 문장을 implementation 해야한다.

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

 

XML 파일에 tablayout을 그린다.

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

 

activity에서 tablayout을 바인딩한 후 tab을 추가한다.

private lateinit var binding: ActivityTabPagerBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTabPagerBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.tabLayout.addTab(binding.tabLayout.newTab().setText("ONE"))
        binding.tabLayout.addTab(binding.tabLayout.newTab().setText("TWO"))
        binding.tabLayout.addTab(binding.tabLayout.newTab().setText("THREE"))
    }

 

 

Pager

tab에 맞는 페이지를 보여주기 위해 pager를 사용한다.

 

구현 방법은

1. Adapter 클래스를 만든다. 이때 두가지 방식이 있는데

   1-1. fragment를 호출하는 방식인 FragmentStatePagerAdater를 상속받는 방식과

   1-2. layout을 호출하는 방식인 PagerAdapter를 상속받는 방식이 있다.

2. 탭이 클릭됐을 때 페이지가 이동하도록 구현한다.

3. 페이지가 이동했을 때 탭을 이동시키도록 구현한다.

 

1. Adapter 클래스 구현

1-1. FragmentStatepagerAdapter 상속 방식

getItem에서 fragement를 return하는 방식이다.

getCount에서 return하는 tabCount는 인자로 받는 탭의 개수이다.

class ThreePagerAdapter(
    fragmentManager: FragmentManager,
    val tabCount : Int
) : FragmentStatePagerAdapter(fragmentManager) {
    override fun getItem(position: Int): Fragment {
        return when (position){
            0 -> Fragment1()
            1 -> Fragment2()
            2 -> Fragment3()
            else -> Fragment1()
        }
    }

    override fun getCount(): Int {
        return tabCount
    }
}

onCreate()에서 adapter를 만들고 viewPager에 할당한다.

        val adapter = ThreePagerAdapter(supportFragmentManager, 3)
        binding.viewPager.adapter = adapter

 

1-2. PagerAdapter 상속 방식

instantiateItem에서 각 position에 맞게 layout을 추가하여 view를 return한다.

destroyItem은 다른 뷰로 바뀔 때 현재 뷰를 container에서 떼주는 함수이다.

isViewFromObject은 화면의 뷰가 원하는 뷰가 맞는지 확인하는 함수이다.

class ThreePagerAdapter(
    val layoutInflater: LayoutInflater
) : PagerAdapter() {
    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        when(position){
            0 -> {
                val view = layoutInflater.inflate(R.layout.fragment_test1, container, false)
                container.addView(view)
                return view
            }

            1 -> {
                val view = layoutInflater.inflate(R.layout.fragment_test2, container, false)
                container.addView(view)
                return view
            }

            2 -> {
                val view = layoutInflater.inflate(R.layout.fragment_test3, container, false)
                container.addView(view)
                return view
            }

            else -> {
                val view = layoutInflater.inflate(R.layout.fragment_test1, 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
    }
}

마찬가지로 onCreate()에서 adapter를 만들고 viewPager에 할당한다.

        val adapter = ThreePagerAdapter(LayoutInflater.from(this@TabPagerActivity))
        binding.viewPager.adapter = adapter

 

2. 탭이 클릭됐을 때 페이지 이동

탭이 클릭됐을 때 탭에 맞는 페이지로 이동시키기 위해 addOnTabSelectiedListener를 구현한다.

binding.tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener  {

            override fun onTabReselected(tab: TabLayout.Tab?) {
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                // 탭이 클릭됐을 때
                binding.viewPager.currentItem = tab!!.position
            }
        })

 

3. 페이지가 이동했을 때 탭 이동

페이지가 이동했을 때 이에 맞는 탭으로 같이 연동되어 이동한다.

이를 구현하기 위해 addOnPageChangeListener를 이용한다.

binding.viewPager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(binding.tabLayout))