当前位置: 开发笔记 > Android > 正文

实例讲解Android中ViewPager组件的一些进阶使用技巧

作者：怺恆啲喏琂_615 | 来源：互联网 | 2022-02-17 01:39

这篇文章主要介绍了Android中ViewPager组件的一些进阶使用技巧,包括添加标题与onPagerChangeListener监听使用等,需要的朋友可以参考下

我们经常看到使用了ViewPager的App，在每页上面都会有一个滑块来标志当前处于哪一页。在PagerView包里有android.support.v4.view.PagerTitleStrip和android.support.v4.view.PagerTabStrip两个组件，可以在布局文件中，作为ViewPager的子标签，并设定相对与ViewPager的位置(比如顶部)。但这两个组件都很丑，并且标题会随着页面一起滑动，所以一般都不用。

其实实现一个滑块标志当前页面也很简单，大概需要两步：

第一步在布局文件ViewPager的上方放置一个ImageView组件，组件可以是图片或是shape资源。注意需要把ImageView的scaleType属性设为matrix，就是说该组件的位置和大小由一个变换矩阵来控制；

第二步在Activity中为ViewPager组件添加OnPageChangeListener监听器。在OnPageChangeListener里设定matrix，用于控制指示滑块ImageView的位置。该监听器需要实现三个方法：

onPageScrollStateChanged：用于监听滑动状态的改变

onPageScrolled：用于监听滑动的动作

onPageSeleted:用于监听页面的切换，即某个页面被选中了作为当前页面。

一般实现onPageSelected方法就可以，其他两个方法可以空着。另外为了使页面切换时滑块也是平滑地滑动，可以给滑块的ImageView指定一个TranslateAnimation动画，指定动画用setAnimation，TranlateAnimation也很简单，有个构造函数是TranslateAnimation(int beginX,int endX,int beginY,int endY)，将运动矢量的起始位置和终止位置传给它就好了。

下面我们来看五个具体的例子：

一实现ViewPager（数据源为List）

1.先在main.xml文件中添加一个ViewPager:

2.创建三个View:

<&＃63;xml version="1.0" encoding="utf-8"&＃63;>

<&＃63;xml version="1.0" encoding="utf-8"&＃63;>

<&＃63;xml version="1.0" encoding="utf-8"&＃63;>

3.创建一个ViewPager适配器类：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class ViewPagerAdapter extends PagerAdapter { 
  private List lViews=new ArrayList(); 
   
  public ViewPagerAdapter(List lViews){ 
    this.lViews=lViews; 
  } 
 
  @Override 
  public int getCount() { 
    return lViews.size(); 
  } 
 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) { 
    return arg0==arg1; 
  } 
  @Override 
  public Object instantiateItem(ViewGroup container, int position) { 
    container.addView(lViews.get(position)); 
    return lViews.get(position); 
  } 
  @Override 
  public void destroyItem(ViewGroup container, int position, Object object) { 
    container.removeView(lViews.get(position)); 
  } 
 
}

4.MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v7.app.ActionBarActivity; 
import android.support.v7.app.ActionBar; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.os.Build; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List listViews=null; 
  ViewPagerAdapter pagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    listViews=new ArrayList(); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews) ; 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
}

5.运行实例：

2016323152038108.jpg (707×476)
可以实现翻页效果。

二添加标题
1.我们需要更改main.xml文件：

2.需要更改适配器文件：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v4.view.PagerAdapter; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class ViewPagerAdapter extends PagerAdapter { 
  private List lViews=new ArrayList(); 
  private List titleList=new ArrayList(); 
   
  public ViewPagerAdapter(List lViews,List titleList){ 
    this.lViews=lViews; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public int getCount() { 
    return lViews.size(); 
  } 
 
  @Override 
  public boolean isViewFromObject(View arg0, Object arg1) { 
    return arg0==arg1; 
  } 
  @Override 
  public Object instantiateItem(ViewGroup container, int position) { 
    container.addView(lViews.get(position)); 
    return lViews.get(position); 
  } 
  @Override 
  public void destroyItem(ViewGroup container, int position, Object object) { 
    container.removeView(lViews.get(position)); 
  } 
  /** 
   * 标题 
   */ 
  @Override 
  public CharSequence getPageTitle(int position) { 
    // TODO Auto-generated method stub 
    return titleList.get(position); 
  } 
 
}

3.需要更改MainActivity.java文件：

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.support.v7.app.ActionBarActivity; 
import android.support.v7.app.ActionBar; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.os.Bundle; 
import android.view.LayoutInflater; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.Window; 
import android.os.Build; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List titleList; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
    listViews=new ArrayList(); 
    titleList=new ArrayList(); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
}

4.运行实例如下：

2016323152232160.jpg (706×473)

三实现ViewPager(数据源为List)
1.首先我们要创建三个Fragment:

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment1 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view1, container, false); 
  } 
 
} 

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment2 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view2, container, false); 
  } 
 
} 

