当前位置：移动技术网 > IT编程>移动开发>Android > 实例讲解Android中ViewPager组件的一些进阶使用技巧

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

红音潮吹,凯立德 3d,曹仁超博客

我们经常看到使用了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<view>）

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

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/pager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 
  </android.support.v4.view.viewpager> 
 
</linearlayout>

2.创建三个view:

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" > 
 
  <textview 
    android:id="@+id/txt1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:textsize="25dp" 
    android:text="第一页" > 
  </textview> 
 
</linearlayout>

<?xml version="1.0" encoding="utf-8"?> 
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" > 
 
  <textview 
    android:id="@+id/txt2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="第二页" > 
  </textview> 
   
</linearlayout>

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  
  <textview
    android:id="@+id/txt3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第三页" >
  </textview>
  
</linearlayout>

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<view> lviews=new arraylist<view>(); 
   
  public viewpageradapter(list<view> 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<view> 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<view>(); 
    /** 
     * 为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文件：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <android.support.v4.view.viewpager 
    android:id="@+id/pager" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" > 
 
    <android.support.v4.view.pagertabstrip 
      android:id="@+id/strip" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top" > 
    </android.support.v4.view.pagertabstrip> 
  </android.support.v4.view.viewpager> 
 
</linearlayout>

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<view> lviews=new arraylist<view>(); 
  private list<string> titlelist=new arraylist<string>(); 
   
  public viewpageradapter(list<view> lviews,list<string> 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<view> listviews=null; 
  viewpageradapter pageradapter; 
  pagertabstrip pagertabstrip; 
  private list<string> 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<view>(); 
    titlelist=new arraylist<string>(); 
    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<fragment>)
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<fragment> fragmentslist; 
  list<string> titlelist; 
 
  public myfragmentpageradapter(fragmentmanager fm,list<fragment> fragmentslist,list<string> 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<view> listviews=null; 
  viewpageradapter pageradapter; 
  pagertabstrip pagertabstrip; 
  private list<string> titlelist; 
  private list<fragment> 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<view>(); 
    titlelist=new arraylist<string>(); 
    fragmentslist=new arraylist<fragment>(); 
    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<fragment>实现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<fragment> fragmentslist; 
  list<string> titlelist; 
 
  public myfragmentpageradapter2(fragmentmanager fm,list<fragment> fragmentslist,list<string> 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<view> listviews=null; 
  viewpageradapter pageradapter; 
  pagertabstrip pagertabstrip; 
  private list<string> titlelist; 
  private list<fragment> 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<view>(); 
    titlelist=new arraylist<string>(); 
    fragmentslist=new arraylist<fragment>(); 
    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 version="1.0" encoding="utf-8"?><android.support.co... [阅读全文]
Android studio开发小型对话机器人app(实例代码)

前言偶然在网上看到一个免费机器人接口，所以生此想法，接口地址：，android开发比爬虫要繁琐得多，所以本文我将细说接口的调用方法，读者可根据思路去网上找一些免... [阅读全文]
Android通过Java sdk的方式接入OpenCv的方法

简述公司最近要做运动检测和眼球追踪，鉴于资费等因素，最后考虑使用opencv的相关api来来满足业务需求。在使用过程中发现opencv的v4.2.0和v4.1.... [阅读全文]
Android 通过cmake的方式接入opencv的方法步骤

简述我们通过java sdk的方式已经将opencv接入到项目中了，如果想使用opencv sdk 提供的 c++ 头文件与 .so动态库,自己封装jni这样... [阅读全文]
Android开发学习实现简单计算器

这里是用线性布局实现的计算器，为防止以后再回顾知识代码找不到，特将代码贴在这里：xml文件的布局代码：<?xml version="1.0" en... [阅读全文]
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)

在这里，我们将用到finish(),简单介绍一下它的使用:finish()官方解析:call this when your activity is done a... [阅读全文]
Flutter 实现虎牙/斗鱼弹幕功能

用flutter实现弹幕功能，轻松实现虎牙、斗鱼的弹幕效果。先来一张效果图：实现原理弹幕的实现原理非常简单，即将一条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直... [阅读全文]
Flutter 插件url_launcher简介

url_launcher是用于在移动平台中启动url的flutter插件，适用于ios和android平台。他可以打开网页，发送邮件，还可以拨打电话。githu... [阅读全文]
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

初识进度条progressbar软件：android studio实现：1.点击按钮，进度条隐藏；再次点击，进度条出现。循环2.点击按钮，水平进度条进度呈现并+... [阅读全文]
Flutter 实现网易云音乐字幕的代码

没有接触过音乐字幕方面知识的话，会对字幕的实现比较迷茫，什么时候转到下一句？看了这篇文章，你就会明白字幕so easy。先来一张效果图：字幕格式目前市面上有很多... [阅读全文]

网友评论


验证码：

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

2019年07月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论