11-5 뷰 페이저2 - 스와이프로 넘기는 화면 구성

뷰 페이저(ViewPager)는 스와이프(손가락으로 화면을 탭하여 오른쪽이나 왼쪽으로 미는) 이벤트로 화면을 전환할 때 사용한다. ex. 인스타그램

뷰 페이저는 플랫폼 API에서 제공하지 않으므로 androidx 라이브러리를 이용해 개발해야 한다. 2019년에 뷰 페이저 대신 뷰페이저2가 나왔다.

 

(개정판 삭제 내용)

뷰 페이저2를 이용하려면 그래들 파일의 dependencies 항목에 다음과 같이 설정해야 한다.

// 뷰 페이저2 선언
implementation 'androidx.viewpager2:viewpager2:1.0.0'

// 뷰 페이저2 라이브러리 추가
<androidx.viewpager2.widger.ViewPager2
	xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

뷰 페이저2는 화면을 항목으로 본다. 각 항목이 순서대로 나열되어 있는데 단지 한 화면에 항목 하나가 나온다는 개념이다. 따라서 리사이클러 뷰에서 살펴봤던 어댑터(항목 구성 역할)를 적용해야 한다. 뷰 페이저2에 사용할 수 있는 어댑터는 2가지인데 리사이클러 뷰에서 봤던 RecyclerView.Adapter를 그대로 이용하거나 FragmentStateAdapter를 사용할 수도 있다.

 

리사이클러 뷰 어댑터 이용

RecyclerView.Adapter는 리사이클러 뷰에서 살펴봤던 내용과 차이가 없다. 똑같이 작성하되 단지 뷰 페이저2의 어댑터로 적용만 하면 된다.

// 뷰 페이저2 구현 - 리사이클러 뷰 어댑터 이용
class MyPagerViewHolder(val binding: ItemPagerBinding) :
	RecyclerView.ViewHolder(binding.root)
class MyPagerAdapter(val datas: MutableList<String>) :
	RecyclerView.Adapter<RecyclerView.ViewHolder>() { // 리사이클러 뷰 어댑터 적용
    override fun getItemCount(): Int {
    	return datas.size
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):
    	RecyclerView.ViewHolder = 
        	MyPagerViewholder(ItemPagerBinding.inflate(LayoutInflater.from(
            	parent.context), parent, false))
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    	val binding = (holder as MyPagerViewHolder).binding
        // 뷰에 데이터 출력
        binding.itemPagerTextView.text = datas[position]
        when (position % 3) {
        	0 -> binding.itemPagerTextView.setBackgroundColor(Color.RED)
            1 -> binding.itemPagerTextView.setBackgroundColor(Color.BLUE)
            2 -> binding.itemPagerTextView.setBackgroundColor(Color.GREEN)
        }
    }
}

화면 3개를 뷰 페이저2로 제공하는 어댑터이다. 각 화면을 구성하는 레이아웃 XML 파일에는 텍스트 뷰가 하나 선언되었다고 가정했다. 이 어댑터를 뷰 페이저2에 적용하면 된다.

// 뷰 페이저2 어댑터에 적용
binding.viewpager.adapter = myPagerAdapter(datas)

 

프래그먼트 어댑터 이용

RecyclerVies.Adapter를 이용해 뷰 페이저2를 구현할 수도 있지만 대부분 각 항목(화면)은 복잡하게 작성된다. 따라서 각 항목의 내용은 보통 프래그먼트로 작성한다. 만약 항목을 프래그먼트로 작성했으면 FragmentStateAdapter로 뷰 페이저2를 구현한다.

// 뷰 페이저2 구현 - 프래그먼트 어댑터 이용
class MyFragmentPagerAdapter(activity: FragmentActivity): FragmentStateAdapter(activity) {
	val fragments: List<Fragment>
    init {
    	fragments= listOf(OneFragment(), TwoFragment(), ThreeFragment())
        Log.d("kkang", "fragments size : ${fragments.size}")
    }
    override fun getitemCount(): Int = fragments.size
    override fun createFragment(position: Int): Fragment = fragments[position]
}

FrgmentStateAdapter를 상속받아 어댑터를 작성하며 getItemCount()와 createFragment() 함수를 재정의한 것이다. getItemCount() 함수는 항목의 개수를 구하고 createFragment() 함수는 항목을 구성하는 프래그먼트 객체를 얻는다. 그리고 createFragment() 함수에서 반환하는 프래그먼트 객체가 각 항목에 출력된다.

 

뷰 페이저2에서는 화면 방향도 설정할 수 있다. 기본으로 가로 방향인데, 만약 화면이 세로로 나오게 하려면 orientation 속성값을 다음처럼 하면 된다.

// 뷰 페이저2를 세로로 적용
binding.viewpager.orientation = ViewPager2.ORIENTATION_VERTICAL