[android : kotlin] 코틀린 뷰페이저2(ViewPager2) 사용 예제 (RecyclerView.Adapter)

뷰페이저2(ViewPager2)는 스크린 화면을 좌우로 스와이프(swipe)를 통해 컨텐츠 전환을 할 수 있는 컨테이너 이다. 뷰페이저(ViewPager2)는 데이터를 페이지 단위로 표시한다. 뷰페이저는 뷰그룹(ViewGroup)으로 부터 상속된다. 뷰페이저1과 다르게 페이저어댑터(PagerAdatper)를 사용하지않는다. 리사이클러뷰어댑터(RecyclerView.Adapter)를 사용하여 뷰페이저를 생성한다. RecyclerView와 사용법이 동일하다. registerOnPageChangeCallback()를 사용하여 뷰가 전환될 때 이벤트 처리를 할 수 있다.

뷰페이저2를 사용하려면 build.gradle(:app)파일에 라이브러리를 추가해주어야한다.

implementation ‘androidx.viewpager2:viewpager2:1.0.0’

제일 먼저 페이지로 사용할 레이아웃을 추가하자.

레이아웃 추가는 안드로이드 스튜디오 UI를 통해서 해도 되며, 직접 xml를 작성하여도 된다.

왼쪽 Project탭에서 res폴더를 클릭 후 마우스 오른쪽 버튼을 눌러 NEW > Android Resource File 를 클릭한다.

리소스 타입으로 Layout를 선택하고, 레이아웃File name를 타이핑 후 OK버튼을 클릭하면 res/layout/폴더에 추가가 된다.

[pager_layout1.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Page1"
        android:textAppearance="@style/TextAppearance.AppCompat.Display4" />
</LinearLayout>

[MainActivity.kt]

package edu.kotlin.study

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.*
import android.widget.AdapterView
import android.widget.ArrayAdapter
import android.widget.TextView
import androidx.annotation.ColorRes
import androidx.core.content.ContextCompat
import androidx.recyclerview.widget.RecyclerView
import androidx.viewpager.widget.PagerAdapter
import androidx.viewpager.widget.ViewPager
import androidx.viewpager2.widget.ViewPager2
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val bgColors: MutableList<Int> = mutableListOf(
        android.R.color.holo_red_light,
        android.R.color.holo_green_light,
        android.R.color.holo_blue_dark
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val mAdapter = CustomPagerAdapter()

        //어댑터 적용
        viewPager1.adapter = mAdapter

        //가로 방향 스크롤링
        //viewPager1.orientation = ViewPager2.ORIENTATION_HORIZONTAL

        button1.setOnClickListener {
            val newBgColor = intArrayOf(
                android.R.color.darker_gray,
                android.R.color.holo_green_dark,
                android.R.color.holo_orange_dark
            ).random()
            bgColors.add(newBgColor)

            //세로 방향 스크롤링
            viewPager1.orientation = ViewPager2.ORIENTATION_VERTICAL

            //데이터가 변경되었음을 어댑터에 알림
            viewPager1.adapter?.notifyDataSetChanged()
        }


        viewPager1.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {

                textView1.text = "$position 페이지"
                super.onPageSelected(position)
            }
        })


    }

    inner class CustomPagerAdapter : RecyclerView.Adapter<CustomPagerAdapter.MyPagerViewHolder>() {
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyPagerViewHolder {
            val view =
                LayoutInflater.from(parent.context).inflate(R.layout.pager_layout1, parent, false)
            return MyPagerViewHolder(view)
        }

        override fun onBindViewHolder(holder: MyPagerViewHolder, position: Int) {
            holder.bind(bgColors[position], position)
        }

        override fun getItemCount(): Int {
            return bgColors.size
        }

        inner class MyPagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
            private val textView1: TextView = itemView.findViewById<TextView>(R.id.textView)

            fun bind(@ColorRes bgColor: Int, position: Int) {
                textView1.text = "어댑터 : $position 페이지"
                itemView.setBackgroundColor(ContextCompat.getColor(itemView.context, bgColor))
            }

        }

    }

}

[activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="텍스트뷰"
    android:textAppearance="@style/TextAppearance.AppCompat.Display2" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="스크롤 세로 방향 전환" />

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

</LinearLayout>

[build.gradle(:app)]

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 29

    defaultConfig {
        applicationId "edu.kotlin.study"
        minSdkVersion 22
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

}

[REFERENCE]

ViewPager2 Releases – Android Developers

ViewPager2 Reference – Android Developers