抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

由潜入深使用viewPage2

前端移动

发布于：2022年10月17日

次浏览

海灵 · 文章导读
00:00 / 00:00
听一听这篇文章

先说结论

海灵提示：这篇文章带你由浅入深地掌握ViewPager2控件。内容涵盖了从基础图片切换布局与适配器的搭建，到通过取余算法和设置大数实现无限循环滚动，再到利用Handler实现自动轮播的完整过程，最后还涉及了指示器小圆点的添加方法。跟着步骤动手试试，轻松搞定这个实用的轮播图与导航切换工具吧。

概述

viewPage2是由Google在2011发布用于替代viewPage的新控件.该控件运行在水平或者垂直滑动在当前屏幕进行导航,大多用于轮播图或者导航切换

ViewPager2 轮播图流程

简单的图片切换

  1. 新建项目MysViewPage2
  2. 下载资源,移动到res/drawable文件夹下.
  3. 修改activity_main.xml文件,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

这activity_main.xml文件中,只创建了一个ViewPager2控件用于显示切换的视图且为其id名为viewpager2.
4. 新建需要被切换的视图(轮播图)的布局item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

这里仅仅创建了一个ImageView用于代表一个被切换的视图.
5. 新建适配器文件MyViewPage2Adapter

// 可以继承的适配器不止RecyclerView
class MyViewPage2Adapter(private val imageList: ArrayList<Int>) : RecyclerView.Adapter<MyViewPage2Adapter.ViewHolder>(){
    inner class ViewHolder(val view:View) : RecyclerView.ViewHolder(view) {
        // 将imageView放入Holder
        val imageView: ImageView = view.findViewById(R.id.image)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        // 加载被切换的布局
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item,parent,false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
//        设置当前视图图片ID
        holder.imageView.setImageResource(imageList[position])
    }

    override fun getItemCount(): Int = imageList.size
}

viewPage2不能继承viewPage,除了继承RecyclerView,FragmentStateAdapter等.可以前往官方文档查看更多

  1. 连接适配器,修改MainActivity.kt,代码如下:
class MainActivity : AppCompatActivity() {
    private val datas = ArrayList<Int>().apply {
        add(R.drawable.tx1)
        add(R.drawable.tx2)
        add(R.drawable.tx3)
        add(R.drawable.tx4)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val viewPage2 = findViewById<ViewPager2>(R.id.viewpager2)
        val myViewPage2Adapter = MyViewPage2Adapter(datas)
        viewPage2.adapter = myViewPage2Adapter
    }
}

代码非常简单,就是找到控件,加载适配器再载入数据.
7. 运行后可以左右滑动切换图片，ViewPager2 会根据 Adapter 中的数据逐页加载。

给ViewPage2加上循环滚动

  1. 在上面的基础上修改MyViewPage2Adapter.kt,代码如下:\
class MyViewPage2Adapter(private val imageList: ArrayList<Int>) : RecyclerView.Adapter<MyViewPage2Adapter.ViewHolder>(){
    inner class ViewHolder(val view:View) : RecyclerView.ViewHolder(view) {
        val imageView: ImageView = view.findViewById(R.id.image)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item,parent,false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
//        通过取余，一直循环
        val i  = position % imageList.size
        holder.imageView.setImageResource(imageList[i])
    }

//    设置一个超级大的数(2147483647)，达成理论无限滚动
    override fun getItemCount(): Int = Int.MAX_VALUE
}
  1. 运行后可以一直向后滑动，实际显示的图片索引通过 position % imageList.size 回到资源列表中。

给ViewPage2加上自动滚动

前面的代码都只能手动滚动,为了实现自动滚动需要借助循环器Handler来在后台自动切换下一张.不建议使用协程,因为协程不被允许修改主线程ui.

  1. 循环器,修改MainActivity.kt文件,代码如下
class MainActivity : AppCompatActivity() {
//    在主线程创建循环器
    private var mHandler = Handler(Looper.getMainLooper())
    private lateinit var viewPage2:ViewPager2
    private val datas = ArrayList<Int>().apply {
        add(R.drawable.tx1)
        add(R.drawable.tx2)
        add(R.drawable.tx3)
        add(R.drawable.tx4)
    }
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPage2 = findViewById<ViewPager2>(R.id.viewpager2)
        val myViewPage2Adapter = MyViewPage2Adapter(datas)
        viewPage2.adapter = myViewPage2Adapter
    }

