[application] 온보딩(Onboarding) 페이지

dotsIndicator

---

• build.gradle (Module:app)

  • implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'
    

• activity.xml 화면 구성

  • dotsIndicator 배치
    • dotsColor : 선택되기 이전 기본 dot 색상
    • selectedDotColor : 선택되었을 때 dot 색상
    • dotsSize : dot 크기
    • progressMode
      • true : 지나온 dot의 컬러를 selectedDotColor로 설정
  • ViewPager2 배치

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".ui.onboarding.OnboardingActivity">

    <com.tbuonomo.viewpagerdotsindicator.DotsIndicator
        android:id="@+id/dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="78dp"
        app:dotsColor="#FFD9D9D9"
        app:dotsCornerRadius="8dp"
        app:dotsSize="8dp"
        app:dotsSpacing="4dp"
        app:dotsWidthFactor="2.5"
        app:selectedDotColor="@color/highbally_blue" >

    </com.tbuonomo.viewpagerdotsindicator.DotsIndicator>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp" />
</LinearLayout>

• fragment 구성

  • ViewPager로 보여줄 화면 구성

ViewPager2

---

• ViewPager2 Adapter

  • getItemCount : 보여줄 페이지 수
  • createFragment : position번째 fragment 반환

val fragment1 = FirstOnboardingFragment()
val fragment2 = SecondOnboardingFragment()
val fragment3 = ThirdOnboardingFragment()


inner class MainFragmentStateAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    
    override fun getItemCount(): Int {
        return 3
    }

   
    override fun createFragment(position: Int): Fragment {
        val resultFragment = when(position){
            0 -> fragment1
            1 -> fragment2
            else -> fragment3
        }
        return resultFragment
    }
}

• Adapter 설정

pager.run{
	adapter = MainFragmentStateAdapter(this@OnboardingActivity)
}

• 주요 method

  • registerOnPageChangeCallback : 페이지 변경될 때 동작

registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback(){
	// position : 현재 보여진 페이지 번호
	override fun onPageSelected(position: Int) {
		super.onPageSelected(position)
    	// 기능 구현
	}
})

• 주요 속성

  • 스크롤 방향 설정
    • layoutDirection
      • LAYOUT_DIRECTION_RTL : 스크롤 방향 - 오른쪽
      • LAYOUT_DIRECTION_LTR : 스크롤 방향 - 왼쪽 (기본)

      layoutDirection = ViewPager2.LAYOUT_DIRECTION_RTL

    • orientation
      • ORIENTATION_VERTICAL : 스크롤 방향 - 상하

      orientation = ViewPager2.ORIENTATION_VERTICAL

ViewPager & dotsIndicator 연동

---

activityOnboardingBinding.dotsIndicator.setViewPager2(activityOnboardingBinding.pager)

🎞️ 실행 영상

---