[Android studio] ViewPager2, CircleIndicator3 사용하기! (Kotlin)

xml. ViewPager2 와 Circleindicator3 를 추가해 주었다고 생각을 하겠습니다. 

 

<?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">

        <me.relex.circleindicator.CircleIndicator3
            android:id="@+id/ci_indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:ci_animator="@anim/circle_animation"  // 애니메이터 설정 
            app:ci_drawable="@drawable/bg_oval_primary01" // select 이미지 
            app:ci_drawable_unselected="@drawable/bg_oval_gray04" //unselect 이미지
            app:ci_gravity="center"
            app:ci_height="@dimen/size08"
            app:ci_margin="@dimen/size04"
            app:ci_width="@dimen/size08"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/vp"
            android:layout_width="@dimen/match_constraint"
            android:layout_height="@dimen/match_constraint"
            android:layout_marginTop="@dimen/size40"
            android:layout_marginBottom="@dimen/size50"
            app:layout_constraintBottom_toTopOf="@id/tv_start"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/ci_indicator" />


    </androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

MainActivity. 

initView() 메서드 생성. viewPager2 와 어댑터를 연결해 줍니다. 데이터는 있다고 생각을 하겠습니다. 

 

private val Adapter by lazy {
    Adapter(this)
}


private fun initView() = with(binding) {
    vp.adapter = Adapter   // ViewPager 에 어댑터를 연결 
    Adapter.submitList(data) // 어댑터에 데이터를 submitList
    
	ciIndicator.setViewPager(vp) // circleIndicator3 ViewPager 셋 

    vp.registerOnPageChangeCallback(object :
        ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) { // ViewPager 리스너
            super.onPageSelected(position)
        }
    })
}

 

 

Adapter 는 대략 이렇습니다. 리사이클러뷰의 어댑터와 같습니다.  아이템은 미리 지정해줬다고 생각하겠습니다. 

 

class Adapter(
    private val lifecycleOwner: LifecycleOwner,
) : ListAdapter<Data, RecyclerView.ViewHolder>(DIFF_CALLBACK) {
    companion object {
        private val DIFF_CALLBACK =
            BaseDiffCallback<Data>({ old, new -> old.imageData == new.imageData })
    }

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

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        (holder as ViewHolder).bind(getItem(position))
    }
}

class ViewHolder(
    private val binding: ItemBinding,
    private val lifecycleOwner: LifecycleOwner
) : RecyclerView.ViewHolder(binding.root) {


    fun bind(item: Data) {
        binding.apply {
            this.lifecycleOwner = this@ViewHolder.lifecycleOwner
            this.item = item
            executePendingBindings()
        }
    }
}

 

 

끝 입니다!