[Kotlin Android] ViewPager2로 이미지 슬라이더를 만들어볼까요?

구현 결과

ViewPager2란?

ViewPager는 무엇인가요?

우선 말 그대로 해석해볼까요?

ViewPager = View + Pager
View를 Paging하는 매개체

즉, 우리가 사용하는 View를 슬라이드쇼처럼 넘기게 할 수 있는 페이징 툴이라고 생각할 수 있겠네요!
ViewPager의 자세한 사용방법은 아래 링크를 통해 확인하시면 됩니다.

ViewPager2와 ViewPager

ViewPager2는 AndroidX가 발표된 이후 새롭게 나온 ViewPager로 안드로이드 공식 문서에서도 아래와 같은 이유로 ViewPager보다 ViewPager2를 활용하여 페이징하는 것을 권장하고 있습니다.

• Horizontal Paging에서 Vertical Paging도 지원 가능(orientation 속성 활용)
• RTl(Right To Left) 페이징 지원(layoutDirection 속성 활용)
• notifyDatasetChanged로 Mutable Fragment Collection을 활용하여 동적 페이징 구현

그렇다면 ViewPager2를 활용하여 어떻게 슬라이더를 만들 수 있을까요?

ViewPager2로 이미지 슬라이더 만들기

1. 우선 ViewPager2에 담길 Fragment부터

fragment_image_silde.xml

<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=".ui.ImageSlideFragment">

    <ImageView
        android:id="@+id/img_slide_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        android:src="@drawable/nomad_image"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

다음과 같이 이미지가 들어갈 수 있는 프래그먼트를 준비합니다

2. ImageSlideFragment가 생성될 때 이미지가 부착되도록 할까요

ImageSlideFragment.kt

class ImageSlideFragment(val image : Int) : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        img_slide_image.setImageResource(image)
    }
}

생성자에서 이미지의 id 값을 받아오고 이를 뷰 내부의 이미지 src 값을 설정합니다

3. ScreenSlidePagerAdapter를 구현합니다

이제 ViewPager2를 부착한 Activity에 FragmentStateAdapter를 구현한 ScreenSliderPagerAdapter를 구현하여 프래그먼트를 생성시키고 페이징 시킬 수 있게 합니다.

MainActivity.kt

private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = NUM_PAGES

        override fun createFragment(position: Int): Fragment {
            return when(position) {
                0 -> ImageSlideFragment(R.drawable.hashtag_image)
                1 -> ImageSlideFragment(R.drawable.nomad_image)
                else -> ImageSlideFragment(R.drawable.record_image)
            }
        }
    }

• getItemCount: ViewPager2에서 생성해야될 Fragment의 갯수를 반환합니다. 여기서 ViewPager2의 페이지 갯수가 결정됩니다
• createFragment: ViewPager2에서 각 position에 맞게 Fragment를 생성하고 이를 ViewPager2의 새 페이지로 제공합니다

4. ViewPager2에 Adapter를 연결합니다

MainActivity.kt

vp_slider = findViewById(R.id.vp_scroll_tutorial)

val pagerAdapter = ScreenSlidePagerAdapter(this)
vp_slider.adapter = pagerAdapter