[Android/개념] 19. ViewPager & TabLayout

 

---

ViewPager & TabLayout

1. ViewPager

• 화면을 가로로 넘겨 전환할 수 있게 하는 뷰

     - 손가락을 가로로 스와이프하여 화면을 넘길 수 있다.

     - 탭을 만들어 이동하고 싶은 탭을 누르면 해당 화면으로 이동하게 할 수 있다.

화면을 가로로 넘겨 전환하는 ViewPager

 

2. TabLayout

• 탭을 가로로 표시하는 레이아웃

Tab을 가로로 나열하여 선택할 수 있게 한다.

 

3. ViewPager + TabLayout

• 같이 사용하는 경우가 많다.

• Adapter로 연결

     * Adapter : 서로 다른 두 개를 연결시켜주는 도구

     1. FragmentStatePagerAdapter

          - Deprecated 됨. -> 더 이상 사용하지 않음.

          - 각 Fragment가 화면들을 구성하여 화면 전환.

          - ViewPager 클래스 사용.

     2. FragmentStateAdapter

          - 각 Fragment가 화면들을 구성하여 화면 전환.

          - ViewPager2 클래스 사용.

     3. PagerAdapter : View나 activity 등으로 화면들을 구성하여 화면 전환.

          - Fragment가 아니여도 된다.

          -> Fragment를 생성하는 일은 비용이 비싼 일이므로 굳이 Fragment를 만들지 않아도 될 때 권장.

 

• activity_view_pager_tab_layout21.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ViewPagerTabLayout_21">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

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

</androidx.appcompat.widget.LinearLayoutCompat>

 

• ViewPagerTabLayout_21.kt

package com.example.fastcampus

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout

class ViewPagerTabLayout_21 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_view_pager_tab_layout21)

        val viewPager = findViewById<ViewPager2>(R.id.viewPager2)
        val tabLayout = findViewById<TabLayout>(R.id.tabLayout)

        // Tab Layout에 Tab 추가
        tabLayout.addTab(tabLayout.newTab().setText("Tab 1"))
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"))
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3"))

        // Pager에 adapter 장착
        viewPager.adapter = MyFragmentStateAdapter(this, 3)

        // Tab Layout에 선택 리스너 장착
        tabLayout.addOnTabSelectedListener(object: TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab?) {
                viewPager.setCurrentItem(tab!!.position) // ViewPager와 Tab 연결
            }

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

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

class MyFragmentStateAdapter(fragmentActivity: FragmentActivity, val tabCount: Int): FragmentStateAdapter(fragmentActivity) {
    override fun getItemCount(): Int {
        return tabCount // Tab 개수
    }

    override fun createFragment(position: Int): Fragment {
        return when(position) { // Tab에 따라 Fragment 생성
            0 -> Page1()
            1 -> Page2()
            else -> Page3()
        }
    }
}

 

• 결과

누르는 Tab에 따라 바뀌는 Page 화면 전환

 

 

 

 

 

 

 

 

이 글은

패스트 캠퍼스 Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online

강의를 듣고 공부한 내용을 바탕으로 작성되었습니다.

 

---