[Kotlin] ViewPager2 사용법

ViewPager2

안드로이드에서 슬라이드 페이징 전환을 하는 방법이 있습니다.

 

바로 ViewPager입니다.

 

하지만 기존 ViewPager에서는 알게모르게 버그가 많고 사용하기가 까다로워 구글에서 기능을 향상한 ViewPager2를 출시하게 되었습니다.

 

https://developer.android.com/jetpack/androidx/releases/viewpager2?hl=ko

ViewPager2  |  Android 개발자  |  Android Developers

 

ViewPager2로 이전하게 되면 얻는 이점을 보면,

 

1. 세로방향 페이징 지원
2. 오른쪽에서 왼쪽 지원(RTL) 지원
3. 수정 가능한 프래그먼트 컬렉션
4. DiffUtil

이렇게 4가지를 제시 했습니다.

 

1. 기존에 가로방향으로만 페이징을 지원했다면, ViewPager2 에서는 세로로 페이징을 지원합니다.
2. 흔히 RTL이라고 하는 아랍어와 같은 언어에서 언어를 읽고 쓰는 방향에 따라 화면이 좌우 반전되는 기능입니다.
3. 수정 가능한 프래그먼트 컬렉션을 통해 페이징을 지원하고, 컬렉션이 변경되면 notifyDatasetChanged()를 호출하여 UI를 업데이트 할 수 있습니다.
4. ViewPager2는 RecyclerView를 기반으로 빌드되므로 DiffUtil클래스에 액세스가 가능합니다.

 

저는 개인적으로 4번 내용이 가장 마음에 듭니다.

기존에 ViewPager는 개인적으로 사용하기에 엄청 불편했었어요.

하지만 RecyclerView를 기반으로 빌드가 되기때문에 사용방법 또한 RecyclerView와 거의 동일합니다.

그래서 따로 공부비용이 발생하지 않는다고 생각합니다.(RecyclerView를 접해보지 않은 분은 어려울수도 있어요.)

좀 더 자세한 내용은 위 링크를 참고하시길 바랍니다 :)

 

 

 

사용방법

기본적으로 ViewPager2는 AndroidX라이브러리에 포함되어 있습니다.

제가 적용한 사례입니다.

 

activity_image_viewer.xml

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

 

저는 이미지 확대 페이지를 만들기 위해서 ViewPager를 하나 추가해 주었어요.

그리고 RecyclerView 형태로 사용하기 때문에 ItemView가 될 XML을 추가해줍니다.

 

item_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="10dp"
android:orientation="vertical">

<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/photoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:srcCompat="@android:mipmap/sym_def_app_icon" />

</LinearLayout>

 

제가 사용한 뷰는 PhotoView라는 ImageView를 확장한 라이브러리입니다.

혹시 필요하신분은 아래 링크를 참조하시면 됩니다.

https://github.com/chrisbanes/PhotoView

chrisbanes/PhotoView

 

 

ViewPagerAdapter.kt

class ViewPagerAdapter(private val mList: ArrayList<Bitmap>):          RecyclerView.Adapter<ImageViewPagerAdapter.PagerViewHolder>() {

  override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerViewHolder =
  PagerViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false))

  override fun getItemCount(): Int = mList.size

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

  inner class PagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    private val photoView = itemView.find<PhotoView>(R.id.photoView)

    fun bind(image: Bitmap) {
        photoView.imageBitmap = image //anko 라이브러리 사용
     }
  }
}

RecyclerView 기반이니 당연히 Adapter가 필요합니다.

사용방법은 거의 동일합니다.

 

 

마지막으로

mViewPager.adapter = ViewPagerAdapter(mImageArrayList)
mViewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL

어댑터 연결만 해주시면 됩니다.

세로방향으로 페이징을 하고 싶으시면 ORIENTATION_VERTICAL로 바꿔주시면 됩니다.

 

이상 ViewPager2에 대해 알아보았습니다.

ViewPager 또한 Fragment를 사용한 페이징이 가능합니다만 다음에 알아보겠습니다 :)