[Android] ViewPager2

강승구·2023년 1월 2일

ViewPager는 좌우 스크롤을 통해 화면을 넘겨볼 수 있는 기능을 제공해준다.

부분 화면 여러 개를 변환하여 보여주기 때문에 Fragment를 사용하여 구현하며, 여러 개 중 하나를 선택하는 형태의 위젯이므로 ListView와 같이 Adapter를 사용하여 데이터를 분배해 주어야 한다.

ViewPager와 ViewPager2의 차이점

ViewPager2는 가로페이징 뿐만 아니라 세로 페이징까지 제공한다.

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:orientation="vertical" />

ViewPager2는 오른쪽에서 왼쪽(RTL) 페이징을 지원한다.

<androidx.viewpager2.widget.ViewPager2
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layoutDirection="rtl" />

수정 가능한 Fragment 컬렉션을 통해 페이징을 지원하며 기본 컬렉션이 변경되면 notifyDatasetChanged()를 호출하여 UI를 업데이트한다.
ViewPager2는 RecyclerView를 기반으로 빌드되기 때문에 DiffUtil 클래스에 엑세스하여 데이터세트 변경 애니메이션 등을 활용할 수 있다.

사용법

1. dependency 추가

module수준의 gradle 파일에서 dependency를 추가해준다.

implementation 'androidx.viewpager2:viewpager2:1.0.0'

2. MainLayout 구성

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

3. Fragment 생성

FirstFragment.kt

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.androidessential_viewpager2.databinding.FragmentFirstBinding
import com.example.androidessential_viewpager2.databinding.FragmentSecondBinding
import com.example.androidessential_viewpager2.databinding.FragmentThirdBinding

class FirstFragment : Fragment() {
    private var _binding: FragmentFirstBinding? = null
    private val binding get() = _binding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View? {
        _binding = FragmentFirstBinding.inflate(inflater, container, false)
        return binding.root
    }

}

fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#80FF0000"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Fragment1"
        android:textColor="@color/white"
        android:textSize="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4. Adapter 클래스 생성

ViewPager2Adapter.kt

package com.example.androidessential_viewpager2

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewPager2Adapter(fragmentActivity: FragmentActivity): FragmentStateAdapter(fragmentActivity){
    var fragments: ArrayList<Fragment> = ArrayList()
    override fun getItemCount(): Int {
        return fragments.size
    }

    override fun createFragment(position: Int): Fragment {
        return fragments[position]
    }

    fun addFragment(fragment: Fragment){
        fragments.add(fragment)
        notifyItemInserted(fragments.size-1)
    }
    fun removeFragment(){
        fragments.removeLast()
        notifyItemRemoved(fragments.size)
    }
}

5. ViewPager2와 Adapter 연결

MainActivity.kt

package com.example.androidessential_viewpager2

import FirstFragment
import SecondFragment
import ThirdFragment
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.viewpager.widget.ViewPager
import androidx.viewpager2.widget.ViewPager2
import com.example.androidessential_viewpager2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        var viewPager2Adapter = ViewPager2Adapter(this)

        viewPager2Adapter.addFragment(FirstFragment())
        viewPager2Adapter.addFragment(SecondFragment())
        viewPager2Adapter.addFragment(ThirdFragment())

        binding.viewpager.apply {
            adapter = viewPager2Adapter
            registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback(){
                override fun onPageSelected(position: Int) {
                    super.onPageSelected(position)
                }
            })
        }
    }
}