[안드로이드/코틀린] 뷰페이저2 + 탭 레이아웃

오늘은 뷰페이저 2와 탭 레이아웃을 이용한 UI를 만들어 볼게요!

1. 그래들에 의존성 추가

implementation 'androidx.viewpager2:viewpager2:1.0.0'

2. xml코드생성

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:ignore="Orientation">
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TabTheme"
            app:tabIndicatorFullWidth="false">

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

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

        </androidx.viewpager2.widget.ViewPager2>

    </LinearLayout>

탭 레이아웃 밑에 뷰페이저 2를 넣어줍니다.

3. style.xml 파일 생성

res -> values -> styles.xml 파일을 생성해 줍니다.
여기에서 뷰페이저2로 탭바 이동시 탭바에서 나타나는 UI 변화를 설정해줍니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="TabTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/white</item>                                <!-- 배경 -->
        <item name="android:textColorPrimary">@android:color/black</item>       <!-- 탭바 선택된 텍스트 -->
        <item name="android:textColorSecondary">@android:color/black</item>     <!-- 탭바 텍스트 -->
        <item name="colorAccent">@color/splash</item>                    <!-- 하단 움직이는 바 색-->
    </style>
</resources>

4. 뷰페이저어댑터 생성

private const val NUM_PAGES = 2
class ViewPagerAdapter (fragment: Fragment) : FragmentStateAdapter(fragment) {
    override fun getItemCount(): Int = NUM_PAGES

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> CardStoreFragment()
            1 -> SunHanFragment()
            else -> CardStoreFragment()
        }
    }
}

5. MainActivity.kt에서 뷰페이저와 탭바 연결

class MainActivity : AppCompatActivity() {

    private lateinit var viewPager: ViewPager2
    private lateinit var tabLayout: TabLayout
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        tabLayout = view.findViewById(R.id.tabLayout)
        viewPager = view.findViewById(R.id.pager)
        
        val adapter = ViewPagerAdapter(this)
        viewPager.adapter = adapter

        val tabLayoutTextArray = arrayOf("탭1","탭2")
        val tabLayoutIconArray = arrayOf(R.drawable.card,R.drawable.sunhan)

        //TablayoutMediator로 탭 레이아웃과 뷰페이저를 연결 한다. 이때 탭 아이템도 같이 생성된다. 
        TabLayoutMediator(tabLayout, viewPager){tab,position->
            tab.text = tabLayoutTextArray[position]
            tab.setIcon(tabLayoutIconArray[position])
        }.attach()


        //탭이 선택되었을 때, 뷰페이저가 같이 변경되도록
        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?) {

            }

        })
    }
}