• Home
  • About
    • Zzu-h photo

      Zzu-h

      주니어 Android 개발자입니다.

    • Learn More
    • Email
    • Instagram
    • Tistory
    • Github
  • Posts
    • All Posts
    • All Tags
    • All Categories
  • Projects

Android: TabLayout

30 Mar 2022

Reading time ~1 minute

TabLayout

  • 탭으로 구분하는 화며에서 탭 버튼을 배치하는 레이아웃

기본 Tab 추가하기

  • 기본 탭은 TabLayout의 newTab() 메소드를 통해 객체를 받을 수 있다.
  • 생성된 객체를 TabLayout에 추가하면서 탭을 생성할 수 있다.
    • Example
        val tab1: TabLayout.Tab = tabLayout.newTab()
        tab1.text=”Tab1”
        tabLayout.addTab(tab1)
      
        val tab2: TabLayout.Tab = tabLayout.newTab()
        tab2.text=”Tab2”
        tabLayout.addTab(tab2)
      
  • 위처럼 동적으로 만들 필요가 없다면, xml파일에서 정의할 수 있다.
    • Example
        <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.TabLayout>
      

Tab Event 처리

  • 탭 버튼을 선택할 때 출력해야하는 내용은 이벤트 핸들러에 명시를 해주면서 우리가 원하는 기능을 수행할 수 있다.
     binding.albumContentTb.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener{
       // 탭 버튼을 선택할 때 이벤트
      override fun onTabSelected(tab: TabLayout.Tab?) {
          when(tab?.text){
              "Tab1" -> TODO("Not yet implemented")
              "Tab2" -> TODO("Not yet implemented")
          }
      }
      // 선택된 탭 버튼을 다시 선택할 때 이벤트
      override fun onTabUnselected(tab: TabLayout.Tab?) { TODO("Not yet implemented") }
      // 다른 탭 버튼을 눌러 선택된 탭 버튼이 해제될 때 이벤트
      override fun onTabReselected(tab: TabLayout.Tab?) { TODO("Not yet implemented") }
    })
    

ViewPager 연동하기

앞서 ViewPager에서 TabLayoutMediator에서 정리를 했다.



UMCTabLayoutAndroid Share Tweet +1