package com.yayun.viewpagerdemo; 
 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class Fragment3 extends Fragment { 
  @Override 
  public View onCreateView(LayoutInflater inflater, ViewGroup container, 
      Bundle savedInstanceState) { 
    return inflater.inflate(R.layout.view3, container, false); 
  } 
 
}

2.设置Adapter:

package com.yayun.viewpagerdemo; 
 
import java.util.List; 
 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
 
public class MyFragmentPagerAdapter extends FragmentPagerAdapter { 
  List fragmentsList; 
  List titleList; 
 
  public MyFragmentPagerAdapter(FragmentManager fm,List fragmentsList,List titleList) { 
    super(fm); 
    this.fragmentsList=fragmentsList; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public Fragment getItem(int arg0) { 
    // TODO Auto-generated method stub 
    return fragmentsList.get(arg0); 
  } 
 
  @Override 
  public int getCount() { 
    // TODO Auto-generated method stub 
    return fragmentsList.size(); 
  } 
@Override 
/** 
 * 添加标题 
 */ 
public CharSequence getPageTitle(int position) { 
  // TODO Auto-generated method stub 
  return titleList.get(position); 
} 
 
}

3.MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.graphics.Color; 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.PageTransformer; 
import android.support.v7.app.ActionBarActivity; 
import android.view.View; 
import android.view.Window; 
 
public class MainActivity extends ActionBarActivity { 
  private ViewPager viewPager; 
  private List listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List titleList; 
  private List fragmentsList; 
  MyFragmentPagerAdapter myFragmentPagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
     
    /** 
     * 设置PagerTabStrip属性 
     */ 
    pagerTabStrip.setBackgroundColor(Color.GREEN); 
    pagerTabStrip.setDrawFullUnderline(false); 
    pagerTabStrip.setTextColor(Color.WHITE); 
    listViews=new ArrayList(); 
    titleList=new ArrayList(); 
    fragmentsList=new ArrayList(); 
    fragmentsList.add(new Fragment1()); 
    fragmentsList.add(new Fragment2()); 
    fragmentsList.add(new Fragment3()); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList); 
    //viewPager.setAdapter(pagerAdapter); 
    viewPager.setAdapter(myFragmentPagerAdapter); 
 
  } 
 
}

4.运行实例：

2016323152451926.jpg (708×471)

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四实现ViewPager(数据源为List实现FargmentStatePagerAdapter)常用
改变Adapter:

package com.yayun.viewpagerdemo; 
 
import java.util.List; 
 
import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.app.FragmentStatePagerAdapter; 
import android.view.View; 
 
public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter { 
  List fragmentsList; 
  List titleList; 
 
  public MyFragmentPagerAdapter2(FragmentManager fm,List fragmentsList,List titleList) { 
    super(fm); 
    this.fragmentsList=fragmentsList; 
    this.titleList=titleList; 
  } 
 
  @Override 
  public Fragment getItem(int arg0) { 
    // TODO Auto-generated method stub 
    return fragmentsList.get(arg0); 
  } 
 
  @Override 
  public int getCount() { 
    // TODO Auto-generated method stub 
    return fragmentsList.size(); 
  } 
@Override 
/** 
 * 添加标题 
 */ 
public CharSequence getPageTitle(int position) { 
  // TODO Auto-generated method stub 
  return titleList.get(position); 
} 
@Override 
public Object instantiateItem(View container, int position) { 
  // TODO Auto-generated method stub 
  return super.instantiateItem(container, position); 
} 
@Override 
public void destroyItem(View container, int position, Object object) { 
  // TODO Auto-generated method stub 
  super.destroyItem(container, position, object); 
} 
 
}

将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。

五 onPagerChangeListener 监听使用
只需要修改MainActivity.java:

package com.yayun.viewpagerdemo; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import android.graphics.Color; 
import android.os.Bundle; 
import android.support.v4.app.Fragment; 
import android.support.v4.view.PagerTabStrip; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.support.v4.view.ViewPager.PageTransformer; 
import android.support.v7.app.ActionBarActivity; 
import android.view.View; 
import android.view.Window; 
import android.widget.Toast; 
 
public class MainActivity extends ActionBarActivity implements OnPageChangeListener { 
  private ViewPager viewPager; 
  private List listViews=null; 
  ViewPagerAdapter pagerAdapter; 
  PagerTabStrip pagerTabStrip; 
  private List titleList; 
  private List fragmentsList; 
  MyFragmentPagerAdapter myFragmentPagerAdapter; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
     
