Viewpager2 배너 + 자동으로 슬라이딩 구현

 

수많은 어플에서 다음과 같은 배너 창을 본 적이 있을 것이다.

자동으로 넘어가는 배너를 만들기 위해 Viewpager 와 thread 를 사용하여 구현하였다.

 

 

Viewpager2 를 구현하기 위해선 adapter 와 각 배너에 들어갈 화면(Fragment) 이 필요하다.

 

package com.example.flo

import androidx.fragment.app.Fragment
import androidx.viewpager2.adapter.FragmentStateAdapter

class RecommendViewpagerAdapter (fragment : Fragment) : FragmentStateAdapter(fragment) {

    private val fragmentlist : ArrayList<Fragment> = ArrayList()

    override fun getItemCount(): Int = fragmentlist.size

    override fun createFragment(position: Int): Fragment = fragmentlist[position]

    fun addFragment(fragment: Fragment){
        fragmentlist.add(fragment)
        notifyItemInserted(fragmentlist.size - 1) // viewpager 에게 추가된 fragment 를 알려줌
    }
}

adapter 는 다음과 같다. 

- getItemCount() 는 viewpager 에 사용된 fragment 가 몇 개인지 사이즈를 반환해 주는 함수이다.

- addFragment() 는 맨 마지막 위치에 새로운 fragment 를 삽입해주는 함수이다. 이때 viewpager 에게 새로운 아이템이 삽입되었음을 알려주어야 한다.

 

	val recommendAdapter = RecommendViewpagerAdapter(this)
        recommendAdapter.addFragment(RecommendFragment())
        recommendAdapter.addFragment(RecommendFragment02())
        recommendAdapter.addFragment(RecommendFragment03())
        recommendAdapter.addFragment(RecommendFragment())
        recommendAdapter.addFragment(RecommendFragment02())
        recommendAdapter.addFragment(RecommendFragment03())

        val viewpager: ViewPager2 = binding.homeRecommendVp
        binding.homeRecommendVp.adapter = recommendAdapter
        binding.homeRecommendVp.orientation = ViewPager2.ORIENTATION_HORIZONTAL
        val child = binding.homeRecommendVp.getChildAt(0)
        (child as? RecyclerView)?.overScrollMode = View.OVER_SCROLL_NEVER

그런 다음 HomeFragment 에서 다음과 같이 Adapter 변수를 하나 생성하고, adapter 에 fragment 들을 추가해준다.

그리고 xml 에서 자리를 차지하고 있던 Viewpager2 를 가져와 adapter 를 설정해주고,

orientation 을 수직 또는 수평으로 설정한다.

또한, 스크롤을 넘길 때 효과가 나타나지 않도록, viewpager 의 child 를 가져와 overScrollMode 도 설정해주었다.

여기까지가 일반 viewpager2 이다. 

 

 

 

자동으로 스크롤이 넘어가는 효과를 생성하기 위해선 thread 를 만들어야 한다.

//2초 마다 페이지 넘기기
    inner class PagerRunnable:Runnable{
        override fun run() {
            while(true){
                try {
                    Thread.sleep(2000)
                    handler.sendEmptyMessage(0)
                } catch (e : InterruptedException){
                    Log.d("interupt", "interupt발생")
                }
            }
        }
    }

다음과 같은 Runnable class 를 생성하였다.

Runnable class 는 interface 이므로, 2초를 sleep 한 후 handler 에게 메시지를 전달하는 로직을 짰다.

 

 

    val handler=Handler(Looper.getMainLooper()){
          setPage()
          true
    }

    
    
    //페이지 변경하기
    fun setPage(){
        if(currentPage == 6)
            currentPage = 0
        binding.homeRecommendVp.setCurrentItem(currentPage, true)
        currentPage+=1
    }

Handler 는 페이지를 넘어가도록 하는 함수를 구현한다.

마지막 페이지라면, 첫 번째 페이지로 바뀌도록 하였다.

 

 thread = Thread(PagerRunnable())
 thread.start()

그런 후, 다음과 같이 thread 를 생성하여 실행하면 된다.