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.ViewPager2android: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.WormDotsIndicatorandroid: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" /><Buttonandroid: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

<ImageViewandroid: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"/><TextViewandroid: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" /><TextViewandroid: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.WormDotsIndicatorclass ViewActivity : AppCompatActivity() {var adapter:OnBoardingAdapter? = nullvar 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 = adaptervar 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.RecyclerViewclass 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.titledesc.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]))}
}

Android viewpager2 + indicator 实现页面滑动相关推荐

[Android实例] ViewPager多页面滑动切换以及动画效果(精)
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...
Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)
可以实现的方式:BottomNavigationView 这里我们不使用BottomNavigationView,手动来写代码先看一下效果 fragment + viewPager2模拟微信首页2( ...
Android笔记之ViewPager实现滑动页面
1.概述; Viewpager的最大特点就是实现滑动的界面多个页面的内容可以有两种填充方式:View (普通Activity下),Fragment(V4的Fragmentctivity或者Fragm ...
Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果
1 需求实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xm ...
android页面设置背景图片大小,android页面设置background为图片后，页面滑动掉帧问题...
最近接手的一个android项目里面,有个viewpager+3个fragment的页面,就是很常见的可以左右滑动切换页面的那种布局.接手的时候告诉我,这个页面有卡顿现象,性能需要优化.一开始觉得是f ...
Android解决ViewPager页面滑动空白bug和图片点击bug
本demo 实现以下功能 1.页面数=1时,页面静止; 2.页面数=>2时,页面滑动不会产生空白基本思路当图片数量为1的时候,不让滑动, 当图片数量为2的时候,按原图片顺序再依次添加,图片数 ...
h5 android 滚动条卡顿,h5页面滑动卡顿解决方法
解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为au ...
android切换页面上滑动动画,Android ViewPager多页面滑动切换以及动画效果
评论 #28楼[楼主] 2012-06-01 14:27D.Winter @孤寒江雪我猜要么在头尾各再加入一个页卡在页卡切换监听中判断,如果选中了头尾的页卡,就返回到相邻的那个页卡.头尾页卡的界 ...
Android中实现页面滑动——ViewPager
ViewPager可以实现多页面滑动切换以及动画效果,在很多开发场合都十分常用,不仅方便实用而且功能强大.ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的v ...

Android viewpager2 + indicator 实现页面滑动

Android viewpager2 + indicator 实现页面滑动相关推荐

最新文章

热门文章