[Android] 안드로이드 뷰 페이저2(ViewPager2)+탭 레이아웃(TabLayout) 예제를 통한 사용법

이번에는 사용하면 아주 편리한 뷰 페이저 2와 탭 레이아웃 사용법을 알아보겠다.

# 뷰 페이저(ViewPager), 탭 레이아웃(TabLayout)이란?

카카오톡 뷰 메뉴로 예를 들자면 옆으로 스와이프를 해서 다음 화면을 보는 것을 뷰 페이저라고 한다.

My뷰,발견,코로나19,잔여백신,카카오TV 상단 Tab 버튼이 탭 레이아웃이다.

 

 

# 사용법

이번 예제에서는 아래 와 같은 예제를 만들어 보겠다.

보면 정말 간단하다 카카오톡과 같이 탭의 이름을 설정해주고, 스와이프를 해서 탭 레이아웃과 같이 넘어가도록 구현해보겠다.

## 의존성 추가

우선 이번 예제에서는 뷰 바인딩도 사용할 것이기 때문에 같이 추가해준다.

혹시 뷰 바인딩을 모르는 분이 있다면 여기를 눌러 공부하는 것을 추천한다.

android {
	...
    buildFeatures {
        viewBinding true
    }
}

dependencies {
	...
    // 뷰페이저 2
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

## 레이아웃 생성

탭 레이아웃과 뷰 페이저를 추가해준다.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity">
<LinearLayout
    android:id="@+id/main_linear"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tab_layout"
    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:background="#B2EBF2"
        android:text="My뷰"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="발견"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="코로나19"/>
    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="잔여백신"/>
</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>
</FrameLayout>

탭 레이아웃 같은 경우에는 크게 TabLayout가 TabItem을 감싸는 형식이다.

이번 예제에서는 TabItem에서 text를 굳이 안 적어도 되는데 미리 보기 화면 때문에 적어줬다. 적어도 상관이 없다.

그리고 뷰 페이저는 리사이클러뷰랑 비슷하게 생성해주면 된다.

## 프래그먼트 생성

 

이름은 자유롭게 하고, 사용할 프래그먼트를 4개 생성한다.

프래그먼트 xml은 TextView 한 개와 전체 Background 색깔만 바꿔줬다.

예시로 Fragment1.kt, fragment1.xml 하나만 보여주겠다. 나머지는 다 똑같다.

package com.example.viewpager_tablayout_ex.fragment

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.example.viewpager_tablayout_ex.R

class Fragment1 : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {

        return inflater.inflate(R.layout.fragment_1, container, false)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.Fragment1"
    android:background="#FFDFD7">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:gravity="center"
        android:text="My뷰 페이지" />

</FrameLayout>

## 어댑터 생성

package com.example.viewpager_tablayout_ex.adapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.viewpager_tablayout_ex.fragment.Fragment1
import com.example.viewpager_tablayout_ex.fragment.Fragment2
import com.example.viewpager_tablayout_ex.fragment.Fragment3
import com.example.viewpager_tablayout_ex.fragment.Fragment4

class PagerAdapter(fragment : FragmentActivity) : FragmentStateAdapter(fragment){
    private val NUM_PAGES = 4 // 페이지 수를 정해 놓는다

    override fun getItemCount(): Int = NUM_PAGES // 페이지 수를 리턴한다

    override fun createFragment(position: Int): Fragment {
       // 페이지 포지션에 따라 그에 맞는 프래그먼트 보여줌
        return when(position){
            0 -> Fragment1()
            1 -> Fragment2()
            2 -> Fragment3()
            else -> Fragment4()
        }
    }
}

FragmentStateAdapter를 페이저 어댑터를 생성해준다.

override란 getItemCount는 페이지의 수를 리턴하고,

createFragment는 페이지 포지션에 따라 그에 맞는 프래그먼트를 보여준다.

## 메인 액티비티 적용

package com.example.viewpager_tablayout_ex.activity

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.viewpager_tablayout_ex.R
import com.example.viewpager_tablayout_ex.adapter.PagerAdapter
import com.example.viewpager_tablayout_ex.databinding.ActivityMainBinding
import com.example.viewpager_tablayout_ex.fragment.Fragment1
import com.example.viewpager_tablayout_ex.fragment.Fragment2
import com.example.viewpager_tablayout_ex.fragment.Fragment3
import com.example.viewpager_tablayout_ex.fragment.Fragment4
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

class MainActivity : AppCompatActivity() {
    private lateinit var binding : ActivityMainBinding
    private lateinit var pagerAdapter: PagerAdapter
    // 메뉴에 들어갈 이름 (순서대로)
    private val tabTextList = arrayListOf("My뷰", "발견", "코로나19", "잔여백신")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        pagerAdapter = PagerAdapter(this)
        binding.apply {
            viewpager.adapter = pagerAdapter
            
            // 뷰페이저와 탭레이아웃을 붙인다.
            TabLayoutMediator(tabLayout,viewpager){tab, position ->
                tab.text = tabTextList[position]
            }.attach()
        }
    }
}

코드를 보면 알겠지만 엄청 간단하다. 

메뉴에 들어갈 이름을 리스트로 선언 후 넣어주고, TabLayoutMediator을 이용해 뷰 페이저와 탭 레이아웃을 이어 붙이면 끝이다.

 

깃허브 링크 https://github.com/JiSeokYeom/viewpager_tablayout_ex

GitHub - JiSeokYeom/viewpager_tablayout_ex

참고 자료
https://hanyeop.tistory.com/196
https://todaycode.tistory.com/26