[移动开发]Android viewpager2 + indicator 实现页面滑动

在build.gradle里面添加依赖

   implementation 'com.tbuonomo:dotsindicator:4.2'
   implementation 'androidx.viewpager2:viewpager2:1.0.0-alpha01'

首先是xml布局

activity_view.xml

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="@+id/tv_skip"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/indicator"
        app:layout_constraintVertical_bias="0.558" />

    <com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_marginLeft="16dp"
        android:layout_marginBottom="44dp"
        app:dotsColor="@color/colorglary"
        app:dotsSize="10dp"
        app:dotsSpacing="10dp"
        app:dotsStrokeColor="@color/colorglary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="NEXT"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="20dp"

?item_layout.xml

<ImageView
        android:id="@+id/img"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:src="@drawable/one"/>

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title here"
        android:textSize="25dp"
        android:textAlignment="center"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/img"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:gravity="center_horizontal" />

    <TextView
        android:id="@+id/tv_desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title here"
        android:textSize="16dp"
        android:textStyle="bold"
        android:textAlignment="center"
        android:layout_marginTop="10dp"
        app:layout_constraintTop_toBottomOf="@+id/tv_title"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:gravity="center_horizontal" />

在drawable里添加btn_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorPrimaryDark"/>
    <corners android:radius="100dp"/>
</shape>

ViewActivity

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.viewpager.widget.ViewPager
import androidx.viewpager2.widget.ViewPager2
import com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator

class ViewActivity : AppCompatActivity() {

    var adapter:OnBoardingAdapter? = null
    var list:ArrayList<OnBoardingIemModel>?= ArrayList()

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

        list!!.add(OnBoardingIemModel(
                R.drawable.one,
        "第一个页面",
        "第一句话"
        ))

        list!!.add(OnBoardingIemModel(
                R.drawable.two,
                "第二个页面",
                "第二句话"
        ))

        list!!.add(OnBoardingIemModel(
                R.drawable.three,
                "第三个页面",
                "第三句话"
        ))

        adapter = OnBoardingAdapter(list!!)
        var viewPager = findViewById<ViewPager2>(R.id.view_pager)
        viewPager.adapter = adapter
        var wormIndicator = findViewById<WormDotsIndicator>(R.id.indicator)
        wormIndicator.setViewPager2(viewPager)
        var btnNext = findViewById<Button>(R.id.btn_next)
        var btnSkip = findViewById<TextView>(R.id.tv_skip)
        btnNext.setOnClickListener {
            if(viewPager.currentItem + 1<adapter!!.itemCount){
                viewPager.currentItem+=1
            }else{
                var intent = Intent(this@ViewActivity,LoginActivity::class.java)
                startActivity(intent)
            }
        }

        btnSkip.setOnClickListener {
            var intent = Intent(this@ViewActivity,LoginActivity::class.java)
            startActivity(intent)
        }
    }
}

OnBoardingIemModel

data class OnBoardingIemModel (var image:Int,var title:String,var description:String)

OnBoardingAdapter

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class OnBoardingAdapter (var list: ArrayList<OnBoardingIemModel>):
        RecyclerView.Adapter<OnBoardingAdapter.OnBoardingViewHolder>(){
    
    inner class OnBoardingViewHolder(view: View):RecyclerView.ViewHolder(view){
        var image = view.findViewById<ImageView>(R.id.img)
        var title = view.findViewById<TextView>(R.id.tv_title)
        var desc = view.findViewById<TextView>(R.id.tv_desc)

        fun bind(model:OnBoardingIemModel){
            image.setImageResource(model.image)
            title.text = model.title
            desc.text = model.description
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int):OnBoardingViewHolder {
        return OnBoardingViewHolder(
                LayoutInflater.from(parent.context).inflate(R.layout.item_layout,parent,false)
        )
    }

    override fun getItemCount(): Int {
        return list.size
    }

    override fun onBindViewHolder(holder: OnBoardingViewHolder, position: Int) {
        holder.bind((list[position]))
    }
}