12-2 탭 레이아웃 - 탭 버튼 구성

탭 레이아웃

• 탭으로 구성하는 화면에서 탭 버튼을 배치하는 레이아웃이다.
• 탭의 구성과 출력 방법, 탭 스크롤 등을 설정할 수 있다.

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

    </com.google.android.material.tabs.TabLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/tabContent">

    </FrameLayout>

• 유저가 TabLayout으로 구성한 탭 버튼을 선택하면 FrameLayout 위치에 탭의 내용을 출력한다.

        val tabLayout = binding.tabs

        val tab1 : TabLayout.Tab = tabLayout.newTab()
        tab1.text = "Tab1"
        tabLayout.addTab(tab1)

        val tab2 : TabLayout.Tab = tabLayout.newTab()
        tab2.text = "Tab2"
        tabLayout.addTab(tab2)

        val tab3 : TabLayout.Tab = tabLayout.newTab()
        tab3.text = "Tab3"
        tabLayout.addTab(tab3)

• 코드에서는 위와 같이 탭 목록을 추가할 수 있다.
• xml에서 탭 목록을 추가하려면 TabItem 항목을 통해서 추가한다.

---

탭 이벤트 처리

tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener{
            override fun onTabSelected(tab: TabLayout.Tab?) {
                val transaction = supportFragmentManager.beginTransaction()
                when(tab?.text){
                    "Tab1"-> transaction.replace(R.id.tabContent, OneFragment())
                    "Tab2"-> transaction.replace(R.id.tabContent, TwoFragment())
                    "Tab3"-> transaction.replace(R.id.tabContent, ThreeFragment())
                }
                transaction.commit()
            }

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

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

            }


        })

• 탭 이벤트 처리는 tabLayout.addOnTabSelectedListener를 통해서 하며 method를 오버라이드하여 Fragment 를 변경할 수 있다.

• tabGravity속성 : fill(채워서 등분), center(가운데정렬)

• tabMode속성 : fixed(고정), scrollable(스크롤)

---

뷰 페이저 연동하기

• 뷰 페이저를 연동시켜 화면을 스크롤 할때 탭 전환을 할 수 있다.

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

    </com.google.android.material.tabs.TabLayout>
    
    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager">

    </androidx.viewpager2.widget.ViewPager2>

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

• 뷰 페이저 화면이 3개이면 탭 버튼도 동일하게 3개가 나온다.
• TabLayoutMediator를 통해 tab.text 속성을 position에 맞게 지정할 수 있다.