[Android/Kotlin] TabLayout, pager

[모든 포스팅은 개인적 공부를 위해 작성된 글입니다]

<TabLayout>

- tab 담당(ex 카카오톡 하단 메뉴 탭)

 

<Pager>

- 종이 넘기듯이 화면 넘기는(swipe) 역할

- TabLayout과 Pager 연결하기 위해 Adapter 필요

- Pager에 표시되는 리스트는 Fragment로 구성

 

<TabLayout implementation>

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

 

<TabLayout, Pager 생성하기>

- xml

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

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

 

- PagerAdapter

class PagerAdapter(fragmentManager: FragmentManager, private val tabCount: Int): FragmentStatePagerAdapter(fragmentManager){
    override fun getCount(): Int {
        return tabCount
    }

    override fun getItem(position: Int): Fragment {
        when(position){
            0 -> {
                return Fragment1()
            }
            1 -> {
                return Fragment2()
            }
            2 -> {
                return Fragment3()
            }
        }//when
    }

}

 

- onCreate() 내부

val tabLayout: TabLayout = findViewById(R.id.tabLayout)
val viewPager: ViewPager = findViewById(R.id.viewPager)

tabLayout.addTab(tabLayout.newTab().setText("one"))//탭 만들기
tabLayout.addTab(tabLayout.newTab().setText("two"))
tabLayout.addTab(tabLayout.newTab().setText("three"))

val pagerAdapter = PagerAdapter(supportFragmentManager, 3)
viewPager.adapter = pagerAdapter
//여기까지 하는 경우 화면은 swipe 되지만 tab이 바뀌지 않음

tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener{
    override fun onTabSelected(tab: TabLayout.Tab?) {
        viewPager.currentItem = tab!!.position
    }//탭이 클릭된 경우

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

    }

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

    }
})

viewPager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))//페이저로 화면 이동시켰을 때 Tab 변경시켜주는 리스너

 

<위 코드의 문제점>

- 비교적 간단한 View를 보여주기 위해서도 Fragment를 생성해야 함

class ThreePageAdapter(val layoutInflater: LayoutInflater): PagerAdapter(){
    override fun getCount(): Int {
        return super.getCount()
    }

    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view === "object" as View
    }// === -> 주소값이 동일한지 비교

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        super.destroyItem(container, position, `object`)

        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
            }
        }
    }//뷰 그려주는 부분
}

- 위와 같이 Adapter 변경 가능

 

<Fragment에서 Activity의 ViewPager에 접근하여 탭 바꾸기>

val ViewPager = (mainActivity as MainActivity).findViewById<ViewPager>(R.id.viewPager)
viewPager.setCurrentItem(0)