코틀린 공부34

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

 

뷰 페이저는 스와이프(손가락으로 화면을 탭 하여 오른쪽이나 왼쪽으로 미는) 이벤트로 화면을 전환할 때 사용합니다. 뷰 페이저는 플랫폼 API에서 제공하지 않으므로 androidx 라이브러리를  이용해 개발해야 합니다. 오랫동안 이용했던 viewpager와 별개로 2019년에 viewpager2를 제공하기 시작합니다. viewpager2가 당연스럽게 viewpager보다 더욱 많은 기능을 제공하므로 viewpager2를 사용하는 것이 좋습니다.

 

그래들 파일의 dependencies항목에 뷰 페이저2 선언

implementation 'androidx.viewpager2:viewpager2:1.0.0'

 

XML 파일에 뷰 페이저 2 라이브러리 추가

<android.viewpager2.widget.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는 화면을 항목으로 봅니다. 각 항목이 순서대로 나열되어 있는데 단지 한 화면에 항목 하나가 나온다는 개념입니다. 그래서 어댑터를 사용합니다. viewpager2에서 사용할 수 있는 어댑터는 2가지인데 리사이클러 뷰에서 봤던 RecyclerView.Adapter를 그대로 이용하거나 FragmentStateAdapter를 사용할 수도 있습니다.

 

리사이클러 뷰 어댑터 이용

 

뷰 페이저2 구현 - 리사이클러 뷰 어댑터 이용

class MyPagerViewHolder(val binding: ItemPagerBinding):
	RecyclerView.ViewHolder(binding.root) 
class MyPager Adapter(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)
        }
    }
}

 

뷰 페이저2 어댑터에 적용

binding.viewpager.adapter = MyPagerAdapter(datas)

 

프래그먼트 어댑터 이용

 

만약 항목을 프래그먼트로 작성했으면 FragmentStateAdapter로 뷰 페이저 2를 구현할 수 있습니다.

 

뷰 페이저 2 구현 - 프래그먼트 어댑터 이용

class My FragmentPager Adapter(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]
}

 

뷰 페이저2를 세로로 적용

binding.viewpager.orientation = ViewPager2.ORIENTATION_VERTICAL