[Kotlin][Android] 뷰페이저를 사용하여 화면 슬라이드 기능 만들기

뷰페이저를 사용해서 화면 슬라이드 기능를 만들어 보겠습니다.

 

뷰페이저(ViewPager)란?

데이터를 페이지 단위로 표시하고, 좌/우 슬라이드를 통해 페이지를 전환할 수 있도록 만들어주는 컨테이너입니다. 자체적으로 화면을 그리는 기능을 가지지는 않고, 여러 종류의 뷰(View) 위젯을 사용하여 각 뷰페이저의 페이지를 구성합니다.

 

참고)

안드로이드 개발자 문서 - developer.android.com/training/animation/screen-slide-2

---

빌드 스크립트 설정

뷰페이저를 사용하기 위해 맨 아래에 보이는 의존성 설정을 추가 해주고, sync Now를 누르면 라이브러리 추가가 완료됩니다.

 

 

 

implementation 'androidx.viewpager2:viewpager2:1.0.0'

 

---

다음 예제에 사용할 화면을 만들어보겠습니다.

 

사진에 보이는 res/layout/ 파일 위치에 아래에 적어둔 xml 파일들을 생성해 줍니다.

 

(1) 메인 화면

<activity_main.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=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="텍스트뷰"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

(2) 다른 페이지 화면

<activity_other.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="다른 페이지"
        android:textAppearance="@style/TextAppearance.AppCompat.Display4" />

</androidx.constraintlayout.widget.ConstraintLayout>

---

다음 예제에 사용할 코드를 작성해 보겠습니다.

 

먼저 페이지마다 배경색을 다르게 보여주기위해 색 정보가 담긴 리스트값을 MainActivity 클래스에 추가해줍니다.

 

    val bgColors: MutableList<Int> = mutableListOf(
        android.R.color.holo_green_light,
        android.R.color.holo_blue_dark
    )

 

스틱코드를 활용한다면, 클래스에서 'kov' 까지만 작성했을 때 '뷰페이저 생성' 이벤트가 나타납니다.

 

 

'뷰페이저 생성' 이벤트를 누를 경우 코드가 자동으로 완성이 됩니다.

 

여기서는 xml에 만들어둔 뷰페이저의 아이디 값만 입력을 해주시면 됩니다.

그리고 에러가 나는 부분은 다음 코드를 추가하면 해결이 됩니다.

 

스틱코드를 활용한다면, 클래스에서 'koa' 까지만 작성했을 때 '뷰페이저 어답터 생성' 이벤트가 나타납니다.

 

 

'뷰페이저 어답터 생성' 이벤트를 누를 경우 코드가 자동으로 완성이 됩니다.

 

여기서는 다른 페이지 xml 파일 이름 값만 입력을 해주시면 화면 슬라이드 기능이 완성됩니다.

 

<최종 코드>

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.annotation.ColorRes
import androidx.core.content.ContextCompat
import androidx.viewpager2.widget.ViewPager2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {

    // 페이지 배경색 정보가 담긴 리스트
    val bgColors: MutableList<Int> = mutableListOf(
        android.R.color.holo_green_light,
        android.R.color.holo_blue_dark
    )


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 뷰페이저 생성
        var viewPager = findViewById(R.id.viewPager) as ViewPager2

        // 뷰페이저 사용을 위한 Adapter 생성 후 뷰페이저에 Adapter를 연결
        viewPager.adapter = CustomPagerAdapter()

        // 슬라이드할 경우 실행할 이벤트
        viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)

            }
        })
    }

    // 뷰페이저에서 데이터값을 화면에 설정하는 역할을 하는 클래스
    inner class CustomPagerAdapter : RecyclerView.Adapter<CustomPagerAdapter.MyPagerViewHolder>() {

        // onCreateViewHolder() 메소드는 좀 전에 살펴본 ViewHolder 클래스 객체를 생성하는 역할을 하며, *.xml을 코틀린에서 사용할 수 있게 해줍니다.
        // 매개변수로 넘어오는 parent는 뷰를 보여줄 부모 뷰를 의미, viewType은 아이템에 따라 서로 다른 뷰홀더를 생성하고 싶을 때 사용할 수 있는 값
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyPagerViewHolder {

            // LayoutInflater 클래스는 레이아웃 XML 파일을 코틀린에서 사용할 수 있는 객체로 변환하는 역할
            val view = LayoutInflater.from(parent.context).inflate(R.layout.activity_other, parent, false)
            return MyPagerViewHolder(view)
        }

        // onBindViewHolder() 메소드는 뷰홀더에 아이템을 설정하는 메소드입니다.
        // 매개변수로는 뷰홀더와 아이템을 보여줄 위치 값(position)이 있습니다.
        // onBindViewHolder() 메소드는 어댑터 생성자에 넘어온 데이터를 뷰홀더에 매칭해주는 역할을 합니다.
        override fun onBindViewHolder(holder: MyPagerViewHolder, position: Int) {
            holder.bind(bgColors[position], position)
        }

        // 어댑터에 설정된 아이템 리스트의 크기를 반환하는 메소드
        // 어댑터 생성자로 넘어온 items의 크기를 반환하는 코드를 작성해야 합니다.
        override fun getItemCount(): Int {
            return bgColors.size
        }

        // 뷰홀더 클래스를 정의: onCreateViewHolder() 메소드에서 뷰 객체로 생성한 *.xml 레이아웃이 ViewHolder 생성자에 지정된 것
        // 이를 통해 itemView.findViewById<TextView>(R.id.textView)처럼 코드를 작성해서 텍스트뷰를 찾을 수 있습니다.
        inner class MyPagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
            private val textView: TextView = itemView.findViewById<TextView>(R.id.textView)

            fun bind(@ColorRes bgColor: Int, position: Int) {
                textView.text = "$position 페이지"
                textView.textSize = 20F
                itemView.setBackgroundColor(ContextCompat.getColor(itemView.context, bgColor))
            }
        }
    }
}

 

---

프로젝트를 실행하면 앱 화면을 마우스로 누르고 좌측으로 이동하면 슬라이드 되는 것을 확인할 수 있습니다.

 

 

---

사용한 스틱코드

[Kotlin][Android] 뷰페이저를 사용하여 슬라이드 기능 만들기

stickode.com/detail.html?no=2071