翻页类视图 ViewPager-阿里云开发者社区

翻页类视图 ViewPager

2023-02-16 136

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 翻页类视图 ViewPager一、ViewPage简单介绍

一、ViewPage简单介绍

ViewPage控件可以实现页面在水平方向滑动，如下：

对于ViewPager来说，一个页面就是一个项（相当于ListView的一个列表项），许多个页面组成了ViewPager的页面项。

翻页视图的原理类似列表视图和网格视图，它们的用法也很类似。例如，列表视图和网格视图使用基本适配器BaseAdapter，翻页视图则使用翻页适配器PagerAdapter；列表视图和网格视图使用列表项的点击监听器OnItemClickListener，翻页视图则使用页面变更监听器addOnPageChangeListener监听页面切换事件。

Viewpage 3个常用的方法如下：

setAdapter：设置页面项的适配器。适配器用的是PagerAdapter及其子类。

setCurrentItem：设置当前页码，也就是要显示哪个页面。

addOnPageChangeListener：添加翻页视图的页面变更监听器。该监听器需实现接口

addOnPageChangeListener 下的 3 个方法，具体说明如下。　

1、onPageScrollStateChanged ：在页面滑动状态变化时触发。　

2、onPageScrolled ：在页面滑动过程中触发。　

3、onPageSelected ：在选中页面时，即滑动结束后触发。

二、ViewPage具体实现

第一步：首先我们要创建一个布局（明确翻页类视图具体在那个地方）

注意;在XML文件中添加ViewPager时注意指定完整路径的节点名称，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="370dp"/>
</LinearLayout>

第二步：创建一个适配器类 ImagePagerAdaptaer

因为 Viewpage 空间需要设置 PagerAdapter类型的适配器，而 PagerAdapter 是一个接口，所以我们要创建一个类来继承 PagerAdapter。

为了实现翻页功能，主要需要实现下面6个方法：

构造方法：指定适配器需要处理的数据集合

getCount：获取页面项的个数

isViewFromObject：判断当前视图是否来自指定对象，返回view == object即可

instantiateItem：实例化指定位置的页面，并将其添加到容器中

destroyItem：从容器中销毁指定位置的页面

getPageTitle：获得指定页面的标题文本，有搭配翻页标签栏时才要实现该方法

package com.example.a2022_11_4.adapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import java.util.ArrayList;
import java.util.List;
public class ImagePagerAdaptaer extends PagerAdapter {
    // 声明一个图像视图列表
    private List<ImageView> mViewList = new ArrayList<>();
    public ImagePagerAdaptaer(Context context, int[] image){
        for (int i = 0; i < image.length; i++) {
            ImageView view = new ImageView(context);
            view.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
            ));
            view.setImageResource(image[i]);
            mViewList.add(view);
        }
    }
    @Override
    public int getCount() {
        return mViewList.size();
    }
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
    // 实例化指定位置的页面，并将其添加到容器中
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        // 添加一个view到container中，然后返回一个跟这个view可以关联起来的对象
        // 这个对象能够是view自身，也能够是其余对象
        // 关键在isViewFromObject可以将view和这个object关联起来
        ImageView item = mViewList.get(position);
        container.addView(item);
        return item;
    }
    // 从容器中销毁指定位置的页面
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(mViewList.get(position));
    }
}

第三步：整合

先从布局视图中获取名叫vp_content的翻页视图，然后构建适配器，最后设置翻页视图的适配器，这样就完成啦。

这里我用了整型数组来记录图片，大家可以根据需求自行更改

package com.example.a2022_11_4;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.content.Context;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.example.a2022_11_4.adapter.ImagePagerAdaptaer;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerActivity extends AppCompatActivity {
    private int[] image = {R.drawable.oppo,R.drawable.vivo,R.drawable.xiaomi,R.drawable.iphone};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);
        ViewPager vp_content = findViewById(R.id.vp_content);
        ImagePagerAdaptaer adapter = new ImagePagerAdaptaer(this,image);
        vp_content.setAdapter(adapter);
        vp_content.setCurrentItem(0); // 设置翻页视图显示第一页
    }
}

三、给ViewPager设置监听事件

我要给 ViewPager 设置监听事件需要调用addOnPageChangeListener 监听器

主要实现三个方法：

onPageScrollStateChanged 方法

@Override
public void onPageScrollStateChanged(int static) {}

翻页状态改变时触发。 state 取值说明为： 0 表示静止， 1 表示正在滑动， 2 表示滑动完毕

在翻页过程中，状态值变化依次为：正在滑动 → 滑动完毕 → 静止

onPageScrolled 方法

@Override
public void onPageScrolled(int position, float ratio, int offset) {}

在翻页过程中触发。该方法的三个参数取值说明为：第一个参数表示当前页面的序号

第二个参数表示页面偏移的百分比，取值为 0 到 1 ；第三个参数表示页面的偏移距离

onPageSelected方法（最简单，最常用，这次监听事件主要由该方法实现）

@Override
    public void onPageSelected(int position) {
        String[] str = {"oppo","vivo","小米","iphone"};
        Toast.makeText(this, "您翻到的手机品牌是："+str[position], 
        Toast.LENGTH_SHORT).show();
    }