//    软件启动时回调
    override fun onResume(){
        super.onResume()
    mHandler.postDelayed(runnable,500)
}
//    退出时移除循环器
    override fun onPause() {
        super.onPause()
        mHandler.removeCallbacks(runnable)
    }

    private val runnable: java.lang.Runnable = object : java.lang.Runnable {
        override fun run() {
            //获得轮播图当前的位置
            var currentPosition = viewPage2.currentItem
            currentPosition++
            viewPage2.setCurrentItem(currentPosition, true)
            mHandler.postDelayed(this, 5000)
        }
    }
}

给轮播图加上指示器(小白点)

  1. 在res/drawable/文件夹下面新增文件shape_dot.xml文件,代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="8dp"
        android:height="8dp"/>
    <corners
        android:radius="8dp"/>
    <solid
        android:color="#00ccff"/>
</shape>
  1. 在res/drawable/文件夹下面新增文件shape_dot_selected.xml文件,代码如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="8dp"
        android:height="8dp"/>
    <corners
        android:radius="8dp"/>
    <solid
        android:color="#ffffff"/>
</shape>
  1. 在activity_main.xml新增放置指示器的布局,重写布局.
<?xml version="1.0" encoding="utf-8"?>
<!--改为帧布局，方便将指示器重合-->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!--    为指示器准备的布局-->
    <LinearLayout
        android:gravity="center"
        android:id="@+id/container_indicator"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:orientation="horizontal" />
</FrameLayout>
  1. 修改MainActivity.kt,代码如下:
class MainActivity : AppCompatActivity() {
    private val TAG = "MainActivity"
    private lateinit var initIndicatorDots: LinearLayout
    //    在主线程创建循环器
    private var mHandler = Handler(Looper.getMainLooper())
    private lateinit var viewPage2: ViewPager2
    private val datas = ArrayList<Int>().apply {
        add(R.drawable.tx1)
        add(R.drawable.tx2)
        add(R.drawable.tx3)
        add(R.drawable.tx4)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPage2 = findViewById(R.id.viewpager2)
        val myViewPage2Adapter = MyViewPage2Adapter(datas)
        viewPage2.adapter = myViewPage2Adapter

        // 初始化指示器父布局
        initIndicatorDots = findViewById(R.id.container_indicator)
        viewPage2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
//            上一个图片索引
            private var lastPosition = 0
            override fun onPageSelected(position: Int) {
                super.onPageSelected(position)
                //轮播时，改变指示点
                val current = position % 4
                val last = lastPosition % 4
                initIndicatorDots.getChildAt(current).setBackgroundResource(R.drawable.shape_dot_selected)
                initIndicatorDots.getChildAt(last).setBackgroundResource(R.drawable.shape_dot)
//                将本次图片索引更新到上一个图片索引
                lastPosition = position
            }
        })
        initIndicatorDots()
    }

    //    软件启动时回调
    override fun onResume() {
        super.onResume()
        mHandler.postDelayed(runnable, 500)
    }

    //    退出时移除循环器
    override fun onPause() {
        super.onPause()
        mHandler.removeCallbacks(runnable)
    }

    private fun initIndicatorDots() {
        Log.d(TAG, "初始化完成")
//        循环数据长度
        for (i in datas.indices) {
//            实例化一个viewImage控件对象
            val imageView = ImageView(this)
//          初始启动，除了第0个，其它都是未选择状态
            if (i == 0) imageView.setBackgroundResource(R.drawable.shape_dot_selected)
            else imageView.setBackgroundResource(R.drawable.shape_dot)
//            为指示器设置宽高
            val layoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
            )

//           指示器间距
            layoutParams.marginEnd = 20
            imageView.layoutParams = layoutParams
            initIndicatorDots.addView(imageView)
        }
    }

    private val runnable: java.lang.Runnable = object : java.lang.Runnable {
        override fun run() {
            //获得轮播图当前的位置
            var currentPosition = viewPage2.currentItem
            currentPosition++
            viewPage2.setCurrentItem(currentPosition, true)
            mHandler.postDelayed(this, 5000)
        }
    }
}

在这里主要新建了选中和未选中两个指示器的xml,文件.然后在MainActivity中在onCreate生命周期时将指示器的初始图片赋值,然后注册了一个Page切换的回调函数,用于修改指示器的背景图片.
5. 运行后，轮播图切换时底部小圆点会同步切换选中状态。

本篇代码

Github

更新于：2022年10月17日

安卓

Android

轮播图

kotlin

评论




站点访问量 Loading… 站点访客数 Loading…

Copyright © 2022-