ViewPager2 (RecyclerView 이용)

두리두두·2024년 5월 5일

Android

목록 보기

12/25

🍑 뷰페이저란.

화면을 스와이프해서 슉슉. 넘길 수 있는 기능을 가진 뷰이다
기존에 ViewPager가 있었는데 지원 중단되고 이젠 2로만 사용

🍑 구현방법

사용하는 어답터에 따라 두 가지 구현이 가능하다.

1. RecyclerView.Adpater

리사이클러뷰와 같은 방식으로 작동. 다만 뷰가 리사이클러뷰가 아니라 뷰페이저 타입인 것!
Layout은 똑같고 contents만 다른 화면을 만들 때 유용

2. FragmentStateAdapter

Fragment를 뷰로 사용. 요건 따로 포스팅할 것이다.

🍑 구현(RecyclerView)

1) activity_main.xml

이전 글의 코드와 거의 비슷하다. 메인액티비티 레이아웃에서 사용하는 뷰를 뷰페이저로 바꾼 것!
뷰페이저2 아이디를 viewPager_idol로 설정하고, 수직으로 설정

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

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

</FrameLayout>

2) idol_list_item.xml

뷰페이저에서 재사용하여 쓸 레이아웃
imageView_idol에 아이돌 명수옹 사진을 넣을 것이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="@dimen/pageMargin"
    android:layout_marginRight="@dimen/pageMargin"
    >

    <ImageView
        android:id="@+id/imageView_idol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/idol1" />

</androidx.constraintlayout.widget.ConstraintLayout>

3) MainActivity.kt

viewPagerIdol라는 객체를 ViewPager2 타입으로 선언해두고, activity_main.xml의 뷰페이저2 부분(viewPager_idol)에 어답터를 붙여준다.
어답터 붙일 때 어답터에 ArrayList<Int> 타입의 데이터를 매개변수로 넘겨준다.
viewPagerIdol.orientation 으로 수평 슬라이딩 설정


class MainActivity : AppCompatActivity() {
    lateinit var viewPagerIdol: ViewPager2

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

        viewPagerIdol = findViewById(R.id.viewPager_idol)
        viewPagerIdol.adapter = ViewPagerAdapter(getIdolList()) // 어댑터 생성
        viewPagerIdol.orientation = ViewPager2.ORIENTATION_HORIZONTAL // 방향을 가로


    // 뷰 페이저에 들어갈 아이템
    private fun getIdolList(): ArrayList<Int> {
        return arrayListOf<Int>(R.drawable.idol1, R.drawable.idol2, R.drawable.idol3)
    }
}

4) ViewPagerAdapter.kt

RecyclerView를 상속받고, idolList: ArrayList<Int>를 인자로 받아서 사용
inner clase로 뷰홀더 생성. idol_list_item.xml을 가져다가 이미지뷰를 지정한다. PagerViewHolder라는 객체에는 idol이라는 속성이 있는데 이거슨. 이미지뷰이다. 란 말.
onBindViewHolder에서 홀더라는 이름의 PagerViewHolder 객체에 이미지를 지정해줌. (매개변수로 전달 받은 item이라는 데이터에서 추출)

class ViewPagerAdapter(idolList: ArrayList<Int>) : RecyclerView.Adapter<ViewPagerAdapter.PagerViewHolder>() {
    var item = idolList

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) = PagerViewHolder((parent))

    override fun getItemCount(): Int = item.size

    override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
        holder.idol.setImageResource(item[position])
    }

    inner class PagerViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder
        (LayoutInflater.from(parent.context).inflate(R.layout.idol_list_item, parent, false)){
        val idol: ImageView = itemView.findViewById(R.id.imageView_idol)
        //val idol = itemView.imageView_idol!!
    }
}