Android viewpager使用

一、viewpager简介

viewpager是一个简单的页面切换组件，可以通过往里面填充多个View，然后我们可以左右滑动，从而切换不同的View。Viewpager主要是通过创建adapter给它填充多个view，左右滑动时，切换不同的view来实现效果。

二、主要方法说明

ViewPager 直接继承了 ViewGroup，所以它是一个容器类，可以在其中添加其他的 view 类。
ViewPager 需要一个 PagerAdapter 适配器类给它提供数据。
ViewPager 经常和 Fragment 一起使用，并且提供了专门的 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类供 Fragment 中的 ViewPager 使用。

1、setAdapter(PagerAdapter adapter)
该方法为ViewPager设置适配器，ViewPager有三种适配器，它们分别有不同的特性，下面我会对这三种适配器进行讲解。
2、setCurrentItem(int item)
该方法设置显示item位置的界面。
3、setOffscreenPageLimit(int limit)
该方法用来设置当前显示页面左右两边各缓存的页面数。
4、addOnPageChangeListener(OnPageChangeListener listener)
该方法为ViewPager添加页面切换时的监听
5、setOnScrollChangeListener(OnScrollChangeListener l)
该方法为ViewPager增加滚动状态监听

OnPageChangeListener的三个方法：

onPageScrollStateChanged(int state)

该方法在手指操作屏幕的时候发生变化。有三个值：0(END)，1(PRESS) ，2(UP) 。当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1，0 。当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 ，0 。
onPageScrolled(int position, float positionOffset, int positionOffsetPixels)

该方法在滑动过程中将一直被调用，该方法的参数说明如下：
position:当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。
positionOffset:当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。
positionOffsetPixels:当前页面滑动像素，变化情况和positionOffset一致。

onPageSelected(int position)

position是被选中页面的索引，该方法在页面被选中或页面滑动足够距离切换到该页手指抬起时调用。

三者关系：

三个方法的执行顺序：用手指拖动翻页时，最先执行一遍onPageScrollStateChanged(1)，然后不断执行onPageScrolled，放手指的时候，直接立即执行一次onPageScrollStateChanged(2)，然后立即执行一次onPageSelected，然后再不断执行onPageScrollStateChanged，最后执行一次onPageScrollStateChanged(0)。
简而言之即：

onPageScrolled：在屏幕滑动过程中被调用。

onPageSelected：代表哪个页面被选中。

onPageScrollStateChanged：在手指操作屏幕时被调用

三、viewpager实例

viewpager的实例一：

1、mainActivity.java中初始化并使用，如下：

mainActivity.java文件

public ViewPager vp;
ArrayList<View> viewlist;
myPagerAdapter mypageradapter;


vp = findViewById(R.id.viewpager);
viewlist = new ArrayList<>();
LayoutInflater li = getLayoutInflater();
viewlist.add(li.inflate(R.layout.activity1,null,false));
viewlist.add(li.inflate(R.layout.activity2,null,false));
viewlist.add(li.inflate(R.layout.activity3,null,false));
mypageradapter = new myPagerAdapter(viewlist);
vp.setAdapter(mypageradapter);

2、myPagerAdapter类的实现

适配器myPagerAdapter.java文件

package com.testviewpager;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import java.util.ArrayList;

public class myPagerAdapter extends PagerAdapter{
private ArrayList<View> viewlist;
public myPagerAdapter(ArrayList<View> viewList){
viewlist = viewList;
}
@Override
public int getCount() {
return viewlist == null ? 0: viewlist.size();
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewlist.get(position));
return viewlist.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewlist.get(position));
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
}

3、主xml文件布局配置如下：

activity_main.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.viewpager.widget.ViewPager
android:id = "@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">

</androidx.viewpager.widget.ViewPager>

</androidx.constraintlayout.widget.ConstraintLayout>

4、各个activity xml的实现

activity1.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">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, this is first activity!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity2.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">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, this is second activity!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity2.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">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, this is second activity!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity3.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">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, this is third Activity !"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

注：

使用PagerAdapter必须重写的四个方法：

getCount(): 获得viewpager中有多少个view

destroyItem(): 移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保在finishUpdate(viewGroup)返回时视图能够被移除。

instantiateItem(): ①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了,当然你也可以自定义自己的key,但是key和每个view要一一对应的关系

isViewFromObject(): 判断instantiateItem(ViewGroup, int position)函数所返回来的Key与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View),通常我们直接写 return view == object!

实例二：

带有标题的滑动

PagerTabStrip：带有下划线

activity_main.xml

<androidx.viewpager.widget.ViewPager
android:id = "@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager.widget.PagerTitleStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</androidx.viewpager.widget.ViewPager>

适配器文件myPagerAdapterSec.java

package com.testviewpager;

import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;

import java.util.ArrayList;

public class myPagerAdapterSec extends PagerAdapter{
private ArrayList<View> viewlist;
private ArrayList<String> titleList;
public myPagerAdapterSec(ArrayList<View> viewList, ArrayList<String> titleList){
viewlist = viewList;
this.titleList = titleList;
}
@Override
public int getCount() {
return viewlist == null ? 0: viewlist.size();
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewlist.get(position));
return viewlist.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewlist.get(position));
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}

@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}

主mainActivity.java文件

package com.testviewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

public ViewPager vp;
ArrayList<View> viewlist;
//myPagerAdapter mypageradapter;
myPagerAdapterSec mypageradaptersec;
ArrayList<String> titleList;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

vp = findViewById(R.id.viewpager);
viewlist = new ArrayList<>();
LayoutInflater li = getLayoutInflater();
viewlist.add(li.inflate(R.layout.activity1,null,false));
viewlist.add(li.inflate(R.layout.activity2,null,false));
viewlist.add(li.inflate(R.layout.activity3,null,false));
// mypageradapter = new myPagerAdapter(viewlist);
// vp.setAdapter(mypageradapter);
titleList = new ArrayList<>();
titleList.add("第一个");
titleList.add("第二个");
titleList.add("第三个");


mypageradaptersec = new myPagerAdapterSec(viewlist,titleList);
vp.setAdapter(mypageradaptersec);
}
}

Android viewpager使用

猜你喜欢