[Kotlin] ViewPager2 사용하기

ViewPager는 RecyclerView adpater를 사용해 상당히 쉽게 구현할 수 있습니다.

이번 포스팅은 ViewPager를 구현해 배열에 저장된 image들을 슬라이드 해보겠습니다.

 

필요한 재료

1. 이미지를 출력할 ViewPager

2. image를 출력할 방법을 표현한 layout

3. 배열에 저장할 image들

4. 배열의 출력을 관리할 RecyclerView

 

재료 구현

1. 이미지를 출력할 ViewPager

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

2. image를 출력할 방법을 표현한 layout

<?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">
    <ImageView
        android:id="@+id/iv_aespa"
        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/giselle"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3. 배열에 저장할 image들

private fun getAespaMembers(): ArrayList<Int> {
    return arrayListOf<Int>(
        R.drawable.giselle,
        R.drawable.karina,
        R.drawable.winter,
        R.drawable.ningning)
}

4. 배열의 출력을 관리할 RecyclerView Adapter

class MyViewPagerAdapter(var aespaMembers: ArrayList<Int>) :
    RecyclerView.Adapter<MyViewPagerAdapter.PagerViewHolder>() {
    

    inner class PagerViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder
        (LayoutInflater.from(parent.context).inflate(R.layout.aespa_list_item, parent, false)) {
        val aespaMember = itemView.findViewById<ImageView>(R.id.iv_aespa)
    }

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

    override fun getItemCount(): Int = aespaMembers.size

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

이전에 포스팅했듯이, viewHolder에 클릭이벤트도 장착할 수도 있죠.

5. 조립

class MainActivity : AppCompatActivity() {

    lateinit var viewPager_aespa: ViewPager2

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

        viewPager_aespa = findViewById(R.id.viewPager_aespa)
        viewPager_aespa.adapter = MyViewPagerAdapter(getAespaMembers()) // 어댑터 생성
        viewPager_aespa.orientation = ViewPager2.ORIENTATION_HORIZONTAL // 방향을 가로로
    }

    // 뷰 페이저에 들어갈 아이템
    private fun getAespaMembers(): ArrayList<Int> {
        return arrayListOf<Int>(
            R.drawable.giselle,
            R.drawable.karina,
            R.drawable.winter,
            R.drawable.ningning)
    }
}

6. 결과

 참 쉽죠?

응용하면 image 대신 Fragment를 슬라이드 할 수도 있습니다.

그건 나중에 포스팅 해보도록 하죠 ㅎ