一、实现效果图

iShot2020-09-0423.23.18.gif

二、实现方式

主要的实现方式有两种：

第一种是采用Adapter内的getCount()方法返回Integer.MAX_VALUE。 第二种在列表的最前面插入最后一条数据，在列表末尾插入第一个数据，造成循环的假象。

两种方式各有优缺点，第一种方式滑动更流畅，不过试过需要至少 4 个元素才能使用。否则要么报错要么就会有白屏。第二种方法的缺点是第一个和最后一个元素切换效果可能不是太好。

2.1 第一种实现方法Integer.MAX_VALUE

    1. 简单的布局 ``` <?xml version=”1.0” encoding=”utf-8”?> 
  1. <androidx.viewpager.widget.ViewPager
  2.     android:id="@+id/vp_vp_test_vp"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="0dp"
  5.     android:layout_weight="1"/>
  7. <LinearLayout
  8.     android:id="@+id/ll_vp_test_indicator"
  9.     android:layout_width="match_parent"
  10.     android:layout_height="20dp"
  11.     android:background="@color/blue_74D3FF"
  12.     android:orientation="horizontal"
  13.     android:gravity="center"/>

  2. - 2. activity
  4. 为了可以向左也能无限滑动，设置初始位置可以在中间，也可以是一个大一点的数字，一般不需要去处理滑到到 0 时的位置，如果要处理的话可以通过监听滚动，在 position = 0，设置新的位置。同理向右滑动到最后一个时，做相同的处理。

class VpTestActivity : BaseActivity(R.layout.activity_vp_test) { override fun initData() {

  1. }
  3. override fun initEvent() {
  5. }
  7. override fun initInterface() {
  9.     val dataList = arrayListOf<Fragment>()
  10.     for (i in 0..3){
  11.         dataList.add(VpTestFg.newInstance(i))
  12.     }
  13.     val adapter = VpTestAdapter(supportFragmentManager,dataList)
  14.     vp_vp_test_vp.adapter = adapter
  16.     //初始位置设置到比较大的位置
  17.     vp_vp_test_vp.currentItem = dataList.size * 1000
  20.     //设置圆点指示器
  21.     ll_vp_test_indicator.removeAllViews()
  22.     val dimen = resources.getDimensionPixelOffset(R.dimen.m10)
  23.     for (i in 0..3){
  24.         val image = ImageView(this)
  25.         image.setBackgroundResource(R.drawable.circle_white)
  26.         ll_vp_test_indicator.addView(image)
  27.         //设置间隔
  28.         val layoutParams: LinearLayout.LayoutParams = image.layoutParams as LinearLayout.LayoutParams
  29.         layoutParams.setMargins(dimen,0,dimen,0)
  30.         image.layoutParams = layoutParams
  31.     }
  33.     //设置第一个指示器是红色
  34.     ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  36.     vp_vp_test_vp.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
  37.         override fun onPageScrollStateChanged(state: Int) {
  39.         }
  41.         override fun onPageScrolled(
  42.             position: Int,
  43.             positionOffset: Float,
  44.             positionOffsetPixels: Int
  45.         ) {
  47.         }
  49.         override fun onPageSelected(position: Int) {
  50.             //切换指示器
  51.             changeIndicator(position)
  52.         }
  54.     })
  55. }
  57. private fun changeIndicator(position: Int) {
  58.     val size = ll_vp_test_indicator.childCount
  59.     for (i in 0..size){
  60.         ll_vp_test_indicator.getChildAt(i)?.setBackgroundResource(R.drawable.circle_white)
  61.     }
  62.     ll_vp_test_indicator.getChildAt(position%size)?.setBackgroundResource(R.drawable.circle_red)
  64. }
  66. override fun onReload() {
  67. }

}

  2. - 3. adapter
  4. 在这里 getCount 返回一个很大的值，这样就可以滑动很久也不会滑到头。在获取 getItem时，不做处理，对 position 的处理要放在instantiateItem里才行，在 getItem 中会报错。

class VpTestAdapter(fragmentManager: FragmentManager, val data: ArrayList) : FragmentPagerAdapter(fragmentManager) {

  1. override fun getItem(position: Int): Fragment = data[position]
  3. override fun getCount(): Int = Int.MAX_VALUE
  6. override fun instantiateItem(container: ViewGroup,  position: Int): Any {
  7.     //处理position。让数组下标落在[0,fragmentList.size)中，防止越界
  8.     var position = position
  9.     position %= data.size
  10.     return super.instantiateItem(container, position)
  11. }

}

  2. - 4. 圆点指示器
  4. 只是两个简单的背景，可以是图片，也可以是 drawable 文件，这里用的是简单的文件，如下：<br />白色的圆：

<?xml version=”1.0” encoding=”utf-8”?>

  1. 红色的圆：

<?xml version=”1.0” encoding=”utf-8”?>

  2. - 5. 简单的 fragment
  4. 布局非常简单，只有中间一个 TextView。

class VpTestFg: Fragment() {

  1. companion object{
  2.     fun newInstance(type: Int): VpTestFg{
  3.         val bundle = Bundle()
  4.         bundle.putInt("type",type)
  5.         val fragment = VpTestFg()
  6.         fragment.arguments = bundle
  7.         return fragment
  8.     }
  9. }
  10. override fun onCreateView(
  11.     inflater: LayoutInflater,
  12.     container: ViewGroup?,
  13.     savedInstanceState: Bundle?
  14. ): View? {
  15.     return inflater.inflate(R.layout.fg_vp_test,container,false)
  16. }
  18. @SuppressLint("SetTextI18n")
  19. override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  20.     super.onViewCreated(view, savedInstanceState)
  22.     val type = arguments?.getInt("type")
  23.     tv_fg_vp_test_text.text = "this is fragment $type"
  25.     tv_fg_vp_test_text.setOnClickListener {
  26.         //进入另一种方法
  27.         startActivity(Intent(context,VpTestTwoActivity::class.java))
  28.     }
  29. }

}

  2. - 6. 实现自动轮播

private val mDelayTime: Long = 3000

  1. private val mHandler = @SuppressLint("HandlerLeak")
  2. object : Handler(){
  3.     override fun handleMessage(msg: Message) {
  4.         super.handleMessage(msg)
  5.     }
  6. }
  8. override fun run() {
  9.     var currentItem = vp_vp_test_vp.currentItem
  10.     currentItem ++
  11.     if (currentItem == vp_vp_test_vp.childCount - 1){//滑到最后一个
  12.         currentItem = 0
  13.         vp_vp_test_vp.setCurrentItem(currentItem,false)
  14.         mHandler.postDelayed(this,mDelayTime)
  15.     }else{
  16.         vp_vp_test_vp.setCurrentItem(currentItem,true)
  17.         mHandler.postDelayed(this,mDelayTime)
  18.     }
  19. }
  21. override fun onResume() {
  22.     super.onResume()
  23.     mHandler.postDelayed(this,mDelayTime)
  24. }
  26. override fun onPause() {
  27.     super.onPause()
  28.     mHandler.removeCallbacks(this)
  29. }
  2. - 7. 手动滚动时，停止轮播

vp_vp_test_vp.setOnTouchListener { v, event -> when(event.action){ MotionEvent.ACTION_DOWN -> { LogUtils.e(“action-down”) mHandler.removeCallbacks(this) } MotionEvent.ACTION_UP -> { LogUtils.e(“action-up”) mHandler.postDelayed(this,mDelayTime) } MotionEvent.ACTION_MOVE -> { //LogUtils.e(“action-move”) //mHandler.removeCallbacks(this) } } false }

  2. - 8. 完整的 activity 如下：

class VpTestActivity : BaseActivity(R.layout.activity_vp_test), Runnable {

  1. private val mDelayTime: Long = 3000
  3. private val mHandler = @SuppressLint("HandlerLeak")
  4. object : Handler(){
  5.     override fun handleMessage(msg: Message) {
  6.         super.handleMessage(msg)
  7.     }
  8. }
  10. override fun run() {
  11.     var currentItem = vp_vp_test_vp.currentItem
  12.     currentItem ++
  13.     if (currentItem == vp_vp_test_vp.childCount - 1){//滑到最后一个
  14.         currentItem = 0
  15.         vp_vp_test_vp.setCurrentItem(currentItem,false)
  16.         mHandler.postDelayed(this,mDelayTime)
  17.     }else{
  18.         vp_vp_test_vp.setCurrentItem(currentItem,true)
  19.         mHandler.postDelayed(this,mDelayTime)
  20.     }
  21. }
  23. override fun onResume() {
  24.     super.onResume()
  25.     mHandler.postDelayed(this,mDelayTime)
  26. }
  28. override fun onPause() {
  29.     super.onPause()
  30.     mHandler.removeCallbacks(this)
  31. }
  34. override fun initData() {
  36. }
  38. override fun initEvent() {
  40. }
  42. @SuppressLint("ClickableViewAccessibility")
  43. override fun initInterface() {
  45.     val dataList = arrayListOf<Fragment>()
  46.     for (i in 0..3){
  47.         dataList.add(VpTestFg.newInstance(i))
  48.     }
  49.     val adapter = VpTestAdapter(supportFragmentManager,dataList)
  50.     vp_vp_test_vp.adapter = adapter
  52.     //初始位置设置到比较大的位置
  53.     vp_vp_test_vp.currentItem = dataList.size * 1000
  56.     //设置圆点指示器
  57.     ll_vp_test_indicator.removeAllViews()
  58.     val dimen = resources.getDimensionPixelOffset(R.dimen.m10)
  59.     for (i in 0..3){
  60.         val image = ImageView(this)
  61.         image.setBackgroundResource(R.drawable.circle_white)
  62.         ll_vp_test_indicator.addView(image)
  63.         //设置间隔
  64.         val layoutParams: LinearLayout.LayoutParams = image.layoutParams as LinearLayout.LayoutParams
  65.         layoutParams.setMargins(dimen,0,dimen,0)
  66.         image.layoutParams = layoutParams
  67.     }
  69.     //设置第一个指示器是红色
  70.     ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  72.     vp_vp_test_vp.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
  73.         override fun onPageScrollStateChanged(state: Int) {
  75.         }
  77.         override fun onPageScrolled(
  78.             position: Int,
  79.             positionOffset: Float,
  80.             positionOffsetPixels: Int
  81.         ) {
  83.         }
  85.         override fun onPageSelected(position: Int) {
  86.             //切换指示器
  87.             changeIndicator(position)
  88.         }
  90.     })
  92.     //设置切换动画
  93.     vp_vp_test_vp.setPageTransformer(true, DepthPageTransformer())
  95.     vp_vp_test_vp.setOnTouchListener { v, event ->
  96.         when(event.action){
  97.             MotionEvent.ACTION_DOWN -> {
  98.                 LogUtils.e("action-down")
  99.                 mHandler.removeCallbacks(this)
  100.             }
  101.             MotionEvent.ACTION_UP -> {
  102.                 LogUtils.e("action-up")
  103.                 mHandler.postDelayed(this,mDelayTime)
  104.             }
  105.             MotionEvent.ACTION_MOVE -> {
  106.                 //LogUtils.e("action-move")
  107.                 //mHandler.removeCallbacks(this)
  108.             }
  109.         }
  110.          false
  111.     }
  112. }
  114. private fun changeIndicator(position: Int) {
  115.     val size = ll_vp_test_indicator.childCount
  116.     for (i in 0..size){
  117.         ll_vp_test_indicator.getChildAt(i)?.setBackgroundResource(R.drawable.circle_white)
  118.     }
  119.     ll_vp_test_indicator.getChildAt(position%size)?.setBackgroundResource(R.drawable.circle_red)
  121. }
  123. override fun onReload() {
  124. }

}

  1. <a name="tOwub"></a>
  2. ### 2.2 第二种方法
  4. - 1. 布局文件同上
  5. - 2. activity

class VpTestTwoActivity: BaseActivity(R.layout.activity_vp_test) { override fun initData() {

  1. }
  3. override fun initEvent() {
  4. }
  6. lateinit var dataList: ArrayList<Fragment>
  7. var mCurrent2 = 1
  8. override fun initInterface() {
  10.      dataList = arrayListOf<Fragment>()
  11.     //第一个位置加上最后一个 fragment,最后一个位置加上第一个 fragment
  12.     dataList.add(VpTestFg.newInstance(3))
  13.     for (i in 0..3){
  14.         dataList.add(VpTestFg.newInstance(i))
  15.     }
  16.     dataList.add(VpTestFg.newInstance(0))
  19.     val adapter = VpTestAdapter2(supportFragmentManager,dataList)
  20.     vp_vp_test_vp.adapter = adapter
  22.     vp_vp_test_vp.currentItem = mCurrent2
  24.     //设置圆点指示器
  25.     ll_vp_test_indicator.removeAllViews()
  26.     val dimen = resources.getDimensionPixelOffset(R.dimen.m10)
  27.     for (i in 0..3){
  28.         val image = ImageView(this)
  29.         image.setBackgroundResource(R.drawable.circle_white)
  30.         ll_vp_test_indicator.addView(image)
  31.         //设置间隔
  32.         val layoutParams: LinearLayout.LayoutParams = image.layoutParams as LinearLayout.LayoutParams
  33.         layoutParams.setMargins(dimen,0,dimen,0)
  34.         image.layoutParams = layoutParams
  35.     }
  37.     //设置第一个指示器是红色
  38.     ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  40.     vp_vp_test_vp.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
  41.         override fun onPageScrollStateChanged(state: Int) {
  42.             //判断是否滑动结束
  43.             if (state == ViewPager.SCROLL_STATE_IDLE){
  44.                 if (mCurrent2 == 0){
  45.                     vp_vp_test_vp.setCurrentItem(dataList.size - 2, false);//切換，不要動畫效果
  46.                 }else if (mCurrent2 == dataList.size - 1){
  47.                     vp_vp_test_vp.setCurrentItem(1, false);//切換，不要動畫效果
  48.                 }
  49.             }
  50.         }
  52.         @SuppressLint("MissingSuperCall")
  53.         override fun onPageScrolled(
  54.             position: Int,
  55.             positionOffset: Float,
  56.             positionOffsetPixels: Int
  57.         ) {
  58.             //这里可以自定义指示器切换动画效果
  60.         }
  62.         override fun onPageSelected(position: Int) {
  63.             mCurrent2 = position
  64.             //切换指示器
  65.             changeIndicator(position)
  66.         }
  68.     })
  69. }
  71. private fun changeIndicator(position: Int) {
  72.     val size = ll_vp_test_indicator.childCount
  73.     for (i in 0..size){
  74.         ll_vp_test_indicator.getChildAt(i)?.setBackgroundResource(R.drawable.circle_white)
  75.     }
  76.     when (position) {
  77.         0 -> {
  78.             ll_vp_test_indicator.getChildAt(size - 1)?.setBackgroundResource(R.drawable.circle_red)
  79.         }
  80.         dataList.size - 1 -> {
  81.             ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  82.         }
  83.         else -> {
  84.             ll_vp_test_indicator.getChildAt(position - 1)?.setBackgroundResource(R.drawable.circle_red)
  85.         }
  86.     }
  87. }
  89. override fun onReload() {
  90. }

}

  2. - 3. adapter

class VpTestAdapter2(fragmentManager: FragmentManager, val data: ArrayList) : FragmentPagerAdapter(fragmentManager) {

  1. override fun getItem(position: Int): Fragment = data[position]
  3. override fun getCount(): Int = data.size

}

  2. - 4. 指示器和 fragment 同上
  3. - 5. 设置轮播
  5. 和上面设置轮播的方法基本类似，不同的地方就是runnable 里有些不同。

override fun run() { var currentItem = vp_vp_test_vp.currentItem currentItem ++ vp_vp_test_vp.currentItem = currentItem mHandler.postDelayed(this,mDelayTime) }

  2. - 6. 完整的 activity 如下

class VpTestTwoActivity: BaseActivity(R.layout.activity_vp_test) ,Runnable{

  1. private val mDelayTime: Long = 3000
  3. private val mHandler = @SuppressLint("HandlerLeak")
  4. object : Handler(){
  5.     override fun handleMessage(msg: Message) {
  6.         super.handleMessage(msg)
  7.     }
  8. }
  10. override fun run() {
  11.     var currentItem = vp_vp_test_vp.currentItem
  12.     currentItem ++
  13.    vp_vp_test_vp.currentItem = currentItem
  14.     mHandler.postDelayed(this,mDelayTime)
  15. }
  17. override fun onResume() {
  18.     super.onResume()
  19.     mHandler.postDelayed(this,mDelayTime)
  20. }
  22. override fun onPause() {
  23.     super.onPause()
  24.     mHandler.removeCallbacks(this)
  25. }
  31. override fun initData() {
  33. }
  35. override fun initEvent() {
  36. }
  38. lateinit var dataList: ArrayList<Fragment>
  39. var mCurrent2 = 1
  40. @SuppressLint("ClickableViewAccessibility")
  41. override fun initInterface() {
  43.      dataList = arrayListOf<Fragment>()
  44.     //第一个位置加上最后一个 fragment,最后一个位置加上第一个 fragment
  45.     dataList.add(VpTestFg.newInstance(3))
  46.     for (i in 0..3){
  47.         dataList.add(VpTestFg.newInstance(i))
  48.     }
  49.     dataList.add(VpTestFg.newInstance(0))
  52.     val adapter = VpTestAdapter2(supportFragmentManager,dataList)
  53.     vp_vp_test_vp.adapter = adapter
  55.     vp_vp_test_vp.currentItem = mCurrent2
  57.     //设置圆点指示器
  58.     ll_vp_test_indicator.removeAllViews()
  59.     val dimen = resources.getDimensionPixelOffset(R.dimen.m10)
  60.     for (i in 0..3){
  61.         val image = ImageView(this)
  62.         image.setBackgroundResource(R.drawable.circle_white)
  63.         ll_vp_test_indicator.addView(image)
  64.         //设置间隔
  65.         val layoutParams: LinearLayout.LayoutParams = image.layoutParams as LinearLayout.LayoutParams
  66.         layoutParams.setMargins(dimen,0,dimen,0)
  67.         image.layoutParams = layoutParams
  68.     }
  70.     //设置第一个指示器是红色
  71.     ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  73.     vp_vp_test_vp.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
  74.         override fun onPageScrollStateChanged(state: Int) {
  75.             //判断是否滑动结束
  76.             if (state == ViewPager.SCROLL_STATE_IDLE){
  77.                 if (mCurrent2 == 0){
  78.                     vp_vp_test_vp.setCurrentItem(dataList.size - 2, false);//切換，不要動畫效果
  79.                 }else if (mCurrent2 == dataList.size - 1){
  80.                     vp_vp_test_vp.setCurrentItem(1, false);//切換，不要動畫效果
  81.                 }
  82.             }
  83.         }
  85.         @SuppressLint("MissingSuperCall")
  86.         override fun onPageScrolled(
  87.             position: Int,
  88.             positionOffset: Float,
  89.             positionOffsetPixels: Int
  90.         ) {
  91.             //这里可以自定义指示器切换动画效果
  93.         }
  95.         override fun onPageSelected(position: Int) {
  96.             mCurrent2 = position
  97.             //切换指示器
  98.             changeIndicator(position)
  99.         }
  101.     })
  103.     //监听,手动滑动时取消轮播
  104.     vp_vp_test_vp.setOnTouchListener { v, event ->
  105.         when(event.action){
  106.             MotionEvent.ACTION_DOWN -> {
  107.                 LogUtils.e("action-down")
  108.                 mHandler.removeCallbacks(this)
  109.             }
  110.             MotionEvent.ACTION_UP -> {
  111.                 LogUtils.e("action-up")
  112.                 mHandler.postDelayed(this,mDelayTime)
  113.             }
  114.             MotionEvent.ACTION_MOVE -> {
  115.                 //LogUtils.e("action-move")
  116.                 //mHandler.removeCallbacks(this)
  117.             }
  118.         }
  119.         false
  120.     }
  121. }
  123. private fun changeIndicator(position: Int) {
  124.     val size = ll_vp_test_indicator.childCount
  125.     for (i in 0..size){
  126.         ll_vp_test_indicator.getChildAt(i)?.setBackgroundResource(R.drawable.circle_white)
  127.     }
  128.     when (position) {
  129.         0 -> {
  130.             ll_vp_test_indicator.getChildAt(size - 1)?.setBackgroundResource(R.drawable.circle_red)
  131.         }
  132.         dataList.size - 1 -> {
  133.             ll_vp_test_indicator.getChildAt(0)?.setBackgroundResource(R.drawable.circle_red)
  134.         }
  135.         else -> {
  136.             ll_vp_test_indicator.getChildAt(position - 1)?.setBackgroundResource(R.drawable.circle_red)
  137.         }
  138.     }
  139. }
  141. override fun onReload() {
  142. }

} ```

三、参考

ViewPager两种方式实现无限轮播
ViewPager自动轮播，手指按住停止轮播
ViewPager结合Fragment进行无限滑动
ViewPager封装轮播效果+指示器 实现一行代码展示轮播图