코틀린 공부38

탭 레이아웃 – 탭 버튼 구성

 탭 레이아웃은 탭으로 구분하는 화면에서 탭 버튼을 배치하는 레이아웃입니다.

 

탭 레이아웃 등록

<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 
    <com.google.android.material.tabs.TabLayout
		android:id="@+id/tabs" 
        android:layout_width="match_parent"
		android:layout_height="wrap_content" /> 
    <FrameLayout
		android:id="@+id/tabContent" 
        android:layout_width="match_parent"
		android:layout_height="match_parent" /> 
</LinearLayout>

FrameLayout위치에 탭의 내용을 출력합니다.

 

코트에서 탭 버튼정의

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으로도 정의할 수도 있습니다.

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

 

사용자가 탭 버튼을 선택할 때 출력 해야 하는 내용은 코드에서 탭 버튼의 이벤트 핸들러에 명시해야 합니다.

tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
	//탭 버튼을 선택할 때 이벤트 
    override fun onTabSelected(tab: TabLayout.Tab?) {
		val transaction = support FragmentManager.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 on TabReselected (tab: TabLayout.Tab?) { 
    // (... 생략 ...)
    }
	// 다른 탭 버튼을 눌러 선택된 탭 버튼이 해제될 때 이벤트 
    override fun onTabUnselected (tab: TabLayout.Tab?) {
    // (... 생략 ...)
    }
})

 

탭 버튼 정렬하기

 tabGravity는 탭 버튼을 정렬하는 속성입니다. 기본값은 fill이며 탭 버튼을 가롤로 등분하여 배치합니다.

---

스크롤 설정하기

 tabMode 속성은 탭 버튼을 스크롤할 수 있는지를 설정합니다. 기본값은 fixed이며, fixed는 스크롤을 지원하지 않는다 것을 의미합니다. 다른 설정값으로는 scrollable이 있으며, scrollable로 설정하면 탭 버튼이 왼쪽부터 나열되고 모두 출력할 수 없다면 자동으로 가로 스크롤이 생깁니다.

---

뷰 페이저 연동하기

 

탭 레이아웃과 뷰 페이저 등록

<LinearLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:orientation="vertical"> 
	<com.google.android.material.tabs.TabLayout
		android:id="@+id/tabs" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"
		app: tabMode="scrollable"> 
    </com.google.android material.tabs.TabLayout> 
    <androidx.viewpager2.widget.ViewPager2
		android:id="@+id/viewpager" 
        android:layout_width="match_parent"
		android:layout_height="match_parent" /> 
</LinearLayout>

TabLayout과 ViewPager2를 등록한 후 코드에서 TabLayoutMediator를 이용해 둘을 연동하면 됩니다.

 

탭 레이아웃과 뷰 페이저 연동

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

---