    viewPager=(ViewPager) findViewById(R.id.pager); 
    pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip); 
     
    /** 
     * 设置PagerTabStrip属性 
     */ 
    pagerTabStrip.setBackgroundColor(Color.GREEN); 
    pagerTabStrip.setDrawFullUnderline(false); 
    pagerTabStrip.setTextColor(Color.WHITE); 
    listViews=new ArrayList(); 
    titleList=new ArrayList(); 
    fragmentsList=new ArrayList(); 
    fragmentsList.add(new Fragment1()); 
    fragmentsList.add(new Fragment2()); 
    fragmentsList.add(new Fragment3()); 
    titleList.add("第一页"); 
    titleList.add("第二页"); 
    titleList.add("第三页"); 
    /** 
     * 为Adapter创建数据源 
     */ 
    View view1=View.inflate(this, R.layout.view1, null); 
    View view2=View.inflate(this, R.layout.view2, null); 
    View view3=View.inflate(this, R.layout.view3, null); 
    listViews.add(view1); 
    listViews.add(view2); 
    listViews.add(view3); 
    pagerAdapter=new ViewPagerAdapter(listViews,titleList) ; 
    myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList); 
    //viewPager.setAdapter(pagerAdapter); 
    viewPager.setAdapter(myFragmentPagerAdapter); 
    viewPager.setOnPageChangeListener(this);//加载监听器 
 
  } 
 
  @Override 
  public void onPageScrollStateChanged(int arg0) { 
    // TODO Auto-generated method stub 
     
  } 
 
  @Override 
  public void onPageScrolled(int arg0, float arg1, int arg2) { 
    // TODO Auto-generated method stub 
     
  } 
 
  @Override 
  public void onPageSelected(int arg0) { 
    Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show(); 
     
  } 
 
}

运行实例即可以显示当前页面标签。

android
xml

推荐阅读

apk
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
xml
Android 自定义 RecycleView 左滑上下分层示例代码

为了满足项目需求，需要在多个场景中实现左滑删除功能，并且后续可能在列表项中增加其他功能。虽然网络上有很多左滑删除的示例，但大多数封装不够完善。因此，我们尝试自己封装一个更加灵活和通用的解决方案。 ... [详细]

蜡笔小新 2024-11-13 17:43:59
build
解决Only fullscreen opaque activities can request orientation错误的方法

本文介绍了在使用PictureSelectorLight第三方框架时遇到的Only fullscreen opaque activities can request orientation错误，并提供了一种有效的解决方案。 ... [详细]

蜡笔小新 2024-11-13 09:46:25
apk
Android 自定义加载对话框 CustomProgressDialog

本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog，包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]

蜡笔小新 2024-11-12 21:51:00
xml
Android 开发教程：SQLite 数据库使用详解

本视频教程将带你快速了解 Android 开发的基础知识，并详细讲解如何在 Android 应用中使用 SQLite 数据库进行数据存储和管理。 ... [详细]

蜡笔小新 2024-11-12 18:59:48
eclipse
Java初学者的一天

本文介绍了Java编程语言的基础知识，包括其历史背景、主要特性以及如何安装和配置JDK。此外，还详细讲解了如何编写和运行第一个Java程序，并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]

蜡笔小新 2024-11-14 18:05:41
xml
深入探讨ASP.NET 2.0中的Callback机制及其应用

本文详细解析了ASP.NET 2.0中的Callback机制，不仅介绍了基本的使用方法，还深入探讨了其背后的实现原理。通过对比Atlas框架，帮助读者更好地理解和应用这一机制。 ... [详细]

蜡笔小新 2024-11-14 10:03:15
xml
Spring 中 Bean 信息定义的三种方法探讨

本文详细探讨了 Spring 框架中实现 Bean 信息定义的三种方法：基于 XML 配置、基于注解配置和基于 Java 类配置。每种方法都有其适用场景和优缺点。 ... [详细]

蜡笔小新 2024-11-13 20:04:26
xml
Java代码分层详解及其应用场景

本文详细介绍了Java代码分层的基本概念和常见分层模式，特别是MVC模式。同时探讨了不同项目需求下的分层策略，帮助读者更好地理解和应用Java分层思想。 ... [详细]

蜡笔小新 2024-11-13 17:03:49
build
使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图

本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例，适用于初学者。 ... [详细]

蜡笔小新 2024-11-13 14:40:13
xml
Spring 切面配置中的切点表达式详解

本文介绍了如何在Spring框架中使用AspectJ风格的切面配置，详细解释了切点表达式的语法和常见示例，帮助开发者更好地理解和应用Spring AOP。 ... [详细]

蜡笔小新 2024-11-13 14:07:16
eclipse
Spring – Bean Life Cycle

Spring – Bean Life Cycle ... [详细]

蜡笔小新 2024-11-13 13:24:40
build
com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例

com.sun.javadoc.PackageDoc.exceptions()方法的使用及代码示例 ... [详细]

蜡笔小新 2024-11-13 10:47:33
xml
探索Web 2.0新概念：Widget

尽管你可能尚未注意到Widget，但正如几年前对RSS的陌生一样，这一概念正逐渐走入大众视野。据美国某权威杂志预测，2007年将是Widget年。本文将详细介绍Widget的定义、功能及其未来发展趋势。 ... [详细]

蜡笔小新 2024-11-12 18:36:54
xml
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16

怺恆啲喏琂_615

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章