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