[Kotlin] ViewPager (뷰 페이저)

 

 

이번에도 솝트에서 다룬 내용인 ViewPager에 대한 내용이다.

난 사실 이번에 처음 ViewPager를 알았는데, 뭔가 알고나서 내가 알고 있는 거의 모든 어플에서 ViewPager를 사용한다는 것을 깨닫고 충격을 받았다 😱

그만큼! 중요한 내용같기에 포스팅을 하면서 내용을 정리하고 나중에 꼭 활용 할 예정이다 !!

 

사실 BottomNavigation과도 연관지어서 작성하고 싶었는데,

시험과 과제 폭탄에 맞은 상황이라.. 조금 여유가 생기면 하단 탭을 누를때 마다 화면이 전환되는 BottomNavigation과 ViewPager를 함께 포스팅할 예정이다!

 

 

---

 

1. ViewPager 란?

View를 슬라이드쇼처럼 넘길 수 있는 페이징 기법

 

예를 들면! 아래의 배달의 민족 어플을 참고했을 때,

옆으로 슬라이드를 하면 그에따라 페이지가 변하는 것을 볼 수 있다!

이러한 기능을 제공하는게 바로 ViewPager이다

즉, 배달의 민족을 만들때는 교체되는 부분 화면(Fragment)와 부분 화면을 전환하는 ViewPager2를 사용하면 한 화면에서 여러개의 화면들을 볼 수 있다.

 

 

 

 

2. ViewPager를 사용하는 이유

=> 한 화면에서 여러개의 화면들을 보기 위해!

: 화면이 큰 데스크톱은 여러개의 화면을 한번에 보여줄 수 있지만, 화면이 작은 스마트폰에서는 모든 정보를 담기 어렵다!

 

 

3. ViewPager와 비교해서 ViewPager2를 사용하면 얻을 수 있는 이점

 

✅ 세로 페이징 지원

: 기존 가로 페이징은 물론 세로 페이징 지원. android:orientation 속성을 이용하여 새로 페이징 설정 가능

 

✅ 오른쪽에서 왼쪽 지원

: LTR(왼쪽에서 오른쪽)과 더불어 RTL(오른쪽에서 왼쪽) 페이징 지원. android:layoutDirection 속성을 설정하여 ViewPager2요소의 RTL페이징을 수동으로 설정 가능

 

✅ 수정 가능한 프래그먼트 컬렉션

: 런타임 시 프래그먼트 컬렉션을 동적으로 수정할 수 있고, ViewPager2는 수정된 컬렉션 올바르게 표시 가능. 

즉, notifyDataSetChanged를 이용해서 업데이트(프래그먼트 교체) 가능

 

✅ DiffUtil 사용 가능

: RecyclerView 클래스의 데이터세트 변경 애니메이션 활용 가능

 

✅ 리사이클러 뷰 기반으로 동작 (리사이클러 뷰 어댑터 또한 사용 가능)

 

Android 공식 문서 가이드에서도 이제 ViewPager로 이전하라고 하네요 ^!^

 

 

3. ViewPager 구현 (실습)

 

1️⃣ 프래그먼트 생성 (자신이 필요한 화면의 갯수만큼!)

Fragment 생성하기 원하는 패키지 오른쪽 클릭 -> New -> Fragment -> Fragment(Blank)

나는 3개의 view를 보기를 원하므로 fragment를 위와 같은 방법으로 3개 만들어줄 것이다.

 

 

2️⃣ activity_main.xml에  ViewPager2 배치

<?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">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/vp_sample"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </androidx.viewpager2.widget.ViewPager2>


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

3️⃣  레이아웃 리소스 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"
    android:background="#F8B5BD"
    tools:context=".Blankragment1">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="첫 번째 프래그먼트"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

코드를 실행시켰을 때, 화면에 표시될 화면 (fragment_blank1.xml, fragment_blank2.xml, fragment_blank3.xml)을 작성해준다. 참고로 나는 각 xml의 색상과 text만 넣어둔 상태다.

 

 

 

4️⃣ ViewPager 어댑터 클래스 생성 및 구현

package com.example.viewpager2

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class ViewPagerAdapter (fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    val fragments = mutableListOf<Fragment>()

	//Adapter가 가지고 있는 data set 안에서의 전체 아이템 수 리턴
    override fun getItemCount(): Int = fragments.size

	//특정 포지션에 연결된 새로운 Fragment를 제공하는 기능을 가진 메소드
    override fun createFragment(position: Int): Fragment = fragments[position]
}

각 페이지를 나타내는 하위 뷰를 삽입하려면 레이아웃을 PagerAdapter에 연결해줘야한다!

그러기위해서 Adapter 클래스를 생성해주는 것이다.

 

 

 

5️⃣ 뷰페이저에 Adapter 지정 (MainActivity)

package com.example.viewpager2

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.viewpager2.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var ViewPagerAdapter: ViewPagerAdapter
    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)

        initAdapter()
        setContentView(binding.root)
    }

    private fun initAdapter() {
    	//Adapter 안에 ViewPager2 상에 띄워줄 fragmentList 생성
        val fragmentList = listOf(BlankFragment1(), BlankFragment2(), BlankFragment3())

	//ViewPagerAdapter 초기화
        ViewPagerAdapter = ViewPagerAdapter(this)
        ViewPagerAdapter.fragments.addAll(fragmentList)

	//ViewPager2와 Adapter 연동
        binding.vpSample.adapter = ViewPagerAdapter
    }
}

자세한 설명은 주석 참고!

 

 

6️⃣실행화면 캡쳐

위의 화면을 스와이프하면 각 위치에 맞는 화면으로 이동하는 것을 확인할 수 있다!

 

 

 

마지막으로 위에 만든 코드를 토대로 작동 방식을 그림으로 나타내면 다음과 같다

 

---

 

안드로이드 스튜디오 공식 문서와 안드로이드 파트장님이 준비해주신 세미나 내용을 참고하면서 직접 이해한 내용을 바탕으로 작성했습니다.