Android - 라이브러리를 활용한 인디케이터 ( dotsIndicator )

너무 바쁜 나날을 보내다. 아 공부를 하고 기록을 못하고 있어서 다시 정신 차리고 열심히 기록하면서 공부해야겠다는 다짐을 하면 글을 다시 시작 하려 합니다.

 

 

현재 제가 사이드 프로젝트를 하면서 ViewPager를 사용하게 되었습니다.

 

3개의 페이지를 적요 하였습니다.

그런데 이게 현재 어느 위치인지 그리고 페이지가 더 있는지 알 수 없습니다. 

 

그럼 어떻게 해야할 까요?

 

일반적으로 앱들을 보면 하단에 쩜으로 현재 위치는 어디고, 화면이 얼마나 더 있는지 알려주는 인디 케이터가 존재 합니다.

 

그런데 이걸 일일이 계산하고, 이미지를 만들어서 적용하려면 많은 어려움(이라 쓰고 귀찮음이라 읽습니다)이 있습니다.

 

그래서 알아보니 매우 훌륭한 라이브러리가 있었습니다

 

github.com/tommybuonomo/dotsindicator?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=7127

tommybuonomo/dotsindicator

 

위  github를 보면 Material View Pager Dots Indicator 이라는 라이브러리를 받을 수 있습니다. 이 라이브러리는 인디케이터를 쉽게 적용 할 수 있도록 도와줍니다. 

 

그럼 사용 방법을 알아 보겠습니다.

우선 bundle.gradle(app)의 dependencies 에 다음을 추가 합니다.

dependencies {
    implementation 'com.tbuonomo.andrui:viewpagerdotsindicator:4.1.2'
}

 

그 다음 viewpager가 적용된 xml에 다음을 추가 합니다

            <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="60dp"
                android:layout_centerHorizontal="true"
                app:dotsColor="@android:color/black"
                app:dotsCornerRadius="8dp"
                app:dotsSize="16dp"
                app:dotsSpacing="4dp"
                app:dotsWidthFactor="2.5"
                app:selectedDotColor="@android:color/darker_gray"
                app:progressMode="false"/>

dotsColor 는 각 점의 색이고, selectedDotColor는 선택중인 위치의 색입니다. dotSize 는 점의 크기. dotSpacing은 점들간의 간격 dotCorerRadius 는 점의 코너 반경 입니다.  (기타 등등은 더 스스로 github에서 확인 해보시면 됩니다!)

 

그 다음은 

val pagerAdapter = ScreenSlidePagerAdapter(this)
binding.viewpagerMain.adapter = pagerAdapter
binding.viewpagerMain.setCurrentItem(1,true)
binding.dotsIndicator.setViewPager2(binding.viewpagerMain)

viewpager를 dotsIndicator에 셋팅 합니다. (제가 databinding으로 레이아웃 결합을 해 주었습니다.)

 

이렇게 적용을 하면

 

이렇게 인디케이터를 통하여 선택은 회섹과 살짝 긴 점으로, 아닌 부분은 점으로 표시하여 viewpager의 위치를 표시해 주게 됩니다!

 

이렇게 따로 계산을 하고 이미지를 만들어 줄 필요 없이 간단하게 인디케이터를 만들 수 있습니다!