[Kotlin Android] 라이브러리를 활용한 Indicator 구현 - 1 (ViewPager)

이번 프로젝트의 최종 목표

슬라이드하는 화면을 설계하는 방법: ViewPager

안드로이드에 화면 Swipe 전환 기능을 추가하려면 ViewPager를 레이아웃에 설치하고 Activity 내의 Fragment들을 연결시켜야한다. 다음과 같은 순서로 ViewPager를 구현한다.

• 레이아웃에 ViewPager를 설치
• Fragment 만들기
• ViewPagerAdapter 구현
• Activity에서 Fragment와 ViewPagerAdapter 연결

레이아웃에 ViewPager 설치

<androidx.viewpager.widget.ViewPager
        android:id="@+id/뷰페이저 아이디"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

ViewPager가 들어갈 Activity에 위와 같은 코드를 적습니다.

Fragment 설치

다음과 같이 New - Fragment - Fragment(Blank)를 클릭해서 빈 Fragment들을 제작한다.

Adapter

Adapter는 사용자가 정의한 데이터 리스트를 입력으로 받아들여 화면에 표시할 뷰(View)들을 생성하는 것이다. 그렇다면 ViewPagerAdapter는 ViewPage 내의 Page들을 생성하는 어댑터인 것이다.

ViewPagerAdapter 구현

class ${className}(fm:FragmentManager) : FragmentPagerAdapter(fm,
        BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)

(수정 2020-11-13)

ViewPagerAdapter의 클래스를 다음과 같이 선언한다. 그렇다면 미구현된 함수들이 추가되야한다고 경고가 뜰텐데 두 개의 함수가 Implement된다.

• getItem(position: Int): Fragment : ViewPager 위치에 따른 Fragment를 반환해주는 함수
• getCount(): Int : 페이지 수의 총 갯수를 반환하는 함수 (이 때는 상수를 반환하기 때문에 람다식으로 return 값을 준다)

class ${className}(fm:FragmentManager) : ${className}(fm,
        BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position: Int): Fragment {
        return when(position){
            0 -> FirstFragment()
            1 -> SecondFragment()
            else -> ThirdFragment()
        }
    }

    override fun getCount() =  3
}

그래서 위와 같은 코드들로 ViewPagerAdapter를 구현한다.

Activity에서 Fragment와 ViewPagerAdapter 연결

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        register_viewpager.adapter = RegisterPagerAdapter(supportFragmentManager)
        //offscreenPageLimit의 default는 1
        //해당 페이지 전후에 미리 생성될 페이지 수를 결정한다, 이외의 페이지는 제거
        register_viewpager.offscreenPageLimit = 2
}

다음과 같이 Activity 내 onCreate 함수에서 viewPager의 adapter를 설정해준다.

외부 라이브러리를 활용하여 Dot Indicator를 ViewPager에 연결하는 내용은 2편에서 이어서 서술하도록 하겠다.