[안드로이드/AppBar] TabLayout

Android

[안드로이드/AppBar] TabLayout

gangmini 2023. 4. 28. 19:46

TabLayout

AppBar Layout에 TabBar Layout 과 ViewPager를 통해 탭을 구성
탭이 좌우로 스크롤 가능하고 뷰페이저 부분을 좌우로 스크롤해도 탭이 함께 스크롤됨
안드로이드는 탭 구성에 진심이기 때문에 잘 알아둬서 효율적으로 사용하면 좋을듯 (버전업 되는지도 잘 살펴보자!)

class MainActivity : FragmentActivity() {

    private lateinit var binding:ActivityMainBinding

    val fragList = ArrayList<Fragment>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater) // 뷰바인딩 객체
        val view = binding.root //뷰바인딩을 통해 레이아웃과 뷰가 결합 -> .root 를 통해 View 객체만를 뽑아내는(?)
        setContentView(view)

        setActionBar(binding.toolbar)

        binding.toolbar.setTitleTextColor(Color.WHITE)
        binding.tabs.setTabTextColors(Color.BLACK, Color.RED) //선택전, 선택후 색상

        for (i in 0..9) {
            val sub = Firstfragment("${i}번째 프래그먼트")
            fragList.add(sub)
        }

        val adapter1 = object : FragmentStateAdapter(this) {
            override fun getItemCount(): Int {
                return fragList.size
            }

            override fun createFragment(position: Int): Fragment {
                return fragList[position]
            }
        }
        binding.pager.adapter = adapter1

        //탭과 뷰페이저를 연결
        TabLayoutMediator(binding.tabs, binding.pager) {tab, position ->
            tab.text = "탭 ${position}"
        }.attach()
        
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <Toolbar
            android:id="@+id/toolbar"
            android:layout_height="?attr/actionBarSize"
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll|enterAlways"> <!--안 접으려면 이부분 지우기-->
        </Toolbar>

        <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>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="627dp"
        android:fillViewport="true"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

✔️ 탭과 뷰페이저 연동을 위해 TabLayoutMediator 를 사용하는데 meterial 라이브러리를 추가해줘야 함 -> 기존에 사용하던 meterial 라이브러리를 함께 의존성에 설정하면 링크 에러가 나서 주석처리 해줌