2024.03.06(수) TIL

android에서 viewPager와 indicator를 적용시키는 방법을 알아봤다.

결과물 미리보기

라이브러리

먼저 인디케이터를 사용하기 위해서 라이브러리를 추가해줬다.

implementation("com.tbuonomo:dotsindicator:5.0")

XML

다음으로 xml에서는

<androidx.viewpager2.widget.ViewPager2
                android:id="@+id/view_pager"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
                
<com.tbuonomo.viewpagerdotsindicator.SpringDotsIndicator
                android:id="@+id/spring_dots_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:dampingRatio="0.5"
                android:layout_marginTop="16dp"
                app:dotsColor="@color/brandColor"
                app:dotsStrokeColor="@color/indicator_gray"
                app:dotsCornerRadius="10dp"
                app:dotsSize="8dp"
                app:dotsSpacing="3dp"
                app:dotsStrokeWidth="2dp"
                app:stiffness="300"
                app:layout_constraintEnd_toEndOf="@id/view_pager"
                app:layout_constraintStart_toStartOf="@id/view_pager"
                app:layout_constraintTop_toBottomOf="@id/view_pager" />

이렇게 뷰페이저를 만들어주고 그 아래 indicator를 넣어주었다.

Activity

나는 api를 이용해서 이미지를 불러왔고, 불러온 이미지를 imageUrls 리스트에 넣어주고, initViewPager()함수를 불러왔다.

private fun initViewPager() {
    binding.viewPager.adapter = ViewPagerAdapter(imageUrls)
    binding.viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
    binding.springDotsIndicator.attachTo(binding.viewPager)
}

이렇게 뷰페이저를 먼저 만들고 연동시켜줬다. 3번째줄 인디케이터는 아직은 볼필요없고, 여기서 필요한건 ViewPagerAdapter를 만들어줘야한다.

ViewPagerAdapter

class ViewPagerAdapter(imageList: MutableList<String>) :
    RecyclerView.Adapter<ViewPagerAdapter.PagerViewHolder>() {
    var item = imageList

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

    override fun getItemCount(): Int = item.size

    override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
//        holder.image.setImageResource(item[position])
        Glide.with(holder.itemView.context)
            .load(item[position])
            .centerCrop()
            .into(holder.image)
    }

    inner class PagerViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder
        (LayoutInflater.from(parent.context).inflate(R.layout.item_camp_image, parent, false)) {

        val image = itemView.findViewById<ImageView>(R.id.imageCamp)
    }
}

이 화면이 ViewPagerAdapter이다. 화면에 사진을 띄워줄거고 해당 아이템 layout또한 만들어줬다.

item_camp_image.xml

<?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/imageCamp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

이렇게 사용해서 뷰페이저를 만들어주고, 인디케이터를 연동시켜주었다.

---

viewpager
indicator
viewpager indicator
viewpagerindicator