ViewPager1 프로젝트를 ViewPager2 프로젝트로 변환하기

이번 포스팅에서는 프로젝트 안에 작성된 ViewPager1 모듈을 ViewPager2 모듈로 변환하는 법에 대해 알아보도록 하겠습니다.

안드로이드 라이브러리가 androidx로 바뀌는 과정에서 ViewPager 라이브러리도 업그레이드 해달라는 요구가 꽤 많았습니다. 그래서 구글에서는 ViewPager2 라이브러리를 개발했습니다.

ViewPager2의 특징

구글에서 설명하는 ViewPager2의 [장점]((https://developer.android.com/training/animation/vp2-migration)은 다음과 같습니다.

Vertical scrolling : 세로스크롤
Right-to-left support : 페이지를 오른쪽에서 왼쪽으로 정렬
modifiable Fragment collenctions : 프래그먼트의 변화를 동적으로 반영 가능
DiffUtil : Recyclerview의 DiffUtil을 사용 가능
ViewPager1 라이브러리는 더이상 관리되지 않음

ViewPager2로 변환

여기서는 기존에 ViewPager를 써서 좌우로 스와이프되는 화면 만들기 강의에서 작성했던 ViewPager1 프로젝트를 변환하는 방식으로 구현해 보도록 하겠습니다.

우선은 ViewPager2 라이브러리를 추가합니다.

1
2
3


dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

다음은 xml에서 viewpager 모듈을 viewpager2로 바꾸면서 orientation 이라는 속성도 추가해주는데요 이 때 값을 vertical로 주면 세로로 스크롤할 수 있게 됩니다. 또 인디케이터도 viewpager2에 대응하는 CircleIndicator3로 변경하여 줍니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity">

    <me.relex.circleindicator.CircleIndicator3
        android:id="@+id/indicator"
        android:layout_height="48dp"
        android:layout_width="match_parent"
        app:ci_drawable="@drawable/black_radius"
        app:ci_height="7dp"
        app:ci_width="7dp"
        app:ci_margin="4dp" />

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

</LinearLayout>

다음은 어댑터를 변환하여 줍니다. ViewPager2의 어댑터는 FragementStateAdapter를 상속받습니다. 그리고 getCount라는 함수 이름을 getItemCount로 변경합니다. 마지막으로 getItem 함수이름은 createFragment로 변경합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


class CustomPagerAdapter(fa: FragmentActivity): FragmentStateAdapter(fa) {
    private val PAGENUMBER = 4

    override fun getItemCount(): Int {
        return PAGENUMBER
    }

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> TestFragment.newInstance(R.raw.img00, "test 00")
            1 -> TestFragment.newInstance(R.raw.img01, "test 01")
            2 -> TestFragment.newInstance(R.raw.img02, "test 02")
            3 -> TestFragment.newInstance(R.raw.img03, "test 03")
            else -> TestFragment.newInstance(R.raw.img00, "page00")
        }
    }
}

마지막으로 ViewPager와 어댑터를 다음과 같이 연결하여 줍니다. vpAdapter의 형은 FragmentStateAdapter이고 this로 액티비티를 전달받도록 변경하면 완료입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


class MainActivity : AppCompatActivity() {
    private var vpAdapter: FragmentStateAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        vpAdapter = CustomPagerAdapter(this)
        viewpager.adapter = vpAdapter

        indicator.setViewPager(viewpager)
    }
}

이렇게 해서 ViewPager모듈을 ViewPager2로 전환하는 법에 대해 알아보았습니다.

ViewPager2의 특징

ViewPager2로 변환

GitHub/cliearl