[Desarrollo de Android] ViewPager

Escenario de aplicación

1. Interfaz de guía, vista previa de varias imágenes del álbum de fotos
2. Página de varias pestañas, navegación de la aplicación
3. Exhibición publicitaria

Pasos de uso

1. Agregar dependencia
2. ViewPager de referencia en diseño xml
3. Declare la matriz y almacene la imagen en
4. Crear adaptador y completar la configuración de recursos
5. Configurar adaptador para viewpager

1. Agregar dependencias

build.grandle

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha02'
}

2. Hacer referencia a viewPager en formato xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pagers"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent"/>

	    <LinearLayout
        android:id="@+id/dots"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="160dp">
        <ImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_selected"/>
        <ImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_unselected"/>
        <ImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_unselected"/>
        <ImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_unselected"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

class MainActivity : AppCompatActivity() {
    
    
    var pics: MutableList<Int> = ArrayList()
    var dots: LinearLayout? = null

    override fun onCreate(savedInstanceState: Bundle?) {
    
    
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
		
		//3. 声明数组，将图片存入
        pics.add(R.mipmap.bg1)
        pics.add(R.mipmap.bg2)
        pics.add(R.mipmap.bg3)
        pics.add(R.mipmap.bg4)
		
		//4. 创建适配器，完成资源配置
        //实例化适配器(RecyclerView.Adapter)
        val adapter: RecyclerView.Adapter<*> = object : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    
    
            //创建
            override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    
    
                //此时用的布局是ViewPager每一页中用来乘放图片的布局
                //该布局不设置任何控件，因为会直接将图片作为根布局的背景
                val v = LayoutInflater.from(this@MainActivity).inflate(R.layout.item, parent, false)
                return ViewHolder(v)
            }

            //绑定(为ViewHolder里面的控件设置显示内容)
            override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    
    
                val h = holder as MainActivity.ViewHolder
                h.container.setBackgroundResource(pics[position])
            }

            //数量
            override fun getItemCount(): Int {
    
    
                return pics.size
            }
        }
	
		//5. 为viewpager设置适配器
        val pagers = findViewById<ViewPager2>(R.id.pagers)
        pagers.adapter = adapter
        
        var myDots = dots
        myDots = findViewById(R.id.dots)
        pagers.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    
    
            override fun onPageSelected(position: Int) {
    
    
                super.onPageSelected(position)
                for (i in 0 until myDots.childCount) {
    
    
                    (myDots.getChildAt(i) as ImageView).setBackgroundResource(R.drawable.dot_unselected)
                }
                (myDots.getChildAt(position) as ImageView).setBackgroundResource(R.drawable.dot_selected)
            }
        })
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    
    
        var container: LinearLayout = itemView.findViewById(R.id.container)

    }
}