[Android/Kotlin] PageIndicatorView/Viewpager indicator

Viewpager를 연결하는 indicator는 항상 CircleIndicator를 써왔는데, 이번엔 좀 다른 걸 써보려고 한다.

구글링 하다가 발견한 PageIndicatorView!! 다양한 애니메이션도 지원해주고,

방법도 어렵지 않기에 함 해보기로^____________^

 

완성된 모습은 요렇다(아래 사진은 '동네 고영희' 앱 UI입니다!!!)

 

https://github.com/romandanylyk/PageIndicatorView

GitHub - romandanylyk/PageIndicatorView: An page indicator for Android ViewPager

---

1. dependencies 추가

implementation 'com.romandanylyk:pageindicatorview:1.0.3'   // pageindicatorview

 

2. xml에 view 추가

• app:piv_animationType="color":여러 애니메이션 중 color 애니메이션 적용
• app:piv_dynamicCount="true"
• app:piv_interactiveAnimation="true"
• app:piv_selectedColor="@color/brown_473A22": 선택된 위치의 동그라미 색상
• app:piv_unselectedColor="@color/beige_E3DECF": 미 선택된 위치의 동그라미 색상
• app:piv_viewPager="@id/pager": indicator와 연결될 viewpager id
• app:piv_padding="11dp": 동그라미 사이 간격
• app:piv_radius="5dp": 동그라미 크기
•  

'동네 고영희' 앱의 UI입니다!!!!!(작업중

<FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/beige_BBB5A4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginBottom="40dp">
        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="340dp" />
    </FrameLayout>

    <com.rd.PageIndicatorView
        android:id="@+id/pageIndicatorView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:piv_animationType="color"
        app:piv_dynamicCount="true"
        app:piv_interactiveAnimation="true"
        app:piv_selectedColor="@color/brown_473A22"
        app:piv_unselectedColor="@color/beige_E3DECF"
        app:piv_viewPager="@id/pager"
        app:piv_padding="11dp"
        app:piv_radius="5dp"
        android:layout_marginTop="36dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/frameLayout" />

 

3. 코드 짜기

val pager = binding.pager
val indicator = binding.pageIndicatorView

// 어댑터 연결
pager.adapter = VpagerAdapter(this@OnBoardingActivity)
pager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
pager.offscreenPageLimit = 4
// indicator 설정
indicator.count = 3         // 전체 3
indicator.selection = 0     // 현재 0
pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        indicator.selection = position
    }
})

참고로 이건 VpagerAdapter이다...^_^ 작업중이라 미완이지만,,극적극적

inner class VpagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    // 어댑터에서 다루는 아이템의 갯수
    override fun getItemCount() = 3 // 도움말 이미지 3장(예시

    // 현재 선택된 프레그먼트 번호에 따른 프레그먼트 보여주기
    override fun createFragment(position: Int): Fragment {
        return when(position) {
            0 -> OnBoardingFragment1()
            1 -> OnBoardingFragment2()
            2 -> OnBoardingFragment1()
            // 디폴트는 시작 페이지로
            else -> OnBoardingFragment1()
        }
    }
}

---

라이브러리 찾아보는 거 재밌다