• 翻页类视图 ViewPager


    目录

    一、ViewPage简单介绍

    二、ViewPage具体实现

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

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

    第三步:整合


    一、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时注意指定完整路径的节点名称,示例如下:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. xmlns:app="http://schemas.android.com/apk/res-auto"
    4. xmlns:tools="http://schemas.android.com/tools"
    5. android:layout_width="match_parent"
    6. android:layout_height="match_parent"
    7. android:orientation="vertical">
    8. <androidx.viewpager.widget.ViewPager
    9. android:id="@+id/vp_content"
    10. android:layout_width="match_parent"
    11. android:layout_height="370dp"/>
    12. </LinearLayout>

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

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

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

    • 构造方法:指定适配器需要处理的数据集合
    • getCount:获取页面项的个数
    • isViewFromObject:判断当前视图是否来自指定对象,返回view == object即可
    • instantiateItem:实例化指定位置的页面,并将其添加到容器中
    • destroyItem:从容器中销毁指定位置的页面
    • getPageTitle:获得指定页面的标题文本,有搭配翻页标签栏时才要实现该方法  
    1. package com.example.a2022_11_4.adapter;
    2. import android.content.Context;
    3. import android.view.LayoutInflater;
    4. import android.view.View;
    5. import android.view.ViewGroup;
    6. import android.widget.ImageView;
    7. import androidx.annotation.NonNull;
    8. import androidx.viewpager.widget.PagerAdapter;
    9. import java.util.ArrayList;
    10. import java.util.List;
    11. public class ImagePagerAdaptaer extends PagerAdapter {
    12. // 声明一个图像视图列表
    13. private List mViewList = new ArrayList<>();
    14. public ImagePagerAdaptaer(Context context, int[] image){
    15. for (int i = 0; i < image.length; i++) {
    16. ImageView view = new ImageView(context);
    17. view.setLayoutParams(new ViewGroup.LayoutParams(
    18. ViewGroup.LayoutParams.MATCH_PARENT,
    19. ViewGroup.LayoutParams.WRAP_CONTENT
    20. ));
    21. view.setImageResource(image[i]);
    22. mViewList.add(view);
    23. }
    24. }
    25. @Override
    26. public int getCount() {
    27. return mViewList.size();
    28. }
    29. @Override
    30. public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
    31. return view == object;
    32. }
    33. // 实例化指定位置的页面,并将其添加到容器中
    34. @NonNull
    35. @Override
    36. public Object instantiateItem(@NonNull ViewGroup container, int position) {
    37. // 添加一个view到container中,然后返回一个跟这个view可以关联起来的对象
    38. // 这个对象能够是view自身,也能够是其余对象
    39. // 关键在isViewFromObject可以将view和这个object关联起来
    40. ImageView item = mViewList.get(position);
    41. container.addView(item);
    42. return item;
    43. }
    44. // 从容器中销毁指定位置的页面
    45. @Override
    46. public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    47. container.removeView(mViewList.get(position));
    48. }
    49. }

     第三步:整合

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

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

    1. package com.example.a2022_11_4;
    2. import androidx.annotation.NonNull;
    3. import androidx.appcompat.app.AppCompatActivity;
    4. import androidx.viewpager.widget.PagerAdapter;
    5. import androidx.viewpager.widget.ViewPager;
    6. import android.content.Context;
    7. import android.media.Image;
    8. import android.os.Bundle;
    9. import android.view.View;
    10. import android.widget.ImageView;
    11. import com.example.a2022_11_4.adapter.ImagePagerAdaptaer;
    12. import java.util.ArrayList;
    13. import java.util.List;
    14. public class ViewPagerActivity extends AppCompatActivity {
    15. private int[] image = {R.drawable.oppo,R.drawable.vivo,R.drawable.xiaomi,R.drawable.iphone};
    16. @Override
    17. protected void onCreate(Bundle savedInstanceState) {
    18. super.onCreate(savedInstanceState);
    19. setContentView(R.layout.activity_view_pager);
    20. ViewPager vp_content = findViewById(R.id.vp_content);
    21. ImagePagerAdaptaer adapter = new ImagePagerAdaptaer(this,image);
    22. vp_content.setAdapter(adapter);
    23. vp_content.setCurrentItem(0); // 设置翻页视图显示第一页
    24. }
    25. }

    三、给ViewPager设置监听事件

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

    主要实现三个方法:

         onPageScrollStateChanged 方法

    1. @Override
    2. public void onPageScrollStateChanged(int static) {}
    翻页状态改变时触发。 state 取值说明为: 0 表示静止, 1 表示正在滑动, 2 表示滑动完毕
    在翻页过程中,状态值变化依次为:正在滑动 滑动完毕 静止

         onPageScrolled 方法

    1. @Override
    2. public void onPageScrolled(int position, float ratio, int offset) {}
    在翻页过程中触发。该方法的三个参数取值说明为 :第一个参数表示当前页面的序号
    第二个参数表示页面偏移的百分比,取值为 0 1 ;第三个参数表示页面的偏移距离  

     onPageSelected方法(最简单,最常用,这次监听事件主要由该方法实现)

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

    在翻页结束后触发。position表示当前滑到了哪一个页面

    最终效果如下: 

  • 相关阅读:
    详细图解 Netty Reactor 启动全流程 | 万字长文 | 多图预警
    高通WLAN框架学习(32)-- WLAN/P2P set IOCTLs(iwpriv)命令大全
    在linux虚拟机上安装docker(我的实践)
    Node.js | express 中间件详解(应用级 | 路由级 | 内置(托管静态资源) | 第三方)
    递归 Stream流式 自关联递归
    面试题:深拷贝、浅拷贝、引用拷贝的区别
    fft理解-cooley turkey
    面试官: 有了解过CAS和原子操作吗?说说看
    《软件测试》实验三:Web应用测试(WEB 功能测试——安居客)
    win10安装kafka,监听9092端口,java调用
  • 原文地址:https://blog.csdn.net/weixin_53564801/article/details/127696341