欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  移动技术

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

程序员文章站 2024-02-26 11:36:34
我们经常看到使用了viewpager的app，在每页上面都会有一个滑块来标志当前处于哪一页。在pagerview包里有android.support.v4.view.pag...

我们经常看到使用了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.运行实例：

实例讲解Android中ViewPager组件的一些进阶使用技巧
可以实现翻页效果。

二 添加标题
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.运行实例如下：

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

三 实现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.运行实例：

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

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

四 实现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(); 
     
  } 
 
}

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

上一篇： Java TreeSet实现学生按年龄大小和姓名排序的方法示例

下一篇： 浅谈标签和JLabel类构造方法 原创

推荐阅读