[위시버니] dotsIndicator를 이용한 안드로이드 온보딩 페이지 작업

토리·2024년 1월 31일

사용할 라이브러리

https://github.com/tommybuonomo/dotsindicator

의존성 추가

manifest.xml

dependencies {
	...
    // dotsIndicator
    implementation 'com.tbuonomo:dotsindicator:5.0'
    ...
}

화면 구성

activity_onboarding.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".onboarding.OnboardingActivity">

    <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
        android:id="@+id/dots_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="28dp"
        app:dotsColor="@color/wishbunny_pink"
        app:dotsCornerRadius="8dp"
        app:dotsSize="16dp"
        app:dotsSpacing="4dp"
        app:dotsWidthFactor="2.5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/register_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

액티비티 구성

package com.wish.bunny.onboarding

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.wish.bunny.databinding.ActivityOnboardingBinding

class OnboardingActivity : AppCompatActivity() {
    private lateinit var binding: ActivityOnboardingBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityOnboardingBinding.inflate(layoutInflater)
        setContentView(binding.root)
        binding.registerViewpager.adapter = RegisterPagerAdapter(supportFragmentManager)
        binding.registerViewpager.offscreenPageLimit = 2
        binding.dotsIndicator.setViewPager(binding.registerViewpager)
    }
}

페이저(Pager) 적용하여 화면 넘어가도록 구성

package com.wish.bunny.onboarding

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter
import com.wish.bunny.onboarding.fragment.OnboardingFirstFragment
import com.wish.bunny.onboarding.fragment.OnboardingSecondFragment
import com.wish.bunny.onboarding.fragment.OnboardingLoginFragment

class RegisterPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm,
    BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
        return when(position){
            0 -> OnboardingFirstFragment()
            1 -> OnboardingSecondFragment()
            else -> OnboardingLoginFragment()
        }
    }
    override fun getCount() =  3
}