[Android] ViewPager2

heetaeheo·2022년 5월 10일
0

Android

목록 보기
11/12
post-thumbnail

ViewPager2

ViewPager는 이름처럼 View를 페이지 넘기듯이 넘길 수 있기 때문에 ViewPager라고 한다. ViewPager를 사용한다면 자연스러운 화면 전환으로 광고나 배달 어플들의 음식점 리스트를 옆으로 넘기는 동작을 수행해 준다.

해당 이미지는 팀 프로젝트 작업에서 적용된 ViewPager에 AutoSlide기능을 추가하여 광고 이미지를 띄울 수 있게 작업한 것입니다.

이 글에서는 ViewPager를 이용하여 RecyclerView를 좌우로 스와이프 할 수 있는 방법에 대해 설명하려고 합니다.

바로 코드로 넘어가겠습니다.
ViewPager Adapter입니다.

class FragmentPagerAdapter(
    fragment: Fragment,
    private val fragmentList: List<Fragment>,
    // TODO latlngEntity
) : FragmentStateAdapter(fragment) {
    override fun getItemCount() = fragmentList.size

    override fun createFragment(position: Int) = fragmentList[position]
}

getItemCount의 값과 CreateFragment를 넣어줍니다. 이때 선언될 Fragment는 RecyclerView를 가지고 있는 Fragment이고 이 Fragment를 ViewPager의 안에 넣어줄 것입니다.

CSFragment.kt

  private fun initviewPager() = with(binding){
        if (::viewAdapter.isInitialized.not()) {
            val csCategory = CSCategory.values()

            val CSListfragmnet = csCategory.map {
                CSListFragment.newInstance(it)
            }

            viewAdapter = HomeListFragmentPagerAdapter(
                this@CSFragment,
                CSListfragmnet
            )
            viewPagerCs.adapter = viewAdapter

            viewPagerCs.offscreenPageLimit = csCategory.size

            TabLayoutMediator(tabLayout,viewPagerCs){
                    tab, position -> tab.setText(csCategory[position].categoryNameId)
            }.attach()


        }
    }
    override fun initViews() = with(binding) {
        super.initViews()

        CSTextView.text = "고객센터"
        initviewPager()

   

프로젝트에 사용되고 있는 코드의 일부분 입니다. 현재 ViewBinding을 사용하기 때문에 binding으로 xml id를 찾고있습니다. 이점 유의하시기 바랍니다.
일단 initviewPager라는 함수를 통해 ViewAdapter가 초기화되어있지않다면 Repository에 저장되어있는 CSCategory의 값들을 csCategory에 담아 카테고리별 데이터를 map해줍니다. 이렇게 된 값을 viewPager.adapter에 넣어 값을 던져줍니다. 아래의 TabLayoutMediator는 선언한 속성에 맞게 탭창이 생기며 좌우의 스와이프 또는 탭의 터치로도 ViewPager의 페이지를 이동이 가능하게 해줍니다.

위의 코드가 정상적으로 동작한다면

다음과 같은 화면이 생성됩니다.
간단하게 ViewPager2안에 RecyclerView를 넣어 출력하는 것을 설명하였습니다. 읽어주셔서 감사합니다.

0개의 댓글