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
}