Android/Kotlin

안드로이드 ViewPager2

easy-1 2021. 10. 23. 11:22

<개요>

좌우로 페이지를 넘기는 형식으로 사용되며 앱 소개 페이지, 배너 등에서 자주 사용됨.

ViewPager2에서는 기존 ViewPager 와는 다르게 RecyclerView를 기반으로 빌드됨.


<적용방법>

1. gradle.build 파일에 AndroidX 종속 항목을 추가

dependencies {
    implementation("androidx.viewpager2:viewpager2:1.0.0")
}

2. ViewPager2 레이아웃에 추가

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. Adapter 설정

class ViewPagerAdapter(private val items: ArrayList<RequestInfo>) :
    RecyclerView.Adapter<MainRequestAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val binding = ItemRequestBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return ViewHolder(binding)
    }

    override fun getItemCount(): Int = items.size

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

    class ViewHolder(val binding: ItemRequestBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(info: RequestInfo) {
            binding.model = info
        }
    }

}

4. Adapter Item 레이아웃 설정

- Model 데이터 바인딩 적용

- bind_text 를 이용하여 데이터 설정

- item 의 기본 레이아웃 height는 match_parent로 적용해야됨

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="model"
            type="com.android.sample.model.RequestInfo" />
    </data>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

            <TextView
                android:id="@+id/contentTv"
                bind_text="@{model.content}"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
    </FrameLayout>
</layout>

5. DatabindingUtils 클래스 설정

object DatabindingUtils {

    @BindingAdapter("bind_text")
    @JvmStatic
    fun bindText(tv: TextView, content: String) {
        tv.text = content
    }
}

6. Model data class 설정

data class RequestInfo(
    var content: String? = "",
)

7. Activity 에서 Viewpager2 와 Adapter 연결

- LiveData 형태의 list 를 사용하여 value 값을 가져와 리스트 형태를 어뎁터에 넘김

    fun setViewPager() {
        adapter = ViewpagerAdapter(list.value!!)
        binding.viewPager.adapter = adapter
    }