ViewPager2를 사용해보자

“Android 로봇은 Google에서 제작하여 공유한 저작물을 복제하거나 수정한 것으로 Creative Commons 3.0 저작자 표시 라이선스의 약관에 따라 사용되었습니다.”

ViewPager?

Display Views or Fragments in a swipeable format.
뷰나 프래그먼트를 스와이프 할 수 있게 보여줌

구글 공식문서에선 위와 같이 정의하고 있다.
말그대로 View나 Fragment를 페이지처럼 스와이프 할 수 있게
구현할 수 있는 View이다.

RecyclerView처럼 Adapter를 통해서 구현되는데
지금부터 간단한 예제를 통해 구현을 한번 해보겠다.

구현

먼저 ViewPager에 쓰일 Fragment를 만들어주자
position에 따라 보여줄 Text만 동적으로 바꿔서 구현할 예정이기에
Fragment는 하나만 만들었다.

class FirstFragment : Fragment() {
    private var _binding : FragmentFirstBinding? = null
    private val binding
        get() = _binding!!
    companion object {
        fun newInstance(page : Int) : FirstFragment {
            val fragment = FirstFragment()
            val args = Bundle()
            args.putInt("page", page)
            fragment.arguments = args
            return fragment
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        _binding = FragmentFirstBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        when(requireArguments().get("page")) {
            0 -> binding.tvFragTitle.text = getString(R.string.str_first_fragment)
            1 -> binding.tvFragTitle.text = getString(R.string.str_second_fragment)
            2 -> binding.tvFragTitle.text = getString(R.string.str_third_fragment)
        }
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

이제 Adapter를 만들어주자

class MyPagerAdapter(fragmentActivity: FragmentActivity, private val count : Int) : FragmentStateAdapter(fragmentActivity) {
    // Page(View or Fragment) 갯수를 반환
    override fun getItemCount(): Int {
        return count
    }

    // 각 position 별 Fragment를 반환
    override fun createFragment(position: Int): Fragment {
        return FirstFragment.newInstance(position)
    }
}

Adapter를 만들었으니 이제 적용만 해주면 끝이다.
layout과 activity를 만들어주자

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".activity.ViewPagerSampleActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id = "@+id/viewPager2" />

</RelativeLayout>

class ViewPagerSampleActivity : AppCompatActivity() {
    private lateinit var binding : ActivityViewPagerSampleBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityViewPagerSampleBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.viewPager2.adapter = MyPagerAdapter(this, 3)
    }
}

빌드 후 실행시켜보면
정상적으로 스와이프가 작동하는 것을 볼 수 있다.

ViewPager1와의 차이점

기존에 있던 ViewPager와 다른점은 여러가지가 있지만
가장 눈에 띄는 것은

• RecyclerView 기반
• RTL(Right to Left) 지원
• 수직 스크롤 지원

위 3가지라 할 수 있겠다.

수직 스크롤 설정은
layout과 코드 단에서 모두 설정이 가능한데

// layout(xml)
android:orientation="vertical"
// Kotlin
binding.viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL

위와 같은 방식으로 설정할 수 있다.

TabLayout과 연동할 수도 있다.

TabLayout과 연동하여
Tab 간의 이동을 스와이프로 넘길수도 있다.

이 방법은 추후에 따로 포스팅을 하도록 하겠다.

개인적으로 공부했던 것을 바탕으로 작성하다보니
잘못된 정보가 있을수도 있습니다.
인지하게 되면 추후 수정하겠습니다.
피드백은 언제나 환영합니다.
읽어주셔서 감사합니다.