ViewPager2를 사용해보자

지프치프·2021년 10월 22일
0

Android

목록 보기
21/86
post-thumbnail

“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 간의 이동을 스와이프로 넘길수도 있다.

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

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

profile
지프처럼 거침없는 개발을 하고싶은 개발자

0개의 댓글